Hi,
I'm designing a site here (<!-- m --><a class="postlink" href="http://www.tights4flights.com/3rd/index.htm">http://www.tights4flights.com/3rd/index.htm</a><!-- m -->) 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 helpI'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=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">About</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"order.htm">Order</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"sizes.htm">Sizes</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"colours.htm">Colours</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.htm">Contact</a></li>
</ul>
I hope this helps
I'm designing a site here (<!-- m --><a class="postlink" href="http://www.tights4flights.com/3rd/index.htm">http://www.tights4flights.com/3rd/index.htm</a><!-- m -->) 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 helpI'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=http://www.webdeveloper.com/forum/archive/index.php/"index.htm">About</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"order.htm">Order</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"sizes.htm">Sizes</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"colours.htm">Colours</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.htm">Contact</a></li>
</ul>
I hope this helps