Grow your CSS skills. Land your dream job.

Centering

  • # May 22, 2008 at 8:08 pm

    I have something I can’t figure out. I’ve centered using CSS many times, the whole text-align center/ margins 0 auto line. I’m working on a mock up now and I can’t for whatever reason get the nav to center.

    Here is the code(HTML)

    Code:

    Sarah and Erik

    Headline

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt, quam quis rutrum condimentum, nisi lacus sagittis tortor, a accumsan risus eros non velit. Etiam porttitor quam eu ligula. Ut sodales, sapien non dictum dapibus, massa felis laoreet diam, egestas sagittis nunc orci sit amet nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mauris a arcu vulputate luctus. Fusce laoreet bibendum dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In condimentum est vel magna. Quisque porta lectus eget nisi. Proin lacus dui, consequat nec, cursus ut, aliquam vehicula, tellus. Morbi porttitor, diam sed suscipit convallis, neque ipsum ultricies massa, at laoreet purus felis eu nibh. Etiam leo metus, commodo vitae, lobortis eget, dapibus ac, augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

    Here is the CSS

    Code:
    body{font-size: 62.5%; font-size: .9em; font:Georgia, “Times New Roman”, Times, serif; line-height: 21px; margin: 5px 0; color:#666666;}
    .wrapper{text-align: center; margin: 0 auto;}

    h2{font: 1.2em; color:#be1e2d;}
    ul{list-style: none inside}

    .gray{width: 100%; background-color: #f2f2f2; height: 100px;}

    .nav{padding-top: 10px;}
    .nav li{display: inline;}
    .nav li a{display: block; width: 80px; height: 80px; float: left; text-indent:-9999px; padding-left:10px;}
    .nav li.drive a{background: url(images/drive.jpg) bottom center no-repeat;}
    .nav li.drive a:hover{background-position: center center;}

    .red{width: 100%; background-color: #BE1E2D; height: 25px;}

    .content{text-align: left; margin: 0 auto; width: 800px;}
    .main{float: left; width: 580px;}
    .side{float: right; width: 200px;}

    It’s the .nav class that is causing the problems. Everything else lines up just fine, but the nav for some reason lines up to the left and nothing I can do will make it center on the page.

    Any thoughts/ideas?

    Thanks.

    # May 22, 2008 at 8:33 pm

    I am not sure what is the problem. Here in Safari and Firefox, it looks ok to me:

    [img]http://img352.imageshack.us/img352/1582/afbeelding2tu1.th.jpg[/img]

    # May 22, 2008 at 8:58 pm

    Here is the screen shot from my local computer. I’m developing it on Mac and testing with Firefox. The problem if for whatever reason the images go to the left. Sorry I’m sure the images would have made the problem clearer.

    # May 22, 2008 at 10:48 pm

    The content is centered because you have a div with a class of content that you are centering:
    .content{text-align: left; margin: 0 auto; width: 800px;}

    The .nav list isn’t centered because it is not inside of that div, it’s inside of the "wrapper" div for which you have this declared:
    .wrapper{text-align: center; margin: 0 auto;}

    That’s not going to center, because it doesn’t have a width set like the content does, so it’s defaulting to 100% wide.

    # May 22, 2008 at 11:16 pm

    Thats not do anything either. Here is the and screen shot…way stripped down:

    Code:
    body{ text-align: center; font: 62.5%; font-family: Georgia, “Times New Roman”, Times, serif; padding: 0;}
    .wrapper{text-align: left; width: 800px; margin: 0 auto;}

    .nav{padding-top: 10px;}
    .nav li{display: inline;}
    .nav li a{display: block; width: 80px; height: 80px; float: left; text-indent:-9999px; padding-left:10px;}
    .nav li.drive a{background: url(images/drive.jpg) bottom center no-repeat;}
    .nav li.drive a:hover{background-position: center center;}

    Okay, with that the page is center on the page, but the menu bar still stays to the left, I want it to be directly centered in the middle of the screen. I have to use the float: left tag so that it stays displayed inline. And even if I add the < center > tags above a below the ul code is does nothing. Plus as you can see in the mock up above I’m wanting the greay and red bar to have a width of 100% of the page with the content still centered in the middle.

    I’m really at a lost here I have no idea what is going on. Does this make the problem any clearer?

    # May 25, 2008 at 6:46 pm

    Centering a row of list items can be tricky. See:

    http://css-tricks.com/centering-list-it … ght-think/

    Since your row of list items are of static widths though, since they are images, I would just fake it and add left padding to the UL until they look centered within the pagewrap.

    # May 26, 2008 at 11:47 am

    hi,
    The ul .nav won’t center because it has no width.

    You should add something like this.

    .nav{padding-top: 10px; width:500px; margin:0 auto;}

    That should do it! :D

    # May 29, 2008 at 11:54 am

    I see the problem. Your nav doesn’t have a width, so the <ul> spans the width of the containing <div> (.wrapper), which is 800px. The <li>s inside of the <ul> are floating left (which they have to be), but that means they float all the way to the left of that 800px, which is why they’re off-center.

    The solution is to make the wrapper exactly wide enough so that the <li>s fit inside it perfectly, and no wider.

    In case that sounds confusing, I wrote my own code to demonstrate this. There are two <ul>s – one with the correct width that makes the menu centered, and the other with a wider width to show what’s happening to you. I tested it and it works in IE6, Firefox 2, and Safari 3. Here’s the code (copy and paste into your own document – the board didn’t let me attach an HTML file to this post):

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    <div class="wrapper">


    Finally – make sure you have a doctype also! I’ve found IE will ignore "margin: 0 auto;" is no doctype is present.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".