thumb nail gallery

[svenjafour]

I've created a thumb nail gallery that works ok, but not quite the way I'd like it to work. The thumb nails should produce a large picture in the middle of the screen on mouse-over. The whole mouse-over thing works fine, but the picture does not show up in the thumb nail gallery, there's just an empty frame.
Here's the CSS I used:

Code: Select all

#container {
position:relative; 
width:770px; 
height:396px; 
margin:20px auto 0 auto; 
border:1px solid #aaa; 
}
 
#container ul {
padding:0; 
margin:0; 
list-style-type:none; 
}
#container a.gallery span {
position:absolute; 
width:1px; 
height:1px; 
top:5px; 
left:5px; 
overflow:hidden; 
background:#fff;
}
#container a.gallery, #container a.gallery:visited {
display:block; 
color:#000; 
text-decoration:none; 
border:1px solid #000; 
margin:1px 2px 1px 2px; 
text-align:left; 
cursor:default;
}
#container a.slidea {
background:url(../Images/welpen/060305-Bluemli1.jpg); 
height:64px; 
width:93px;
}
#container a.slideb {
background:url(../Images/welpen/060305-Bluemli2.jpg); 
height:61px; 
width:93px;
}
#container a.slidec {
background:url(../Images/welpen/060305-Bluemliundstups1.jpg); 
height:93px; 
width:93px;
}
#container a.slided {
background:url(../Images/welpen/060305-Bluemliundstups2.jpg); 
height:70px; 
width:93px;
}
* html #container a.slided {
width:91px; 
w\idth:93px;
}
#container a.slidee {
background:url(../Images/welpen/060305-Bluemliundstups3.jpg); 
height:70px; 
width:93px;
}
#container a.slidef {
background:url(../Images/welpen/060305-Bluemliundstups4.jpg); 
height:70px; 
width:93px;
}
* html #container a.slidef {
width:91px; 
w\idth:93px;
}
#container a.slideg {
background:url(../Images/welpen/060305-Bluemliundstups5.jpg); 
height:70px; 
width:93px;
}
#container a.slideh {
background:url(../Images/welpen/060305-Bluemliundstups6.jpg); 
height:70px; 
width:93px;
}
#container ul {
width:198px; 
height:386px;
}
#container li {
float:left;
}
#container ul {
margin:5px; 
float:right;
}
#container a.gallery:hover {
border:1px solid #fff; 
}
#container a.gallery:hover span {
position:absolute; 
width:372px; 
height:372px; 
top:10px; 
left:75px; 
color:#000; 
background:#fff;
}
#container a.gallery:hover img {
border:1px solid #fff; 
float:left; 
margin-right:5px;
}
#container a.slideb:hover img, #container a.slidei:hover img {
float:right;
}

And here's the webpage with the gallery:
http://webpages.charter.net/svenjafo...en/welpen.html

Any help with this is very much appreciated :-)

Svenja

[mreine]

You have other issues with this also...

As you hover over thumbs toward the bottom, the screen has rolled up enough to hide the large image that shows up. Pretty much worthless gallery at that point.

[svenjafour]

Thank you for the comment, mreine. I realize that there's more than one issue with this gallery. Any ideas/suggestions on how to fix it? I'm just starting to learn CSS and am greatful for any help I can get. Thank you.

Svenja

[mreine]

Believe it or not, images naturally flow and create a gallery all by their lonesome. Just place 20 images on a blank page and watch them layout perfectly and flow as the browser gets larger or smaller. Link the image so when someone wants a larger image they select it and the page changes to the larger image, hit the back button and they are right back where they left off. It's the natural flow of things, no special coding necessary. Add css styling and you can add borders, more spacing and tadaaaa.... a simple gallery. You can also get fancy with the css, links and spans to hide and display the larger image with captions, etc. But I'm not about to get in to all that in this thread.

[svenjafour]

So, all that fancy coding for nothing, ha! No, seriously now, maybe I should really go with a simpler design. I just wanted to know why the thumb nails weren't showing a picture. It just doesn't make sense to me. I've kind of got frustrated with it and left it alone for a while, but I'll redesign it when I get back from my vacation to Europe . Thanks again for the advice.

Svenja