the_oliver Posted November 24, 2007 Share Posted November 24, 2007 Hello, Im trying to build a menu using css. I would like to be able to do this by placing each menu item into a <div> tag. Eg: <div class="topMenuItem"> Hope </div> <div class="topMenuItem"> Groups </div> And the css im using for that at the moment is: div.topMenuItem{ width: auto; height: 22px; background-color: #1A5184; border-left-color: #002E64; border-left-width: medium; border-right-color: #002E64; border-right-width: medium; position: absolute; top: 51px; font-size: 13px; color: #FFFFFF; font-weight: 500; font-family: Arial; text-align: center; } This sort of works, but all of the buttons pile up on top of each other. How can i get round this? (i dont want the have to specify a left: value for each button as the number of buttons can change!) Any advice to offer? Im also wondering how i can get the text to appear in the middle (vertically) of the 22px box? Thanks! Quote Link to comment https://forums.phpfreaks.com/topic/78682-auto-positioning-menu-items/ Share on other sites More sharing options...
ToonMariner Posted November 25, 2007 Share Posted November 25, 2007 a list is better markup for menus (or even definition lists if applicable). not sure what you are trying to achieve so perhaps an example would help... Quote Link to comment https://forums.phpfreaks.com/topic/78682-auto-positioning-menu-items/#findComment-398497 Share on other sites More sharing options...
dbrimlow Posted November 25, 2007 Share Posted November 25, 2007 TM is right, lists are the best way to make any menu (vertical or horizontal). In the css, designate an ID (not a class) for the site's main navigation menu. IDs are used once per page (you can do classes later for other menus or navigation that you want to repeat on a page). You want a container, then the menu. So, for a "centered" horizontal nav bar, you could do it like this: <div id="navcontainer"> <ul id="navlist"> <li><a href="#">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> the CSS is: #navcontainer ul { padding: .2em 0; margin: 0; list-style-type: none; background-color: #1A5184; color: #FFF; width: 100%; font: normal 90% arial, helvetica, sans-serif; text-align: center; } #navlist li { display: inline; }<!--this is what makes it horizontal, without it the list displays vertical--> <!-- it is good practice for beginners to use the four link elements in proper order - link, visited, hover, active--> #navlist li a:link, #navlist li a:visited { text-decoration: none; background-color: #1A5184; color: #FFF; padding: .2em 1em; border-right: 1px solid #002E64; } #navlist li a:hover, #navlist li a:active { background-color: #002E64; border-right: 1px solid #1A5184; color: #fff; } And here it is complete - copy and paste this into notpad and save as menutest.html then open it in a browser: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Title</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> #navcontainer ul { padding: .2em 0; margin: 0; list-style-type: none; background-color:#1A5184; color: #FFF; width: 100%; font: normal 90% arial, helvetica, sans-serif; text-align: center; } #navlist li { display: inline; } #navlist li a:link, #navlist li a:visited { text-decoration: none; background-color: #1A5184; color: #FFF; padding: .2em 1em; border-right: 1px solid #002E64; } #navlist li a:hover, #navlist li a:active { background-color: #002E64; border-right: 1px solid #1A5184; color: #fff; } </style> </head> <body> <div id="navcontainer"> <ul id="navlist"> <li><a href="#">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> </body> </html> Lists are VERY powerful using css. Here is the best tutorial online for all kinds of list making for beginners. listomatic The menu above was based on this tutorial specifically: centered horizontal menu Bookmark max design. You will eventually want to learn about floats and the most important aspect of css and the rules, Selectutorial. Good luck, Dave Quote Link to comment https://forums.phpfreaks.com/topic/78682-auto-positioning-menu-items/#findComment-398720 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.