Ajustar ancho del menú

[fdez87]

Buenas!
Estoy liado con el menu de la siguiente pagina:
http://dspaccio.com/rafael/index.php

La cuestión es, tengo el wrapper que engloba todo con width 930px
Dentro el header, con width 100% y el logo centrado, hasta ahi bien.

Ahora el problema, me he copiado un estilo de menu css que he buscado por google, y tras toquetearlo lo he ajustado a algo similar a lo que quiero, pero no consigo que ocupe los 930 que quiero, alguna manera?

Os pongo el codigo del css:

Código:

#header{
	text-align: center;
	border-top: 16px solid #e6e6e6;
	width: 100%;
	padding: 20px;


}

#button {  
	padding: 0;
	text-align: center;

}  

#button li {  
	display: inline;
	text-align: center;
	border: 2px solid #000;

}  

#button li a {  
	font-family: Helvetica;  
	font-size:12px;  
	text-decoration: none;  
	float:left;  
	padding: 5px;  
	background-color: #e6e6e6;  
	color: #FFF;  
	text-transform: uppercase;
	width: 134px;
}  

#button li a:hover {  
	background-color: #f96b00;  
	margin-top:0px;  
	padding-top:5px;  
}

[joseoliveras]

quieres que quede centrado o que los botones se repartan en todo el ancho?

Esto último es peliagudo, sobretodo con navegadores antiguos.

Saludos

[fdez87]

Me gustaria que se ajustara justo al mismo ancho que tiene la barra superior, es decir 930px, y que cada boton tuviese el mismo ancho, no se si pido algun imposible

[kseso?]

En este caso me resulta más fácil modificar con firebug y copiar y pegar que explicar los cambios.
Sólo es cuestión de que compare:

Código CSS:

* {
margin:0;
padding:0;
}
body {
 
}
#wrapper {
    border: 0 solid #000000;
    height: auto;
    margin: 0 auto;
    padding: 0;
    width: 932px;
overflow: hidden;
}
#header {
    border-top: 16px solid #E6E6E6;
    text-align: center;
    width: 100%;
}
#button {
    border: 1px solid #000000;
    overflow: hidden;
    padding: 0;
    width: 930px;
}
#button li {
    display: inline;
    float: left;
    text-align: center;
}
#button li a {
    background-color: #E6E6E6;
    color: #FFFFFF;
    display: block;
    padding: 3px 0;
    text-decoration: none;
    text-transform: uppercase;
    width: 155px;
}
#button li a:hover {
    background-color: #F96B00;
    margin-top: 0;
}
 

Por cierto, aumenté su #wraper en 2px ¿adivina el porqué?