...

View Full Version : How to re-position thumbnails from top to bottom.--Idea now abandoned.



effpeetee
07-27-2007, 09: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 ><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>

medigerati
07-27-2007, 09: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 ><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>

effpeetee
07-27-2007, 10: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, 10: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, 10: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, 10: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, 10: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, 04: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/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum