Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Tried everything - Cant center

    Hi,

    Im trying to center something on my website. Im trying to move the black rectangle at the bottom of the page here to sit in the middle:

    http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=13

    ------------------------------------------------------

    Ive tried the techniques on this page:

    http://www.w3.org/Style/Examples/007/center

    ------------------------------------------------------

    Here is my CSS:

    Code:
    #thumbs-container {
        position: relative; /* Opera */
        width: 100%;
        margin: -110px auto 0;
        padding: 6px 40px;
        background-color: #000;
        z-index: 100;
        margin-left: auto;
        margin-right: auto;
    }
    ------------------------------------------------------

    Can someone explain where I am going wrong please?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The following should do it.
    Code:
    #thumbs-container {/*main.php...itemId=13 (line 31)*/
    margin:-110px auto 0 auto;
    padding-left:0;
    padding-right:0;
    text-align:center;
    width:680px;
    }
    At present, you have
    Code:
    #thumbs-container{
    width:680px;
    margin-left:0px;
    padding-left:0px;
    padding-right:0px;
    text-align:center;
    }
    Last edited by abduraooft; 01-07-2010 at 12:53 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thank you for the reply. Thats actually done something quite odd on my site. The black box seems to have disappeared, but things are still sitting in the same place. Is there some code conflicting or something?

  • #4
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Hi,

    Quick update. I found that the previous coder has also repeated some of the css in a different template file. I think ive fixed it according to your spec.

    It is sitting in the center now but the background black no longer shows. Do you know why this might be happening?
    Last edited by spadez; 01-07-2010 at 01:12 PM.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    See http://jigsaw.w3.org/css-validator/v...xian/theme.css and check the error at line 380
    Code:
    /* Thumbnails 
    
    #thumbs-container {
        position: relative; /* Opera */
        width: 100%;
        margin: -110px auto 0;
        padding: 6px 40px;
        background-color: #000;
        z-index: 100;
        margin-left: auto;
        margin-right: auto;
    }
    
    
    #thumbs-container {
    margin:0 auto;
    padding-left:0;
    padding-right:0;
    background-color: #000;
    text-align:center;
    width:680px;
    }
    */
    The comments are not closed properly. Better to remove that inner comment.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Hi,

    Sorry to come back again! Well spotted, I fixed the problem and checked the HTML errors again (they are pretty much problems with the moz corners and opacity), but I still cant see the background color.

    Is it something to do with the z-index perhaps?

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Now, there's no background property applied. Make it like
    Code:
    #thumbs-container {/*main.php...itemId=13 (line 40)*/
    background-color:#000;
    margin:-110px auto 0;
    padding-left:0;
    padding-right:0;
    text-align:center;
    width:680px;
    }
    PS: Get firebug for your Firefox, to make your life easier.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thank you so much for your help!


  •  

    Posting Permissions

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