Results 1 to 4 of 4

Thread: Problem with image positioning vertical offset

  1. #1
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Problem with image positioning vertical offset

    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
    Last edited by coucou; 10-06-2007 at 11:16 AM.

  2. #2
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

    ---------------
    Last edited by devaka; 10-06-2007 at 05:23 PM.

  3. #3
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Oct 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Solved

    Solved! Thanks to all

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •