CSS Menu, Horizontal with fixed width items

HTML & CSS
1

I am having a terrible time creating a CSS horizontal menu where the items are fixed width yet the entire menu can center. Can any one help?

Here is an example http://www.highfivefriday.com/test.html

Here is the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link type="text/css" href="test.css" rel="stylesheet">
<title>Please Help :)</title>
<style type="text/css">
<!--
/**********************/
/* Menu Layout        */
/**********************/
#container{
	width:800px;
	background-color:#e0e0e0;
}
#inner_menu{
	margin: 10px auto;
	padding:0;
	list-style:none;
}
#inner_menu li{
	margin:0;
	padding:0;
	display:inline;
}
#inner_menu li a, #inner_menu li a:visited{
	padding:5px;
	background-color:#23185d;
	border-color:#000000;
	border-width:1px;
	border-style:solid;
	color:#FFFFFF;
	text-decoration:none;
}
#inner_menu li a:hover{
	background-color:#2070bd;
}

/**************************************/
/* Menu Layout   TRYING TO CENTER     */
/**************************************/

#inner_menu2 li a:hover{
	background-color:#2070bd;
}

#inner_menu2{
	margin: 10px auto;
	padding:0;
	list-style:none;
}
#inner_menu2 li{
	margin:0;
	padding:0;
	display:inline;
}
#inner_menu2 li a, #inner_menu2 li a:visited{
	display:block;
	width:150px;
	float:left;
	padding:5px;
	background-color:#23185d;
	border-color:#000000;
	border-width:1px;
	border-style:solid;
	color:#FFFFFF;
	text-decoration:none;
}
#inner_menu2 li a:hover{
	background-color:#2070bd;
}

-->
</style>
</head>
<body>

<div id="container">

	<P>The menu below should appear centered, but I need the items to be a fixed width (150px) because I want to use a background image.  </p>
	<div align="center">
		<div id="inner_menu">
		<ul>
			<li><a href="#">Button 1</a></li>
			<li><a href="#">Button 2</a></li>
			<li><a href="#">Button 3</a></li>
		</ul>
		</div>
	</div>
	
	<P>When I set either the <li> or <a> tags to a fixed width they no longer are side by side. So I do a float:left; and they go side by side but the menu will not center. As you can see below.</p>
	<div align="center">
		<div id="inner_menu2">
		<ul>
			<li><a href="#">Button 1</a></li>
			<li><a href="#">Button 2</a></li>
			<li><a href="#">Button 3</a></li>
		</ul>
		</div>
	</div>
	
	<div style="clear:both;"></div>
	<p>Any suggestions?</p>

<div>

</body>
</html>

I have attached this file in case anyone feels so motivated to play.

Any suggestions are appreciated!

2

To center a block level element, you need to set a width. As the total width of the list elements is known, a total can be calculated (486px) and set. It should also be remembered that <ul>s and <ol>s have a list indent, applied via left margin on IE and left padding on FF, therefore both these should be controlled. In your example, there is no need for those two surrounding divs - the width and auto side margins can be applied directly to the <ul> (via the id), and the text centering done using text align on the <a>s. When floating list elements, it is wise to float both the <a>s and <li>s to avoid IE problems.

	<p>When I set either the <li> or <a> tags to a fixed width they no longer are side by side. So I do a float:left; and they go side by side but the menu will not center. As you can see below.</p>
	<ul id="inner_menu2">
		<li><a href="#">Button 1</a></li>
		<li><a href="#">Button 2</a></li>
		<li><a href="#">Button 3</a></li>
	</ul>

#inner_menu2{
	margin: 10px auto;
	width: 486px;
	padding:0;
}
#inner_menu2 li{
	margin:0;
	padding:0;
	list-style:none;
	float: left;
}
#inner_menu2 li a, #inner_menu2 li a:visited{
	text-align: center;
	width:150px;
	float:left;
	padding:5px;
	background-color:#23185d;
	border-color:#000000;
	border-width:1px;
	border-style:solid;
	color:#FFFFFF;
	text-decoration:none;
}
#inner_menu2 li a:hover{
	background-color:#2070bd;
}
3

.

Try this:
http://johns-jokes.com/downloads/sp/centered_links/

.

4

The buttons are not a fixed width in that example (try different text in them - the width varies with text) - you cannot assign a width to an inline element.

5

Try: version:002

http://johns-jokes.com/downloads/sp/centered_links/

.

6

…which you achieved by setting a width to the container, as I did above. Semantically, a menu is a list of links rather than links in a paragraph anyway.

7

Thanks guys. My hope was to not have to set the width of the entire menu equal to the sum widths of the line items because the number of line items will vary from time to time. Sometimes there will be 3 (as in this example), other times 4. I guess I can have two sets of css ids and class for each. However that means if you want to add a button you can’t just add a line item. You have to also change the id and class. I was trying to build it so that a none web dev person could easily add and subtract from the menu. But this has taught me a lot.

Thank you all of you your help.

Jed

8

There is this method on Paul’s site, but it is more complex.