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 9 of 9
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation How can I centre the menu bar?

    I would appreciate some help with this code.
    I want to centralise the menu bar <ul>. Margin:0 auto; does not seem to work and I cannot understand why.

    Getting passed my 'Sell by date' I expect.

    Frank

    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>
    
    <style type="text/css">
    
    
    
    *{
      padding:0;
      margin:0;
      }
    
    body html{
      width:100%;
      height:100%;
      }
    
      #wrap{
        width:100%;
      }
    
    
    
    ul{
      list-style-type: none;
      width:90%;
      margin:0 auto;
    
      text-align:center;
    }
    
    ul li{
      display: inline;
      width:12em;
    
    }
    
    a{
      float: left;
      width: 100px;
      text-decoration: none;
      color: white;
      font-size:12px;
      font-weight: bold;
      background: #999900;
      padding: 5px;
      border-right: 1px solid #FFFFFF;
    }
    
    a:hover{
      background: #CCCC00;
    }
    
    </style>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
      <title>CSS horizontal menu</title>
    </head>
    
    <body>
    <div id="wrap">
      <ul>
        <li><a href="#">Css</a></li>
    
        <li><a href="#">Flash</a></li>
    
        <li><a href="#">ActionScript</a></li>
    
        <li><a href="#">Javascript</a></li>
    
        <li><a href="#">SQL Server</a></li>
    
        <li><a href="#">PHP</a></li>
      </ul>
      </div>
    </body>
    </html>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    United Kingdom
    Posts
    161
    Thanks
    6
    Thanked 28 Times in 28 Posts
    Try changing the css by adding this to the ul.

    Code:
    ul{
    position:relative;
    top:5px;
    left:-100px;
      list-style-type: none;
      width:90%;
      margin:0 auto;
    
      text-align:center;
    }
    and change the variable 'left:-100px' to the ammount to get it centre, hope this helps!

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks, but I really need it to work at all resolutions.
    margin:0 auto; should work; I can't understand why it doesn't.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Frank,
    How's life?

    Your menu is not centering because of the float:left; on the a. Try making your CSS look like this:
    Code:
    *{
      padding:0;
      margin:0;
      }
    
    body, html{ /*need a comma betweent these*/
      width:100%;
      height:100%;
      }
      #wrap{
        width:100%;
    overflow: auto; /*you may need this too...*/
      }
    ul{
      list-style-type: none;
      width:90%;
      margin:0 auto;
      text-align:center;
    }
    ul li{
      display: inline;
    }
    a{
      width: 100px;
      text-decoration: none;
      color: white;
      font-size:12px;
      font-weight: bold;
      background: #999900;
    margin: 0-2px;
      padding: 5px 20px;  
    border-right: 1px solid #FFFFFF;
    }
    
    a:hover{
      background: #CCCC00;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    effpeetee (03-03-2009)

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Hello Excavator.

    Doing as well as can be expected for an old fogey.

    Thanks for the code. It works fine. The only other thing that I have been unable to do is to get all the buttons the same size. I'm beginning to think that I need a brain transplant. My mind is a complete blank on this. I have tried adding a width to everything in turn with no success.

    Any pointers gratefully followed.

    I've put it here.

    Frank
    Last edited by effpeetee; 03-03-2009 at 10:50 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    I'm beginning to think that I need a brain transplant. My mind is a complete blank on this. I have tried adding a width to everything in turn with no success.

    Any pointers gratefully followed.
    For that you need to set a width for your anchor after changing it's display behaviour. But, when we turn them block, they will stretch automatically to the entire width and thus they will become vertical rather than horizontal.

    Then, we need to set float:left; to them, but as a result they will be aligned left, instead of centre.

    Code:
    a {/*horimenu.htm (line 30)*/
    background:#999900 none repeat scroll 0;
    border-right:1px solid #FFFFFF;
    color:white;
    font-size:12px;
    font-weight:bold;
    margin:0 -2px;
    padding:5px 20px;
    text-decoration:none;
    float:left;
    width:100px;
    }
    Considering the above facts, I believe in the method used in the http://www.cssplay.co.uk/menus/centered2.html would be the effective solution.
    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=iso-8859-1">
      <title>CSS horizontal menu</title>
      <style type="text/css">
    
    *{
      padding:0;
      margin:0;
      }
    
    body, html{ 
       height:100%;
      }
    #wrap{
        width:100%;
      }
    .menu {
      display:table;           /* ignored by IE */
      padding:0; 
      list-style-type:none;
      white-space:nowrap;      /* keep text on one line */
       margin:0 auto;
      }
    .menu li {
      display:table-cell;      /* ignored by IE */
      }
    .menu a, .menu a:visited {
      display:block;           /* for all browsers except IE */
      text-decoration: none;
      color: white;
      font-size:12px;
      font-weight: bold;
      background: #999900;
      /*margin: 0 -2px;*/
      padding: 5px 20px;  
      border-right: 1px solid #FFFFFF;
      width:100px;
      }
    .menu a:hover {
       background: #CCCC00;
      }
    
    
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .menu {
      display:inline-block;    /* for IE only */
      width:1px;               /* IE will expand 1px width to fit menu width */
      padding:0 2px;           /* fix bug in IE to get border spacing correct */
      }  
    .menu li {
      display:inline;          /* for IE only */
      }
    .menu a, .menu a:visited {
      display:inline-block;    /* for IE only */ 
      margin:0 -2px;           /* to correct an IE bug that doubles the border width */  
      }
    </style>
    <![endif]-->
    
    </head><body>
    <div id="wrap">
      <ul class="menu">
        <li><a href="#">Css</a></li>
    
        <li><a href="#">Flash</a></li>
    
        <li><a href="#">ActionScript</a></li>
    
        <li><a href="#">Javascript</a></li>
    
        <li><a href="#">SQL Server</a></li>
    
        <li><a href="#">PHP</a></li>
      </ul>
      </div>
    </body></html>
    Last edited by abduraooft; 03-03-2009 at 11:31 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks abduraooft, but the menu bar is now not centred. I cannot find a way to do it. Obviously, it's not my day today.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Oh... I'd tested it in IE6, FF2-3 and it was fine. But it is pushed to the right in IE7. Argg!
    Edit:
    If you are making them all equal width, then it's easy to calculate the effective width of the <ul> and then set a margin:0 auto; to it like
    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=iso-8859-1">
      <title>CSS horizontal menu</title>
      <style type="text/css">
    
    *{
      padding:0;
      margin:0;
      }
    
    body, html{ 
       height:100%;
      }
    #wrap{
        width:100%;
      }
    .menu {
     padding:0; 
      list-style-type:none;
      white-space:nowrap;      
      margin:0 auto;
      width:846px; /*6X(100+20+20+1) */
     
      }
    .menu li{
     float:left;
    }
    .menu a, .menu a:visited {
     text-decoration: none;
      color: white;
      font-size:12px;
      font-weight: bold;
      background: #999900;
      
      padding: 5px 20px;  
      border-right: 1px solid #FFFFFF;
      float:left;
      width:100px;
      
      }
    .menu a:hover {
       background: #CCCC00;
      }
    
    
    </style>
    
    </head><body>
    <div id="wrap">
      <ul class="menu">
        <li><a href="#">Css</a></li>
    
        <li><a href="#">Flash</a></li>
    
        <li><a href="#">ActionScript</a></li>
    
        <li><a href="#">Javascript</a></li>
    
        <li><a href="#">SQL Server</a></li>
    
        <li><a href="#">PHP</a></li>
      </ul>
      </div>
    </body></html>
    Last edited by abduraooft; 03-03-2009 at 12:45 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    effpeetee (03-03-2009)

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Many thanks abduraooft. Why didn't I think of that?
    Css still frightens me a little. It seems so easy to upset it and I often land up by using a "suck it and see" process. Not very efficient.

    I have six books on CSS and not one of them helped me with this problem.

    Frank

    Why does a small tax increase cost you two hundred dollars and a substantial tax cut save you thirty cents? - Peg Bracken
    Last edited by effpeetee; 03-03-2009 at 01:33 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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