Discover Habbo's history
Treat yourself with a Secret Santa gift.... of a random Wiki page for you to start exploring Habbo's history!
Happy holidays!
Celebrate with us at Habbox on the hotel, on our Forum and right here!
Join Habbox!
One of us! One of us! Click here to see the roles you could take as part of the Habbox community!


Results 1 to 10 of 10
  1. #1
    Join Date
    Jul 2008
    Posts
    535
    Tokens
    75

    Default margin: 17px auto; not working?

    http://img83.imageshack.us/img83/1279/nonalignif9.png


    That is everything in the header div. The header's CSS:
    Code:
    .header {
    width: 800px;
    margin: 17px auto;
    }
    As you can see in the image, the logo and links aren't centered. I've been having problems with this for a while now. Does anybody know why it isn't properly centered? (there's more space on the right than the left)
    Last edited by wsg14; 10-11-2008 at 03:41 AM.

  2. #2

    Default

    It is because the header is what is being positions into the center and not the children of it.

    So say your example code is like.
    Code:
    <div id="header">
      <div id="logo"></div>
      <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
      </ul>
    </div>
    If you were to set #header with the following properties
    Code:
    #header
    {
      width: 800px;
      margin: 17px auto;
    }
    This would not cause the menu or the logo to align in the center, but more the containing div #header. If this is what you mean?

  3. #3
    Join Date
    Jul 2008
    Posts
    535
    Tokens
    75

    Default

    The CSS you posted is the exact same as mine?

  4. #4
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    7,554
    Tokens
    0

    Latest Awards:

    Default

    Quote Originally Posted by BOX! View Post
    The CSS you posted is the exact same as mine?
    Yes. What he is saying is that the actual div itsself is being moved, not the contents in the inside

  5. #5
    Join Date
    Jul 2008
    Posts
    535
    Tokens
    75

    Default

    How do I center it then?

  6. #6
    Join Date
    Mar 2008
    Location
    UK. America sucks!
    Posts
    310
    Tokens
    0

    Default

    Code:
    .header {
    margin: 0 auto;
    width: 800px;
    }

    if PHP is peanut butter...then...MySQL would be the jelly. Together they can make one heck of a good sandwich.

  7. #7
    Join Date
    Nov 2007
    Posts
    1,253
    Tokens
    150

    Latest Awards:

    Default

    The problem is not with the header div class, more the rest of it. Post the whole lot of CSS and html.


    www.fragme.co = a project.

  8. #8
    Join Date
    Jul 2008
    Posts
    535
    Tokens
    75

    Default

    HTML:
    Code:
    <div class="header">
    
    <div class="logo"></div>
    
    <div class="navigation">
    <div class="link">home</div>
    <div class="link">home</div>
    <div class="link">home</div>
    </div>
    
    </div>
    CSS:
    Code:
    .header {
    width: 800px;
    margin: 17px auto;
    }
    
    .header .logo {
    background-image: url(http://www.x/images/misc/logo.png);
    width: 166px;
    height: 63px;
    float: left;
    }
    
    .header .navigation {
    width: 400px;
    height: 42px;
    font-size: 12px;
    color: #ffffff;
    float: right;
    margin-top: 17px;
    }
    
    .header .navigation .link {
    background-image: url(http://www.x/images/misc/nav_link.png);
    width: 67px;
    height: 35px;
    float: left;
    margin-left: 10px;
    text-align: center;
    padding-top: 7px;
    }

  9. #9
    Join Date
    Nov 2007
    Posts
    1,253
    Tokens
    150

    Latest Awards:

    Default

    Float the links right, or make the width of the naviagation the exact correct width.


    www.fragme.co = a project.

  10. #10
    Join Date
    Jul 2008
    Posts
    535
    Tokens
    75

    Default

    Thanks Matt.

Posting Permissions

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