Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    How to re-position thumbnails from top to bottom.--Idea now abandoned.

    http://www.exitfegs.co.uk/steve.html

    Hello friends,

    If you check the URL above, you will see that the thumbnails are at the top.
    I would like to try them at the bottom of the page. In my ignorance I have tried altering every thimg one at a time but without success. So, obviously (at least to me.) I need to add something.

    Will some kind person point me in the right direction.

    Thanks in advance.

    Frank

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    .gallerycontainer{
    position: relative;
    height:700px
    /*Add a height attribute and set to largest image's height to prevent overlaying*/
    }
    
    .thumbnail img{
    border: 1px solid white;
    margin: 0 5px 5px 0;
    }
    
    .thumbnail:hover{
    background-color: transparent;
    }
    
    .thumbnail:hover img{
    border: 1px solid blue;
    }
    
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: 1550px;
    top: =1150px
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    text-align:center;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    
    .thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    top: 150;
    left: 90px; /*position where enlarged image should offset horizontally */
    z-index: 50;
    }
    
    </style>
    
    <title>Enter_Title_Here</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta name="generator" content="BestAddress HTML Editor Professional">
    </head>
    <body>
    <A href="index.html"><IMG style="Z-INDEX: 100; LEFT: 10px; POSITION: absolute; TOP: 0px" height=32 alt="Home page." src="home.jpg" width=42 ></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="112.jpg" width=66 border=0 ><span>Mr Keogh and Steven at John's wedding.<IMG height=600 src="112.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="85.jpg" width=66 border=0 ><span>Steven relaxing at 'Aquilla Heights' (near Maiden Castle in Dorset). Spring 2006.<IMG height=600 src="85.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="92.jpg" width=66 border=0 ><span>Steven during a day trip to Eastbourne - summer 2006.<IMG height=600 src="92.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="89.jpg" width=66 border=0 ><span>Steven, a few years ago. In the Peak District.<IMG height=600 src="89.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="69.jpg" width=66 border=0 ><span>Steven enjoying the great outdoors,<IMG height=600 src="69.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="110.jpg" width=66 border=0 ><span><br >The one above sees all!<IMG height=600 src="110.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=66 src="steve-01.jpg" width=52 border=0 ><span>Steven as a lad.<IMG style="LEFT: 100px; POSITION: absolute; TOP: -11px" height=800 src="steve-01.jpg" width=600 border=0 ><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="SteveandPhil.jpg" width=66 border=0 ><span>Steven and Philip.<IMG height=600 src="SteveandPhil.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="steve-02.jpg" width=66 border=0 ><span>A young Steven.<IMG height=600 src="steve-02.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="winhs13.jpg" width=66 border=0 ><span>A quiet read - a short break after visiting Winchester Cathedral.<IMG height=600 src="winhs13.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="Bluebell1.jpg" width=66 border=0 ><span>Steven, relaxing in one of the old First-Class carriages. On the Bluebell Line.<IMG height=600 src="Bluebell1.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="web17.jpg" width=66 border=0 ><span>Steven, Betty and Frank. Probably in the 1960's.<IMG height=600 src="web17.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="st7.jpg" width=66 border=0 ><span>On a day trip to Eastbourne - spring 2006.<IMG height=600 src="st7.jpg" width=800 border=0><br ></span></A>
    
    
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="st2.jpg" width=66 border=0 ><span>Not sure where this was taken.<IMG height=600 src="st2.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="st9.jpg" width=66 border=0 ><span>Philip and Steven at John's wedding.<IMG height=600 src="st9.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="st16.jpg" width=66 border=0 ><span>Not sure where this was taken.<IMG height=600 src="st16.jpg" width=800 border=0 ><br >Steven and Betty in Wales.</span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="st17.jpg" width=66 border=0 ><span>Steven holidaying in Wales.<IMG  height=600 src="st17.jpg" width=800 border=0 ><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="st18.jpg" width=66 border=0 ><span>Betty and Steven many years ago.<IMG height=600 src="st18.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="st22.jpg" width=66 border=0 ><span>Steven in Hove - 2007.<IMG height=600 src="st22.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="st25.jpg" width=66 border=0 ><span>Betty, Mum and Steven. On holiday in Wales.<IMG height=600 src="st25.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="st26.jpg" width=66 border=0 ><span>Hi!, We're over here. Betty and Steve on a family holiday.<IMG height=600 src="st26.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="st28.jpg" width=66 border=0 ><span>Steven outside the "Saxon Arms" in Dorchester - 2007.<IMG height=600 src="st28.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="st32.jpg" width=66 border=0 ><span>Steven (and Little Ted) relaxing at 'Aquilla Heights' (near Maiden Castle in Dorset). Spring 2007.<IMG height=600 src="st32.jpg" width=800 border=0><br ></span></A>
    
    <A class=thumbnail href="#thumb"><IMG height=44 src="st39.jpg" width=66 border=0 ><span>Steven on holiday with friends.<IMG height=600 src="st39.jpg" width=800 border=0><br ></span></A>
    
    
    </body>
    </html>
    Last edited by effpeetee; 07-27-2007 at 10:47 PM. Reason: Code incomplete
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Regular Coder medigerati's Avatar
    Join Date
    Jul 2005
    Location
    San Antonio, Tx
    Posts
    163
    Thanks
    0
    Thanked 7 Times in 7 Posts

    Macintosh

    If you put a DIV around all the thumbnails with an ID of 'thumbnails' and add CSS to position it absolutely at the bottom it should work. Here is the code:

    CSS:
    Code:
    div#thumbnails {
    	position: absolute;
    	bottom: 0;
    	left: 0;
    }
    HTML:
    Code:
    <div id="thumbnails">
    <A class=thumbnail href="#thumb"><IMG height=40 src="112.jpg" width=59 border=0 ><span>Mr Keogh and Steven at John's wedding.<IMG height=600 src="112.jpg" alt="Use F11" width=850 border=0><br ></span></A>
    </div>
    If you need a little more help, I'm available as a Website designer in San Antonio
    ----------
    If I've helped, please check out my friend's nature photography and let me know if you like anything.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    http://www.exitfegs.co.uk/steve.html

    Thank you.

    It has put them at the bottom OK but the result is bizarre.
    It leaves a lot of dead space at the bottom of the page.

    Frank
    Have you any suggestions.

  • #4
    New Coder
    Join Date
    Jul 2007
    Location
    Bangalore, India
    Posts
    20
    Thanks
    4
    Thanked 1 Time in 1 Post
    Hi,

    You can also put all of them in a table. Give the table height=100%

    It works in IE. Check for compatibility in others.

    Regards,
    Sridhar

  • #5
    Regular Coder medigerati's Avatar
    Join Date
    Jul 2005
    Location
    San Antonio, Tx
    Posts
    163
    Thanks
    0
    Thanked 7 Times in 7 Posts
    the bottom dead space is from the hidden images within the links. I suggest changing 'visibility: hidden' to 'display: none'. This may change up the hover code you have going, so watch out for that!
    If you need a little more help, I'm available as a Website designer in San Antonio
    ----------
    If I've helped, please check out my friend's nature photography and let me know if you like anything.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by sridharr View Post
    Hi,

    You can also put all of them in a table. Give the table height=100%

    It works in IE. Check for compatibility in others.

    Regards,
    Sridhar
    Thank you Sridhar, But the whole idea of this program is to get away from tables and use instead CSS - Cascading Style Sheets.

    Tables are now frowned upon for positioning non tabular content.

    I am on a steep learning curve myself, but with the Forum help, I am getting there!

    Kind regards,

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks to all, but the task seems to raise too many difficulties. I think that I'll leave it as it is.

    Thanks again for your help and interest.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    New to the CF scene
    Join Date
    Jul 2007
    Location
    Normal, IL
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Check this out. Might give you a little insight and some motivation to try to solve your problem.

    http://ryanfait.com/sticky-footer/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •