SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need to center this menu

    http://fwd4.me/Xgq

    I need to center the menu on my page, cant get it work, I would like to eliminate the navigation div if possible, and just have a menu outer div and then the ul. Any help please as its getting really frustrating. thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The easiest way is if you know the width of the menu. Then you could get rid of the #menu div and use this:

    Code:
    #navigation ul {
      margin: 0 auto;
      width: 648px; /* just an estimate */
    }
    There are some tricks by which you can center an element without a set width, but I'd have to look them up.

    EDIT: here is are: http://pmob.co.uk/pob/centred-float.htm
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I dont know the width of the menu as they can add or delete items at will, however I do know that it's never going to be more than 960px wide

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I'll throw my link into the mix. http://www.visibilityinherit.com/code/center-nav.php

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2010
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why dont you "text-align:center" the entire parent div (#navigation) it shoud work

  6. #6
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #navigation with text-align:center didnt work

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by drtanz View Post
    #navigation with text-align:center didnt work
    There were some other options posted above.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Try this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>ISUZU-HOME</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <style type="text/css">
    html,body,p,ul{margin:0;padding:0}
    body {
        width:100&#37;;
        height:100%;
        background-color:#FFFFFF;
        margin:0px;
        padding:0px;
        font-size:12px;
        font-family:Trebuchet MS, Arial, Verdana, Tahoma, sans-serif;
        color:#000000;
    }
    img {
        border:0px;
    }
    hr {
        color:#BFBFBF;
    }
    p {
        line-height:15px;
        margin:10px;
    }
    
    /* styles for Mainbody Div Start */  
    #mainbody {
        width:100%;
        margin:0px;
        padding:0px;
    }
    /* styles for Mainbody Div End */  
    
    /* styles for Header Div Start */  
    #header {
        width:960px;
        height:168px;
        margin: 0 auto;
    }
    #logo {
        background: url(http://ihostmalta.com/forums/images/logo.jpg) 0 0 no-repeat;
        width: 534px;
        height: 168px;
        margin: 0 auto;
    }
    /* styles for Header Div Start */  
    
    /* styles for Menu Div Start */  
    #navigation {
        width: 100%;
        height: 40px;
        background: url("http://ihostmalta.com/forums/images/menu_bg.png") repeat-x scroll 0 0 transparent;
        text-align: center;
    }
    #menu {
        margin: 0 auto;
        width: 960px;
        height: 40px;
    }
    #menu ul {
        display:-moz-inline-box;
        display:inline-block;
        list-style: none;
        text-align: center;
        line-height: 40px;
    }
    * html #menu ul{display:inline;}
    *+html #menu ul{display:inline;}
    #menu li {
        float: left;
        height: 40px;
        background: url("http://ihostmalta.com/forums/images/norm_left.png") no-repeat left top;
        margin: 0;
        padding: 0;
    }
    #menu a {
        color: white;
        font-family: helvetica, sans-serif;
        font-weight: bold;
        text-decoration: none;
        display: block;
        background: url("http://ihostmalta.com/forums/images/norm_right.png") no-repeat right top;
        padding: 0 15px 0 13px;
    }
    #menu #current {
        background:url("http://ihostmalta.com/forums/images/norm_left_on.png");
    }
    #menu #current a {
        background:url("http://ihostmalta.com/forums/images/norm_right_on.png") no-repeat right top;
    }
    </style>
    </head>
    <body>
    <div id="mainbody">
        <!-- Menu Starts -->
        <div id="navigation">
            <div id="menu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li id="current"><a href="#">Trucks</a></li>
                    <li><a href="#">Pickups</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Finance Options</a></li>
                    <li><a href="#">After Sales</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </div>
    </body>

  9. #9
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i see i was missing the inline block. is there any way i can do away with the navigation div? so ill just have a menu div and menu ul underneath. the html just doesnt look to nice with a navigation div and another menu div nested.

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    is there any way i can do away with the navigation div?
    That method Paul was using sets the UL itself as inline-block and the navigation div centers it with text-align:center. By doing that you are able to float the LI and avoid any whitespace nodes between the LIs'.

    centered-inline-block-kill-node

    However, there is another way to do that and eliminate the extra navigation and menu div. You can set the LIs' as inline-block and use text-align:center on the UL to center them.

    That will produce whitespace nodes if the LI wrap in the html but they can be killed by setting font-size:0 on the UL. The drawback is that the font-size must be reset in pixels on the anchor or LI. You can't use ems or &#37; since there is no longer anything for them to reference from since the UL is font-size:0

    Your using font-size:12px on your body element anyway so using pixels on your anchor should not be an issue for you.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Or you could remove the div ad use the ul instead but you would need a min -width on the main parent instead to stop items wraping.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>ISUZU-HOME</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <style type="text/css">
    html, body, p, ul {
        margin:0;
        padding:0
    }
    body {
        width:100&#37;;
        height:100%;
        background-color:#FFFFFF;
        margin:0px;
        padding:0px;
        font-size:12px;
        font-family:Trebuchet MS, Arial, Verdana, Tahoma, sans-serif;
        color:#000000;
    }
    img {
        border:0px;
    }
    hr {
        color:#BFBFBF;
    }
    p {
        line-height:15px;
        margin:10px;
    }
    /* styles for Mainbody Div Start */  
    #mainbody {
        width:100%;
        margin:0px;
        padding:0px;
    }
    /* styles for Mainbody Div End */  
    
    /* styles for Header Div Start */  
    #header {
        width:960px;
        height:168px;
        margin: 0 auto;
    }
    #logo {
        background: url(http://ihostmalta.com/forums/images/logo.jpg) 0 0 no-repeat;
        width: 534px;
        height: 168px;
        margin: 0 auto;
    }
    /* styles for Header Div Start */  
    
    /* styles for Menu Div Start */  
    #navigation {
        width: 100%;
        height: 40px;
        background: url("http://ihostmalta.com/forums/images/menu_bg.png") repeat-x scroll 0 0 transparent;
        text-align: center;
        min-width:960px;
    }
    ul#menu {
        display:-moz-inline-box;
        display:inline-block;
        list-style: none;
        text-align: center;
        line-height: 40px;
        height: 40px;
    }
    * html ul#menu {
        display:inline;
    }
    *+html ul#menu {
        display:inline;
    }
    #menu li {
        float: left;
        height: 40px;
        background: url("http://ihostmalta.com/forums/images/norm_left.png") no-repeat left top;
        margin: 0;
        padding: 0;
    }
    #menu a {
        color: white;
        font-family: helvetica, sans-serif;
        font-weight: bold;
        text-decoration: none;
        display: block;
        background: url("http://ihostmalta.com/forums/images/norm_right.png") no-repeat right top;
        padding: 0 15px 0 13px;
    }
    #menu #current {
        background:url("http://ihostmalta.com/forums/images/norm_left_on.png");
    }
    #menu #current a {
        background:url("http://ihostmalta.com/forums/images/norm_right_on.png") no-repeat right top;
    }
    </style>
    </head>
    <body>
    <div id="mainbody">
        <!-- Menu Starts -->
        <div id="navigation">
                <ul id="menu">
                    <li><a href="#">Home</a></li>
                    <li id="current"><a href="#">Trucks</a></li>
                    <li><a href="#">Pickups</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Finance Options</a></li>
                    <li><a href="#">After Sales</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
        </div>
    </div>
    </body>


Bookmarks

Posting Permissions

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