gawain Posted May 28, 2006 Share Posted May 28, 2006 Hi all, This is my first post after I studied html and CSS with the tutorial of the siteI'm trying to use the horizontal menu as I can see in here http://www.w3schools.com/css/tryit.asp?fil...e=trycss_float5but with a slight change: I'd like to center the menu on the page but every effort I made was pointless Thanks to anybody who can help me. Link to comment Share on other sites More sharing options...
snowboard01 Posted May 28, 2006 Share Posted May 28, 2006 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 More sharing options...
gawain Posted May 28, 2006 Author Share Posted May 28, 2006 Here is a not centered one but one I got very close using position relative.... Thanks a lot! It was so ...easy. I tried and it works Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now