html - How to center the following menu? -


i've got following inside div. i'd center menu elements. appear so...

 | home | blog | | contact | 

i'd center like...

                         | home | blog | | contact | 

here's css, need change?

     ul#menu   { margin:0; padding:0; list-style-type:none; width:auto; position:relative; display:block; height:30px; font-size:12px; font-weight:bold; background:transparent url(images/nav_bg.png) repeat-x top left; font-family:arial, helvetica, sans-serif; border-bottom:1px solid #000000; border-top:1px solid #000000;     }       ul#menu li       { display:block; float:left; margin:0; padding:0;      }      ul#menu li    { display:block; float:left; color:#999999; text-decoration:none; font-weight:bold; padding:8px 20px 0 20px;      }      ul#menu li a:hover      {   color:#ffffff; height:22px; background:transparent url(images/nav_bg.png) 0px -30px no-repeat;           }       ul#menu li a.current    { display:inline; height:22px; background:transparent url(images/nav_bg.png) 0px -30px no-repeat;   float:left; margin:0;    } 

to center menu, give menu width , use:

maring:0 auto; 

the final result this:

<!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>     <title>untitled page</title>     <style>          .menu         {             width:270px;             margin:0 auto;         }         ul#menu         {             margin: 0;             padding: 0;             list-style-type: none;             width: auto;             position: relative;             display: block;             height: 30px;             font-size: 12px;             font-weight: bold;             background: transparent url(images/nav_bg.png) repeat-x top left;             font-family: arial, helvetica, sans-serif;             border-bottom: 1px solid #000000;             border-top: 1px solid #000000;         }          ul#menu li         {             display: block;             float: left;             margin: 0;             padding: 0;             width:60px;             text-align:center;         }          ul#menu li.divider         {             width:5px;         }          ul#menu li         {             display: block;             float: left;             color: #999999;             text-decoration: none;             font-weight: bold;             padding: 8px 20px 0 20px;         }          ul#menu li a:hover         {             color: #ffffff;             height: 22px;             background: transparent url(images/nav_bg.png) 0px -30px no-repeat;         }           ul#menu li a.current         {             display: inline;             height: 22px;             background: transparent url(images/nav_bg.png) 0px -30px no-repeat;             float: left;             margin: 0;         }     </style> </head> <body> <div class="menu">     <ul id="menu">         <li class="divider">|</li>         <li>home</li>         <li class="divider">|</li>         <li>blog </li>         <li class="divider">|</li>         <li>about </li>         <li class="divider">|</li>         <li>contact</li>         <li class="divider">|</li>     </ul> </div>  </body> </html> 

update:

if didn't want use pipes in divider, use:

    ul#menu li.divider     {         width:2px;         background-color:black;     } 

instead give similar , make screen readers not blow @ you.


Comments

Popular posts from this blog

unicode - Are email addresses allowed to contain non-alphanumeric characters? -

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -

c++ - Convert big endian to little endian when reading from a binary file -