CSS Popup Image Viewer

[auct]

I am trying to get the popup image to popup in the middle of the page the problem I am having is the thumbnails on each side the popup image is off the page any ideas how to get them all to the middle?
http://www.lilhoofbeatsminiaturehorsefarm.com/stallions.html

Thanks,
auct

[naiani]

I'm not sure, but I think you'll have to re-do the code using fluid values (em or %). The original example doesn't say anything about centering the pics within the page.

It's just a guess, based on the fact you're using absolute positioning and px
values.
Someone please correct me if I'm wrong.

[auct]

thanks naiani for responding. I know nothing about css here is the code that I got from here do you know what I would have to change?

.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: 5px;
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: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

[Spiritvn]

Do you read its comment?



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


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


Sry but i think with CSS hover image you can't center all the image becoz of using position: absolute. I think you should try a click CSS Gallery such as this:

http://www.cssplay.co.uk/menu/gallery_click.html

[Bennie]

center of the page in my browser. (I still use Windows XP and IE6 because most of my viewers use that.)

I do see a problem, however. There are 6 photos which can be selected.
But it is very difficult to select one which is not on a corner. You have to approach the photo carefully from the correct angle to get one of the inside photos to appear in the center.

I would suggest spacing the 6 images far enough apart horizontally and/or vertically so that visitors can hit the one they want easily.