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

effpeetee

07-27-2007, 08:16 PM

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.:confused: So, obviously (at least to me.) I need to add something.:D

Will some kind person point me in the right direction.:thumbsup:

Thanks in advance.

Frank

<!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 >Mr Keogh and Steven at John's wedding.<IMG height=600 src="112.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="85.jpg" width=66 border=0 >Steven relaxing at 'Aquilla Heights' (near Maiden Castle in Dorset). Spring 2006.<IMG height=600 src="85.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="92.jpg" width=66 border=0 >Steven during a day trip to Eastbourne - summer 2006.<IMG height=600 src="92.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="89.jpg" width=66 border=0 >Steven, a few years ago. In the Peak District.<IMG height=600 src="89.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="69.jpg" width=66 border=0 >Steven enjoying the great outdoors,<IMG height=600 src="69.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="110.jpg" width=66 border=0 > The one above sees all!<IMG height=600 src="110.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=66 src="steve-01.jpg" width=52 border=0 >Steven as a lad.<IMG style="LEFT: 100px; POSITION: absolute; TOP: -11px" height=800 src="steve-01.jpg" width=600 border=0 > </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="SteveandPhil.jpg" width=66 border=0 >Steven and Philip.<IMG height=600 src="SteveandPhil.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="steve-02.jpg" width=66 border=0 >A young Steven.<IMG height=600 src="steve-02.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="winhs13.jpg" width=66 border=0 >A quiet read - a short break after visiting Winchester Cathedral.<IMG height=600 src="winhs13.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="Bluebell1.jpg" width=66 border=0 >Steven, relaxing in one of the old First-Class carriages. On the Bluebell Line.<IMG height=600 src="Bluebell1.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="web17.jpg" width=66 border=0 >Steven, Betty and Frank. Probably in the 1960's.<IMG height=600 src="web17.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="st7.jpg" width=66 border=0 >On a day trip to Eastbourne - spring 2006.<IMG height=600 src="st7.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="st2.jpg" width=66 border=0 >Not sure where this was taken.<IMG height=600 src="st2.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="st9.jpg" width=66 border=0 >Philip and Steven at John's wedding.<IMG height=600 src="st9.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="st16.jpg" width=66 border=0 >Not sure where this was taken.<IMG height=600 src="st16.jpg" width=800 border=0 > Steven and Betty in Wales.</A>

<A class=thumbnail href="#thumb"><IMG height=44 src="st17.jpg" width=66 border=0 >Steven holidaying in Wales.<IMG height=600 src="st17.jpg" width=800 border=0 > </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="st18.jpg" width=66 border=0 >Betty and Steven many years ago.<IMG height=600 src="st18.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="st22.jpg" width=66 border=0 >Steven in Hove - 2007.<IMG height=600 src="st22.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="st25.jpg" width=66 border=0 >Betty, Mum and Steven. On holiday in Wales.<IMG height=600 src="st25.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="st26.jpg" width=66 border=0 >Hi!, We're over here. Betty and Steve on a family holiday.<IMG height=600 src="st26.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="st28.jpg" width=66 border=0 >Steven outside the "Saxon Arms" in Dorchester - 2007.<IMG height=600 src="st28.jpg" width=800 border=0> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="st32.jpg" width=66 border=0 >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> </A>

<A class=thumbnail href="#thumb"><IMG height=44 src="st39.jpg" width=66 border=0 >Steven on holiday with friends.<IMG height=600 src="st39.jpg" width=800 border=0> </A>

</body>
</html>

medigerati

07-27-2007, 08:55 PM

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:
div#thumbnails {
position: absolute;
bottom: 0;
left: 0;
}

HTML:
<div id="thumbnails">
<A class=thumbnail href="#thumb"><IMG height=40 src="112.jpg" width=59 border=0 >Mr Keogh and Steven at John's wedding.<IMG height=600 src="112.jpg" alt="Use F11" width=850 border=0> </A>
</div>

effpeetee

07-27-2007, 09:12 PM

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.

sridharr

07-27-2007, 09:12 PM

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

medigerati

07-27-2007, 09:22 PM

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!

effpeetee

07-27-2007, 09:24 PM

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

effpeetee

07-27-2007, 09:32 PM

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

heyden

07-28-2007, 03:33 AM

Check this out. Might give you a little insight and some motivation to try to solve your problem.

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