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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Centering a Navigation Menu with CSS

    Hello,

    I am trying to center the navigation menu bar with css. I finally got it near the center rather than left-aligned, but I can't get it to perfectly center for some reason. Here are the CSS and HTML codes:

    CSS:
    Code:
    body { width: 100%; margin: auto; background-color: #CCC884; text-align: center; }
    
    #container { 
                 width: 100%; height: 240px; margin: 0px auto; background-image: url(../multimedia/CTLHeader.jpg); background-repeat: no-repeat;
                 } 
    
    #navbar { height: 45px; 
              width: 100%; 
              margin: 0px;
              background-color: #130940;
              border: #130940 5px 0px;
              border-style: inset none;
              text-align: center;
              position: relative; top: 140px; }
              
              
    #menu { width: 100%; height: 45px; margin: 0px; list-style: none; }
              
    ul#menu li { display: inline-block; }
                  
    ul#menu li a {
        line-height: 45px;
        padding: 0px 20px;
        letter-spacing: 2px;
        font-size: 18px;
        color: #99C;
        text-decoration: none; }
    
    ul#menu li a:hover {background-color: #; line-height: 45px; padding: 20px 20px 18px 20px;}
    
    ul#menu li a.current {background-color: #130920; padding: 13px 20px 13px 20px; }
    
    #main { margin: 0px auto; position: relative; top: 240px; text-align: center; }
    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Cameron Telecom Law | CTL</title>
    <link type="text/css" rel="stylesheet" href="css/ctl.css" />
    <script type="text/javascript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>
    
    <body onload="MM_preloadImages('multimedia/HeaderRollover.jpg','multimedia/HeaderRolloverText.jpg')">
    <div id="container">
            <div id="header"> 
                <div id="navbar">
                     <ul id="menu">
                       <li><a class="current" href="homemade.html">Home</a></li>
                      <li><a href="homemade.html">Services</a></li>
                    <li><a href="homemade.html">About</a></li>
                    <li><a href="homemade.html">Contact</a></li>
                    <li><a href="homemade.html">Links</a></li>
                  </ul>
                </div>
            </div>
           
    
            <div id="main">
              <h1>This is the main content area. Isn't it just lovely?</h1>
              </div>
            <div id="footer">
            </div>
    <!-- end of container div --></div>
    </body>
    </html>
    I've read a few books about CSS and HTML and taken a few classes but that was a few months ago, so I'm a bit rusty. Hope you can help!

  • #2
    New Coder
    Join Date
    Nov 2010
    Location
    London, UK
    Posts
    40
    Thanks
    1
    Thanked 4 Times in 4 Posts
    Firstly, always try and stick your JavaScript just before your closing body tag. This will help massivley when it comes to page loading times

    For your issue, could you put a fixed width on #navbar, then just center it with margins.

    Such as the following:

    Code:
    #navbar{width:500px;margin:0 auto;}
    The above basically says keep equal margin on left and right and nothing on top. This is the method used to centre blocks, so find a width that matches your requirements.

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    DC, thanks for your advice!

    But for some reason it still isn't centering correctly. Here's what's happening...The menu bar itself will be centered perfectly, but the text items on the menu bar are slightly off to the right. Any ideas?

    I just want a simple, centered menu bar, that stretches all the way across the page. Like the one here: http://kingdomlandscapes.com/

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Better practice for javascript is to pull it out into an external file and then reference it in the head of the HTML document ( <script type="text/javascript" src="myjavascript.js"></script> ). This way the javascript is cached by the user's browser and won't need to be downloaded over and over again for each page load.

    I'm too lazy to rebuild your page locally, but if you can give me a link to your test page I'll take a look and see what the issues might be...

    Your HTML validates just fine, which is a fantastic first step to have accomplished. Your CSS has three errors though and should be cleaned up (try out the CSS validator). They're most likely not related to your problem, but while we're tinkering you might as well fix them.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    SirGabriel (11-05-2010)

  • #5
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    Rowsdower you are my hero!

    The advice in your signature is what worked!!! * { margin: 0; padding; 0; border: 0; }

    That did the trick!! Great signature

    And thanks for your other words of advice too!


  •  

    Posting Permissions

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