Hola!
Tengo una página en la que el menú de navegación es así:
Código:
<div id="header">
<div id="navigation">
<ul>
<li><a href="?r=site/index" id="blanco"><img id="logo" src="images\Logos\Logo.png"/></a></li>
<li><a href="?r=site/internacional&start=0&t=1&a=1">Internacional</a></li>
<li><a href="?r=site/nacional&start=0&t=1&a=1">Nacional</a></li>
<li><a href="?r=site/autonomico&start=0&t=1&a=1">Autonómico</a></li>
<li><a href="?r=site/calendarios&month=a">Calendarios</a></li>
<li><a href="?r=site/clasificaciones">Clasificaciones</a></li>
<li><a href="?r=site/videos&start=0&t=1&a=1">Videos</a></li>
</ul>
</div>
Y el css es:
Código:
#header
{
margin: 0;
padding: 0;
border-top: 3px solid #C9E0ED;
}
#navigation {
margin-top:-3px;
float: left;
width: 100%;
background: #333;
}
#navigation ul {
margin: 0;
padding: 0;
}
#navigation ul li {
list-style-type: none;
display: inline;
}
#navigation li a {
min-width:12.729%;
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
text-align:center;
}
#navigation li a:hover { background: #383; }
Como puedo conseguir que independientemente del numero de elementos en ese menú siempre ocupen el 100% de la pantalla entre todos? Actualmente lo hago con el css de #navigation li a, pero no es automático para todas las pantallas porque el min-width lo pongo yo...
Alguna sugerencia?
Gracias!