Help with CSS menu

[forumnz]

I have a menu bar that is really cool, but I can't figure out how to center all the buttons?

Below is the CSS and the HTML snippet.

It has some buttons and a bar that runs 100% width.

 

Please assist.

Sam.

 

#modernbricksmenu{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

#modernbricksmenu ul{
font: bold 11px Arial;
margin:auto;
padding: 0;
list-style: none;
}

#modernbricksmenu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#modernbricksmenu a{
float: left;
display: block;
color: white;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-image:url(../images/unsel_but.jpg);
background-repeat:repeat-x; /*Default menu color*/
border-bottom: 1px solid white;
}

#modernbricksmenu a:hover{
background-color: gray; /*Menu hover bgcolor*/
}

#modernbricksmenu #current a{ /*currently selected tab*/
background-image:url(../images/sel_but.jpg); /*Brown color theme*/ 
border-color: #00CC00; /*Brown color theme*/ 
}

#modernbricksmenuline{
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background-color:#00CC00; /*Brown color theme*/ 
}

 

<div id="modernbricksmenu">
<ul>
<li id="current" style="margin-left: 1px"><a href="#">Buy</a></li>
<li><a href="#" title="New">Sell</a></li>
<li><a href="#" title="New">Wanted</a></li>
<li><a href="#">My BidBuddy</a></li>
<li><a href="#">Community</a></li>	
</ul>

</div>

<div id="modernbricksmenuline"> </div>

[penguinluvinman]

Did you try simply

 

#modernbricksmenu ul{

font: bold 11px Arial;

margin:auto;

padding: 0;

list-style: none;

align: center;

}

 

Or if you wanted to go really complicated then you could give each item on the list and id and add in the css and give it an absolute position.  I personally hate doing this because it sometimes screws up when a user resizes the window.

Something like

 

#numberone {position: absolute; left: 100px; top: 30px;}

for wherever it needs to go.  It'l take some trial and error.

 

I've never done anything exactly like that, so I don't know how well these suggestions will work if at all, but it's the best I could think of.

[forumnz]

Hey thanks. that didnt work but here is the URL

 

http://bidbuddy.co.nz/test.html

 

Hope you can help and see what I mean.

Sam.

[penguinluvinman]

Instead of doing it with CSS, did you try

<center>

<div id="modernbricksmenu">

<ul>

<li id="current" style="margin-left: 1px"><a href="#">Buy</a></li>

<li><a href="#" title="New">Sell</a></li>

<li><a href="#" title="New">Wanted</a></li>

<li><a href="#">My BidBuddy</a></li>

<li><a href="#">Community</a></li>

</ul>

</div>

</center>

 

in the index.html file?  That would be the simplest thing if it works. 

Another thing you could try is adding

 

or a

&#160;

between each item on the menu.