[resolved] Centering navigation menu (5 posts)

  1. ans167
    Posted 4 years ago #

    I am trying to align the menu navigation to the center of my site (http://www.asindexed.com).
    I have tried
    margin: 0 auto 0 auto; white-space: nowrap;
    but the menus just stick to the left. How can I get it to center as the header does!?

    Here is the css from the stylesheet:

    .nav {vertical-align: baseline; float: left; margin-left: 15px; position: relative; z-index: 100;}
    .nav li {height: 40px; float: left; padding: 0 15px 11px 0; background: url("i/post_list.gif") -14px 50px no-repeat;}
    .nav li.current a {color: #f2f2f2;}
    .nav a {color: #ccc; font-size: 16px; font-weight: bold; text-decoration: none; padding-top: 20px; display: block;}
    .nav a:hover, .nav li.current a:hover, .jsddm_hover a, .sub-menu li a:hover {color: #fff18f;}

    I would also like the content (featured posts - square images on front page) to center as well but am experiencing the same problem. Here is the css for that element:

    .middle {padding: 0 15px 61px 0;}
    .container {padding-bottom: 100px;}
    .content {width: 785px; float: right;} 
    #show {width: 785px; overflow: hidden; margin-bottom: 10px;}
    #show img {cursor: pointer;}
    #show_nav a {font-size: 11px; color: #b8b8b8; text-decoration: none; margin-right: 10px;}
    #show_nav a:hover, #show_nav .activeSlide {color: #fff18f;}
    .post_home {width: 145px; float: left; margin: 0 0 30px 15px;}
    .thumb {display: block; width: 145px; height: 145px; margin-bottom: 5px; position: relative; color: #333;}
    .thumb img {display: block;}
    .thumb span {display: block; width: 145px; height: 145px; position: absolute; top: 0; left: 0; background: #fcf2ad;}
    .post_home h2 {font-size: 11px; font-weight: bold;}
    .post_home h2 a {color: #ccc; text-decoration: none;}
    .post_home h2 a:hover {color: #fff18f;}

    Thank you for any advice.

  2. Foxearedass
    Posted 4 years ago #

    content looks centered to me.. as far as your nav goes, the problem is that auto margin wont work without the item in question having a width defined.

    the easy way would to to put a table inside the div and use align to center the nav. yes yes tables are so last century but it's not like they are defunct.

  3. ans167
    Posted 4 years ago #

    Thanks I will give that a go!

  4. Nanang Rukmana
    Posted 4 years ago #

  5. ans167
    Posted 4 years ago #

    That link solved the problem. Thanks for the support!

Topic Closed

This topic has been closed to new replies.

About this Topic