Click to See Complete Forum and Search --> : Centering a floated menu


Alexpte
07-18-2005, 11:35 AM
Hi,

I'm designing a site here (http://www.tights4flights.com/3rd/index.htm) and I have the menu bar buttons floated to the left so it is a horizontal menu, and left padding on each button to space them out.

What I really want is to have the buttons horizontal with equal spacing but centered. If I change to float:center the buttons just line up vertically.

Is it possible to do this?

Thanks for any help

scojo1
07-18-2005, 11:57 AM
I'm at work, so I can't play with code too much, but this should get you started.

you should be able to do this with and unordered list menu (there are probably other ways, but I don't like messing with floats very much).

For example:

CSS
#menu {
text-align: center;
padding: 0px;
padding-left: 10px }

#menu li {
display: inline;
}


HTML
<ul class="menu">
<li><a href="index.htm">About</a></li>
<li><a href="order.htm">Order</a></li>
<li><a href="sizes.htm">Sizes</a></li>

<li><a href="colours.htm">Colours</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul>

I hope this helps