Hi

 

I have five nav rounded buttons that I cant get to centre on the site. . .Can anyone help?

 

Thanks

 

Kate

 

 

html is:

 

<div id="navigation">
<ul>
<li><a href="index.html" title="Structural steel for builders">Home</a></li>
<li><a href="products.html" title="A comprehensive service for steel">Products></a></li>
<li><a href="delivery.html" title="A map of where we deliver to roughly">Delivery Area</a></li>
<li><a href="location.html" title="How to find us">Our Location</a></li>
<li><a href="contact.html" title="How to get in contact with us">Contact</a></li>
</ul>
</div>

css is:

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


#navigation li{
background: url(images/buttons.jpg) left no-repeat;
		overflow: hidden;
		height: 22px;
		width: 178px;
		padding-left: 10px;
		margin-right: 5px;
		float: left;
		text-align: center;
}

#navigation li a{
background: url(images/buttons.jpg) right no-repeat;
		display: block;
		padding: 2px 10px 1px 0px;
		height: 19px;
		color: #fff;
		text-decoration: none;	
}

#navigation a:link {
color:	#fff;
text-decoration:	none;
}

#navigation a:visited {
color:	#cc3333;
text-decoration:	none;
}

#navigation a:hover {
color:	#FFCC33;
text-decoration:	none;
}

Edited January 26, 201016 yr by Sam G
added [code] tags

You have five buttons each 178px + 10 + 5 = 193px x 5 = total 965px.

 

Edit the ul style:-

#navigation ul{ width: 965px; 
list-style: none;
margin: 0 auto; /*was 0px;*/
padding: 0px;
text-align: center;
}

You have five buttons each 178px + 10 + 5 = 193px x 5 = total 965px.

 

Edit the ul style:-

#navigation ul{ width: 965px; 
list-style: none;
margin: 0 auto; /*was 0px;*/
padding: 0px;
text-align: center;
}

 

Thank you so much - works perfectly!!

 

Not Grumpykate now!!