Auto positioning menu items

the_oliver · 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!

ToonMariner · 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...

dbrimlow · 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

Sign In

Auto positioning menu items

Recommended Posts

the_oliver

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information