Trouble with image gallery [Archive]

freya

03-17-2009, 11:22 AM

Hi
I am really new to CSS and may be somewhat slow. I am trying to build up a page with a thumbnail gallery (as I am an Illustrator) and hope to use this lovely "CSS image Gallery" I found on this page.
I copied the code into may Page and it somewhat works, but my great problem is that the big image displays right at the top of the page, not in the main content.

I quote from the introduction coming with your design:
"an absolutely positioned container holding the enlarged image, anchored on the page by another container with position set to relative, is shown."

Could you show me where in the code it is defined that the big image displays within the "relative container?
I do know where to find position and yes one is set to absolute and one to relative unfortunately that does not seem to have any impact on my display image.

Thank you very much

Here my CSS (or do I have to search in the Html?)

[CODE] [CODE] [CODE] [CODE] [CODE] [CODE] [CODE]
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */

.gallerycontainer{
position: relative;
height: 300px;
/*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: -500px;
visibility: hidden;
color: black;
font-family: "Gill Sans MT", sans-serif;
font-size: 14px;
font-style: italic;
}

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

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 585px; /*position where enlarged image should offset horizontally */
z-index: 50;

}

</style>

[CODE]