html
Code:
<ul class="solidblockmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" class="current">CSS Examples</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
css
Code:
.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(media/blockdefault.gif) center center repeat-x;
}
.solidblockmenu li{
display: inline;
}
.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
To center the whole menu you first need to remove the reference to float: left from the first element, then you need to do some margin / alignment work
Code:
ul.solidblockmenu{
margin: 0 auto;
text-align: center;
width: 100%;
}
you then need to make sure that the bullets are not on the left side of the elements and you want to keep the code already being used in as the list item to display the menu horizontally.
Code:
ul.solidblockmenu li {
display: inline;
list-style-type: none;
text-align: left;
}
if that is not what you were looking for please explain more in-depth what you are attempting to accomplish
Bookmarks