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
Post a Comment