Hola!
Tengo el siguiente codigo:
Código:
<div id="navegacion">
<ul>
<li class="boton1"><a href="#">Inicio</a></li>
<li class="boton2"><a href="#">Administrativa</a></li>
<li class="boton3"><a href="#">Tecnica</a></li>
<li class="boton1"><a href="#">Mercadeo</a></li>
<li class="boton2"><a href="#">Convenio</a></li>
<li class="boton3"><a href="#">Recetas</a></li>
<li class="boton1"><a href="#">Fertilizacion</a></li>
<li class="boton2"><a href="#">Variedades</a></li>
</ul>
</div>
Mi CSS:
Código:
#navegacion {width:80%; margin:auto; background-color:#390;}
#navegacion ul {
padding: .2em 0;
margin: 0;
list-style-type: none;
color: black;
width: 100%;
font-family:arial, helvetica, sans-serif;
font-size:0.8em;
text-align: center;
}
#navegacion li {display: inline;}
#navegacion li a {
text-decoration: none;
color: #FFF;
border-right: 1px solid #fff;
}
.activo {}
.boton2 {background-color:#cc6;}
.boton3 {background-color:#996;}
Estoy tratando de lograr que cada boton, tenga un ancho fijo, que el menu quede centrado en la página y si se pudiera que se estire a contener toda el area donde estara.
Mi problema es que me aparece un espacio entre cada li de unos 3 o 4 pixeles, que hace que el background color que aplico a cada li se mire incompleto, no me da una apariencia de boton, si alguien me puede ayudar lo agradezco, saludos,
!!
Como se mira o como quisiera que se llegara a ver:
http://img114.imageshack.us/my.php?image=arrozuo7.jpg
Como se mira actualmente con mi CSS:
http://img337.imageshack.us/my.php?image=arroz2pm2.jpg