Forum Moderators: not2easy
The popup images appear all right, but I have so far only been able to specify the position of the upper left corner. I have been able to center the image by specifying right and bottom along with left and top, but this makes the image stretched and resized when I only want the position to be fluid.
I've tried playing around with things like margin: 0 auto, and text-align: center, but have had no luck. Anyone know of a solution? It would be best (i.e. most elegant) if it did not require the CSS to "know" the size of the image, but I'll take any solution using pure CSS layout.
A related but less important issue: I've had to use fixed rather than absolute positioning because any absolute positioning I try is relative to the parent <a> box. Is there any way to skip to a higher level in the box model to use absolute positioning relative to the entire window?
Thanks.
Relevant CSS:
a.page
{
font-size: 1.5em;
position: absolute;
}div#content a img
{
position: fixed;
border-width: 0;
top: 50%;
left: 50%;
visibility: hidden;
}div#content a:hover img
{
visibility: visible;
}
Relevant XHTML (most links removed):
<div id="content"><a href="liquid.xhtml" class="page" style="top: 20%; left: 55%"> Liquid<img src="images/water.jpg" /></a>
<a href="puzzle.xhtml" class="page" style="top: 50%; left: 10%">Puzzles<img src="images/jigsaw2.jpg" /></a>
</div>
text-align: center doesn't seem to do any good, either for the links themselves or the parent div.