Log in

View Full Version : Problem with image positioning vertical offset



coucou
10-06-2007, 04:33 AM
I am facing a problem with the vertical offset of the enlarged images in
http://komni.de/test/info.php?id=11#thumb
If the scroll bar is at the very top, onmouseover does what I want it to do i.e: overlap the default big sized picture.
When I scroll down, the vertical offset's postion is still fixed but the overlapping with the default big sized picture is lost because of the scroll bar.

A solution would be to split the .thumbnail:hover span into two parts, one that has a fixed position for the left: property and one that has a relative position for the top: property. But I am not sure this is feasible.

Any suggestions or alternatives will be greatly appreciated.

The css code is the following:

.thumbnail{
position: relative;
}

.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*/
position: fixed;
visibility: visible;
top: 120px;
left: 550px; /*position where enlarged image should offset horizontally */
}


Thanks

devaka
10-06-2007, 07:53 AM
For vertical offset you can use just "line-height" or "vertical-align" for _td_ tag or try with paddings and margins, no other way exists

---------------
http://myspace-webgraphics-software.net/glitters/d/c/f/dcf8e076314e9f1e9cc129a81058e037.gif (http://www.myspace-webgraphics-software.net)

coucou
10-06-2007, 12:57 PM
Thanks for your reply, but none of these have worked.


I have changed
.thumbnail:hover span to the following:


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

position: absolute;
visibility: visible;
top:-260px;
left: 0px; /*position where enlarged image should offset horizontally */
}

and the vertical offset is now fixed regardless whether the browser's scroll bar is pushed down or not (please see http://komni.de/test/info.php?id=11), however, the horizontal offset varies instead!
Is there a way to have the horizontal offset fixed?
it looks like fixing vertical offsets and horizontal offsets have side effects on one another
Thanks for any hints

coucou
10-14-2007, 12:23 AM
Solved! Thanks to all