CSS Image Gallery - Resizing gallerycontainer div

[eday_2010]

I am trying to impliment the CSS Image Gallery, but am having a few problems.

I got the pop-up image where I want and everything, but I can't get the gallerycontainer div to stay within the space I want. The area I am using it in is 460px wide and I want the div to stay within this so that there is no scroll bar at the bottom of the frame. How do I keep everything in a confined space? Setting the width in the gallerycontainer properties didn't work.

[NXArmada]

overflow: auto;

Place that in the CSS for that div tag

[eday_2010]

That didn't work. It actually added a scroll bar on the side, prevented my rollover image from appearing, and made a second scrollbar at the very bottom where my navigation divs are. I think it has something to do with the position:absolute; property in the .thumbnail span definition. changing it from absolute to anything else causes the scrollbar at the bottom to go away and one on the side to appear. Also, in Dreamweaver, when I click on the blank space above the thumbnails where the popup images appear, they become visible and are cascaded to the right, the same amount as the unwanted scrollbar scrolls.

Here is the CSS fof the gallery:


.gallerycontainer{
position: relative;
margin-top:160px;
width:445px;
/*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: lightgrey;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position:absolute;
padding: 0px;
top:-100px;
border: 1px black;
visibility: hidden;
color: black;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: -150px;
left:139px; /*position where enlarged image should offset horizontally */
z-index: 10;
}

And here is the code for the gallery div from my actual page:


<div class="gallerycontainer" align="center"><a class="thumbnail" href="gallery/photo/001.jpg" target="_blank"><img src="gallery/photo/thumb/001.gif" width="50px" height="33px" border="0" /><span><img src="gallery/photo/001.jpg" height="120" width="160" /><br />
Fireworks</span></a>
<a class="thumbnail" href="#thumb"><img src="gallery/photo/thumb/002.gif" width="50px" height="33px" border="0" /><span><img src="gallery/photo/002.jpg" height="120" width="160" /><br />
Fireworks</span></a>
<a class="thumbnail" href="#thumb"><img src="gallery/photo/thumb/003.gif" width="50px" height="33px" border="0" /><span><img src="gallery/photo/003.jpg" height="120" width="160" /><br />
Fireworks</span></a>
<a class="thumbnail" href="#thumb"><img src="gallery/photo/thumb/004.gif" width="50px" height="33px" border="0" /><span><img src="gallery/photo/004.jpg" height="120" width="160" /><br />
Fireworks</span></a>
<a class="thumbnail" href="#thumb"><img src="gallery/photo/thumb/005.gif" width="50px" height="33px" border="0" /><span><img src="gallery/photo/005.jpg" height="120" width="160" /><br />
Niagara Falls</span></a>
<a class="thumbnail" href="#thumb"><img src="gallery/photo/thumb/006.gif" width="50px" height="33px" border="0" /><span><img src="gallery/photo/006.jpg" height="120" width="160" /><br />
Tulip</span></a>
<a class="thumbnail" href="#thumb"><img src="gallery/photo/thumb/007.gif" width="50px"height="33px" border="0" /><span><img src="gallery/photo/007.jpg" height="120" width="160" /><br />
Niagara River</span></a></div>


I have other unrelated divs on the page for navigating, but taking these out does nothing. Any other suggestions?

[eday_2010]

I've tried a couple things since posting this problem, but nothing has worked so far. How do I keep the invisible popup thumbs from cascading to the right? I think this is what is causing the extra blank space to the right that I do not want.

[jscheuer1]

With this set of style rules:



.gallerycontainer{
position: relative;
margin-top:160px;
width:445px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

for the gallerycontainer, it will be 445px wide but will wrap and otherwise extend itself vertically until all of its content can be seen on the page. If you set a height property/value pair (not an attribute as erroneously stated in the comment) for it, it will not exceed that height but, may overflow its dimensions in either direction. Once you've got both a height and a width set though, then you can set the overflow to auto, scroll or hidden - whichever looks best to you, to limit it to its set dimensions.

[eday_2010]

Hi,

thanks for the reply. Unfortunately the suggestions you gave did not work. Setting the height for some reason casued the page to be longer, thus adding a scroll bar on the side of the frame and empty space on the bottom, and put scroll bars on the actial div. The overflow property didn't do anything but prevent the popup image from showing.

I think I will try to find another CSS image gallery that lets me have popup previews when you rollover a thumbnail since this one doesnt seem to do what i want it to.