Need CSS code to have pop-up appear Left

Discussion in 'CSS' started by chrisj, Jun 6, 2009.

  1. #1
    The Greybox pop-up, on my website, opens in the center of the page. I'm told if I want it to open on the left side of the page, I need to modify the CSS file. Can you help me add some css code so the pop-up appears on the left side of the page instead of appearing in the center of the web page?
    Thanks.

    Here's the code currently in the ccs file:

    
    #GB_overlay {
        background-color: #000;
        position: left;
        margin: auto;
        top: 0;
        left: 0;
        z-index: 100;
    }
    
    #GB_window {
        left: 100;
        top: 0;
        font-size: 1px;
        position: left;
        overflow: visible;
        z-index: 150;
    }
    
    #GB_window .content {
        width: auto;
        margin: 0;
        padding: 0;
    }
    
    #GB_frame {
        border: 0;
        margin: 0;
        padding: 0;
        overflow: auto;
        white-space: nowrap;
    }
    
    
    .GB_Gallery {
        margin: 0 22px 0 22px;
    }
    
    .GB_Gallery .content {
        background-color: #fff;
        border: 3px solid #ddd;
    }
    
    .GB_header {
        top: 10px;
        left: 0;
        margin: 0;
        z-index: 500;
        position: absolute;
        border-bottom: 2px solid #555;
        border-top: 2px solid #555;
    }
    
    .GB_header .inner {
        background-color: #333;
        font-family: Arial, Verdana, sans-serif;
        padding: 2px 20px 2px 20px;
    }
    
    .GB_header table {
        margin: 0;
        width: 100%;
        border-collapse: collapse;
    }
    
    .GB_header .caption {
        text-align: left;
        color: #eee;
        white-space: nowrap;
        font-size: 20px;
    }
    
    .GB_header .close {
        text-align: right;
    }
    
    .GB_header .close img {
        z-index: 500;
        cursor: pointer;
    }
    
    .GB_header .middle {
        white-space: nowrap;
        text-align: center;
    }
    
    
    #GB_middle {
        color: #eee;
    }
    
    #GB_middle img {
        cursor: pointer;
        vertical-align: middle;
    }
    
    #GB_middle .disabled {
        cursor: default;
    }
    
    #GB_middle .left {
        padding-right: 10px;
    }
    
    #GB_middle .right {
        padding-left: 10px;
    }
    
    
    .GB_Window .content {
        background-color: #fff;
        border: 3px solid #ccc;
        border-top: none;
    }
    
    .GB_Window .header {
        border-bottom: 1px solid #aaa;
        border-top: 1px solid #999;
        border-left: 3px solid #ccc;
        border-right: 3px solid #ccc;
        margin: 0;
    
        height: 22px;
        font-size: 12px;
        padding: 3px 0;
        color: #333;
    }
    
    .GB_Window .caption {
        font-size: 12px;
        text-align: left;
        font-weight: bold;
        white-space: nowrap;
        padding-right: 20px;
    }
    
    .GB_Window .close { text-align: right; }
    .GB_Window .close span { 
        font-size: 12px;
        cursor: pointer; 
    }
    .GB_Window .close img {
        cursor: pointer;
        padding: 0 3px 0 0;
    }
    
    .GB_Window .on { border-bottom: 1px solid #333; }
    .GB_Window .click { border-bottom: 1px solid red; } 
               
    
    Code (markup):
     
    chrisj, Jun 6, 2009 IP
  2. bindassdelhiite

    bindassdelhiite Active Member

    Messages:
    112
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    55
    #2
    Try this..

    #GB_overlay {
        background-color: #000;
        position: left;
        margin: auto 0;
        top: 0;
        left: 0;
        z-index: 100;
    }
    Code (markup):
     
    bindassdelhiite, Jun 7, 2009 IP