SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2010
    0 Post(s)
    0 Thread(s)

    Overlay off-centre

    Hi there,

    I am trying to resolve an issue on the following web page:

    If you click on the large image of the pen at the top, you'll see the overlay works perfectly and is seamless when navigating through the slideshow.

    However, if you scroll down the page to the gallery of images at the bottom and click on one of them, the overlay appears in the bottom right of the screen. The CSS
    for that particular overlay is:

    Code CSS:
    #TB_overlay {
        position: fixed;
        z-index: 10100;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;

    And for the window inside the overlay:

    Code CSS:
    #TB_window {
        position: fixed;
        z-index: 10102 !important;
        color: rgb(0, 0, 0);
        text-align: left;
        border: 1px solid rgb(85, 85, 85);
        box-shadow: 0px 4px 30px rgb(0, 0, 0);
        display: none;
        background: none repeat scroll 0% 0% rgb(255, 255, 255);
        top: 50%;
        left: 50%;

    I need to get this fixed ASAP so if anyone can point me in the right direction, I'd be very grateful.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    NJ, USA
    65 Post(s)
    2 Thread(s)
    The images in the lower lightbox effect are being absolutely positioned.

    top:50% and left:50% puts the top left corner of the image box in the center of the viewport.

    To center these bottom images on the screen, each must have negative margins applied as follows,

    margin-top:-nnnpx; /* nnnpx = 1/2 the height of the image */
    margin-left:-nnnpx; /* nnnpx = 1/2 the width of the image */


Posting Permissions

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