popup image viewer - large images appear in wrong place

[janeymac]

I am using the CSS popup image viewer - I am using the code from here http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/
this is the exact code I am using in my css file


<style type="text/css">



.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 0px;
left: -1000px;
/*border: 1px dashed gray;*/
visibility: hidden;
color: black;
text-decoration: none;
}

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

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 300px;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>


The popup images appear at the top left of the page, and I would like them to appear at the same level as the thumbnail image - so if I have many thumbnails displayed down the page, the main image should display level with the thumbnail.
I hope I explained this correctly!

Can anyone help?
Thank you so much for your time.

[riptide]

top: 300px;
left: 60px; /*position where enlarged image should offset horizontally */

this is the area you want to work with. I've used this code before

maybe top:30 would be better but i'm not to sure about changing the hight it displays at.
I don't think that is an off set.

you could add position:relative to the last class and then set top:1 px.

I haven't tried that but it may work; but I don't think it will work in all browsers.

[janeymac]

Thank you for your suggestions, but no good I'm afraid.

I can adjust the top and left pixel values, but this just changes the position of the large image in relation to the top of the page.
If I add position: relative to the last class, then the page goes haywire - doesn't display correctly at all.

I need the large image to display relative to the thunmbnail - rather than to the top of the page.

[riptide]

adding a position to the last class sould make it relative to the thumb nail. when you say the page go haywire where does the large image end up.
i'm also thinking. should be relative.
it's just a hunch I'll see what I can do

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 0px;
left: -1000px;
/*border: 1px dashed gray;*/
visibility: hidden;
color: black;
text-decoration: none;
}

[riptide]

this was so stupid here is the working code.
<style type="text/css">



.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 0px;
left: 0px;
/*border: 1px dashed gray;*/
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/

border-width: 0;
padding: 2px;

}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/

visibility: visible;
top: 2px;
left: 2px;

/*position where enlarged image should offset horizontally */

}
</style>
just use this it wasn't as hard.

[janeymac]

Thank you for your reply - Unfortunately it didn't work though.
I uploaded the new code into the css file & this is the result http://www.fencesunlimited.net/customwoodfences.php

Any ideas as to why this is?
When I look at the example code here http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/ the large images appear relative to the thumbnail, but mine are still appearing at the top of the page.
any help would be greatly appreciated!
Thank you

[janeymac]

So I have tried playing with the CSS some more and now the large images are displaying relative to the thumbnails, but they are not displaying on the page correctly.
this is the CSS file I am using

<style type="text/css">



.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 0px;
left: 0px;
/*border: 1px dashed gray;*/
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/

border-width: 0;
padding: 2px;

}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
position: relative;
z-index: 60;
visibility: visible;
top: 2px;
left: 2px;

/*position where enlarged image should offset horizontally */

}
</style>


and this is the result
http://http://www.fencesunlimited.net/customwoodfences.php

any help anyone can give would be greatly appreciated.
Thank you!

[janeymac]

found the answer - just in case it helps someone else...

this is the code for the css file that worked. The large image is now relative to the thumbnail (not the top of the page) and the large images now display correctly.


/* CSS Document */

<style type="text/css">



.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: transparent;
padding: 0px;
left: 0px;
/*border: 1px dashed gray;*/
visibility: hidden;
color: black;
text-decoration: none;
}

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

}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
right: 2px;

/*position where enlarged image should offset horizontally */

}
</style>





the corrected page http://http://www.fencesunlimited.net/customwoodfences.php