14 replies [Last post]
mike82y2
Offline
newbie
Last seen: 16 years 39 weeks ago
Joined: 2005-03-05
Posts: 9
Points: 0

Hi Stu and all the website designers,

I am trying to create a simple thumbnail option for a website. The best one i have seen, is the one created by Stu.

http://www.stunicholls.myby.co.uk/menu/gallery.html

I have no idea about how to code this, can any one please show me just 2 thumbnails with 1 main frame?

much appreciated,

Michael

mike82y2
Offline
newbie
Last seen: 16 years 39 weeks ago
Joined: 2005-03-05
Posts: 9
Points: 0

a draft

pic[/img]

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Thumbnail hover

Take a copy of the source for that page, save it on your website. Then replace the image links with links to your own images.

Once you have your own copy. Play around with it. Delete parts and / or change other parts and see what happens. Its only a web page, you can't break anything.

You will learn far more that way, rather than having someone else taking that page and doing the same thing.

mike82y2
Offline
newbie
Last seen: 16 years 39 weeks ago
Joined: 2005-03-05
Posts: 9
Points: 0

Thumbnail hover

That is what i have been trying really..
I edited it with dreamweaver and got this far. Here are some problems that i am having.

1.)I want to move the top thumbnails to the bottom, but i couldnt move them at all.

2.)I have pics in varies height but all with the same width (450) how do i optimize them so they will all fit right into the box.

3.)I want the pic to be display just 450x320 but there seem to be some grey part which will also be diplayed..

I have just started working on HTML.. sorry for the noob questions.

Mike

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<style type="text/css">

#container {position:relative; width:464px; height:500px; background:#efedec url(back1.gif); border:1px solid #000;}
a.gallery, a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; float:left; margin:3px;}
a.slidea {background:url(thumb2.jpg);}
a.slideb {background:url(thumb3.jpg);}
a.slidec {background:url(thumb4.jpg);}
a.slided {background:url(thumb5.jpg);}
a.slidee {background:url(thumb6.jpg);}

