Horizontal Lists For Navigation

[ShoeLace1291]

I'm trying to get a horizontal list for a navigation bar, but I can't achieve this without adding float: left; to my li class.  The problem is that it automatically aligns the actual list to the left side of the page but I want it to be centered.  Any way to fix this problem?

 

.toplinks { background: url(imgs/topmenu_bg.png);
	  	height: 30px;
            text-align: center;

}

.toplinks ul { list-style: none;
	  	   display: inline;
               align: center;

}

.toplinks li { float: left;
               height: 30px;
               width: 100px;

}

.toplinks ul li a { background: url(imgs/button_bg.png);
                    display: block;
	  	 	  	height: 30px;
			  	width: 100px;
			  	text-align: center;
			  	color: #FFFFFF;
				text-decoration: none;
			  
}

[dbrimlow]

"align: center;" is not a proper css command.

Try "text-align: center;" in the .toplinks li  and lose the float:left.

Also, since this is a horizontal navbar and only used once per page, change toplinks from a class to an ID (don't forget to change the html from "div class=" to "div id="). 

You also should set the initial margin and paddings to 0 - and add padding to the li a (play @ with the sizes to suit).

Whenever you float:left you will not be able to "center" items floated ... because ... well, they FLOAT:LEFT.

So lose display:block to retain the display:inline.

Do you want the background image to repeat? Also, always designate a color along with a background. Search engines do not like seeing no color designation AND white text "color:#000000"!

Here is a sample of the whole thing. You will need to play with and adjust the paddings and heights to work with your images if they are fixed width/height and not just repeated small images:

#toplinks {
height:30px;
margin: 0;
padding: 10px;
background:#000000 url(imgs/topmenu_bg.png) top repeat-y;
}

#toplinks ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}

#toplinks ul li { display: inline; }

#toplinks ul li a:link, #toplinks ul li a:visited   { 
background: #555555 url(imgs/button_bg.png) center no-repeat;
height:30px;
width: 100px;
padding: .3em;
text-decoration: none;
color: #FFFFFF;
}
#toplinks ul li a:hover, #toplinks ul li a:active {
color: #FFFFCC;
}

HTML CODE:

div id="toplinks">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">product</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">site map</a></li>
</ul>
</div>