Jump to content

centred horizontal menu


gawain
 Share

Recommended Posts

Here is a not centered one but one I got very close using position relative.I also changed the links so the text is centered in them now. I'm glad you did search the tutorials first not maney people do

<html><head><style type="text/css">.someclass{position:relative;left:45%}ul{text-align:center;float:left;width:100%;padding:0;margin:0;list-style-type:none;}a{text-align:center;float:left;width:6em;text-decoration:none;color:white;background-color:purple;padding:0.2em 0.6em;border-right:1px solid white;}a:hover {background-color:#ff3300}li {display:inline}</style></head><body><div class="someclass"><ul><li><a href="#">Link one</a></li><li><a href="#">Link two</a></li><li><a href="#">Link three</a></li><li><a href="#">Link four</a></li></ul></div><p>In the example above, we let the ul element and the a element float to the left.The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).We add some colors and borders to make it more fancy.</p></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...