a.gallery span { display:block; position:absolute; width:1px; height:1px; top:500px; left:5px; overflow:hidden; background:#efedec url(back1.gif);}
.slidek {display:block; position:absolute; width:450px; height:340px; top:50px; left:6px; padding:0; border:1px solid #000;}
a.gallery:hover {white-space:normal; border:1px solid #fff;}
a.gallery:hover img, a.gallery:active img, a.gallery:focus img {border:1px solid #000;}
a.gallery:hover span, a.gallery:active span, a.gallery:focus span {display:block; position:absolute; width:450px; height:320px; top:50px; left:5px; padding:5px; font-style:italic; color:#000; background:#efedec url(back1.gif);}

</style>
</head>

<body>
<div id="container">
<img class="slidek" src="pic1.jpg" alt="Cascade" title="Cascade" />
<a class="gallery slidea" href="#"><span><img src="pic2.jpg" alt="Fishes" title="Fishes" /></span></a>
<a class="gallery slideb" href="#"><span><img src="pic3.jpg" alt="Funnels" title="Funnels" /><br />pic3.jpg<br />Photographs3</span></a>
<a class="gallery slidec" href="#"><span><img src="pic4.jpg" alt="Vases" title="Vases" /><br />pic4.jpg<br />Photographs4</span></a>
<a class="gallery slided" href="#"><span><img src="pic5.jpg" alt="Window" title="Window" /><br />pic5.jpg<br />Photographs5</span></a>
<a class="gallery slidee" href="#"><span><img src="pic6.jpg" alt="Cascade" title="Cascade" /><br />pic6.jpg<br />Photographs6</span></a>


</div>


</div>
</body>
</html>

mike82y2
Offline
newbie
Last seen: 16 years 39 weeks ago
Joined: 2005-03-05
Posts: 9
Points: 0

Thumbnail hover

Some please help me!! PLEASE

i have the main frame in right position.. just the small gallery boxes

.slidek {display:block; position:absolute; width:450px; height:340px; top:50px; left:6px; padding:0; border:1px solid #000;}

If i remove "position:absolute; " from the line above, the gallery boxes will be diplayed under the main container but everything else will not be in position anymore...

Mike

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Thumbnail hover

try adjusting top and left until it is in the position you want it to be.

mike82y2
Offline
newbie
Last seen: 16 years 39 weeks ago
Joined: 2005-03-05
Posts: 9
Points: 0

Thumbnail hover

I tried changing the top value.. but nothing moves

mike82y2
Offline
newbie
Last seen: 16 years 39 weeks ago
Joined: 2005-03-05
Posts: 9
Points: 0

Thumbnail hover

http://www.hausyu.de/test.htm

Here is the page that i am working on

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Thumbnail hover

works for me...

.slidek { top: 60px;}
a.gallery:hover span, a.gallery:active span, a.gallery:focus span { top: 60px;}

rather than 6px

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Thumbnail hover

I confirm Chris's findings you need 60px on both rule sets as he's pointed out.

I'll delete the other thread now.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mike82y2
Offline
newbie
Last seen: 16 years 39 weeks ago
Joined: 2005-03-05
Posts: 9
Points: 0

Thumbnail hover

thanks for the input but what i was trying to do is to move those boxes to the bottom and not on the top.

Thanks,

Mike

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 45 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Thumbnail hover

Hi Mike,

In order to get your thumbnail images at the bottom of the #container div you will have to surround them with another div that has a position absolute.

<div id="thumbs">
<a class="gallery slidea" href="#"><span><img src="pic2.jpg" alt="Fishes" title="Fishes" /></span></a>
<a class="gallery slideb" href="#"><span><img src="pic3.jpg" alt="Funnels" title="Funnels" /><br />pic3.jpg<br />Photographs3</span></a>
<a class="gallery slidec" href="#"><span><img src="pic4.jpg" alt="Vases" title="Vases" /><br />pic4.jpg<br />Photographs4</span></a>
<a class="gallery slided" href="#"><span><img src="pic5.jpg" alt="Window" title="Window" /><br />pic5.jpg<br />Photographs5</span></a>
<a class="gallery slidee" href="#"><span><img src="pic6.jpg" alt="Cascade" title="Cascade" /><br />pic6.jpg<br />Photographs6</span></a>
</div>

#thumbs {position:absolute; left:0; bottom:10px;}

This will now have the effect of moving the full size images out of place.
To get them back into line you will need a style change as follows

a.gallery:hover span, a.gallery:active span, a.gallery:focus span {display:block; position:absolute; width:450px; height:300px; top:-430px; left:7px; padding:0px; font-style:italic; color:#000; }

The top:-430px is the change.

Hope this helps.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

mike82y2
Offline
newbie
Last seen: 16 years 39 weeks ago
Joined: 2005-03-05
Posts: 9
Points: 0

Thumbnail hover

Thanks Stu and all,

Its working now. but i dont have minor problem...
I set the main pic and the first pic the same one. When you move the mouse on to the first pic, the pic shrinks

http://www.hausyu.de/Cello.htm

Mike

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Thumbnail hover

For your previous example (http://www.hausyu.de/test.htm), did you try changing your absolutely positioned spans to bottom:0; rather than top:##px - they would then position from the bottom of the container context.

For the current one (http://www.hausyu.de/Cello.htm):
a.gallery:hover span, a.gallery:active span, a.gallery:focus span { padding: 0px; display: block; position: absolute; width: 450px; height: 300px; top: -300px; left: -9px; font-style: italic; color: #000; } would look to be better.

If you are really getting the hang of this positioning stuff you will realize in the original example the positioning context was the #container (which was position:relative;) but in the second example the positioning context was the span (which was position:absolute;) so you could position at the bottom of the #container.

Once you get the hang of it it will be easier than positioning your dog. Wink

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

mike82y2
Offline
newbie
Last seen: 16 years 39 weeks ago
Joined: 2005-03-05
Posts: 9
Points: 0

Thumbnail hover

Thanks everyone for all the helps,

I think the problem was that one box is set from the bottom and the other one is set from the top, thats why the pics wasnt overlaping well enough.

However i have decided to leave out the delete that image, everything is working just fine.

Thanks again,

Mike