Post publicado en el 2006
El problema:
El cliente querÃÂa que el menú de su sitio web (por cierto un diseño minimalista bastante bueno, hecho por Gabriel) ocupe la totalidad del ancho de la página. Esto implicaba que debia ajustarse a todas las resoluciones. Y por supuesto, debÃÂa funcionar bien en todos los browsers. Entonces lo primero que se nos ocurre probar con las listas, el clásico ul. No funcionó. Estuvimos buscando en bocha de lugares, pero no hubo caso. Sólo encontramos soluciones parciales al problema. Cuando lográbamos hacerlo andar en firefox, no andaba en IE y viceversa. Asi que, bueno… tuvimos que pensar en otra solución…
La solución
Es realmente simple: primero hacer un div que englobe los elementos. Cada Ãtem que lleva el menú no lo haremos usando el tag ul, sino que deberán ser puestos en un div por cada uno. Asà deberÃa quedar el HTML:
<div id="nav">
<div><a href="#">item1</a></div>
<div><a href="#">item2</a></div>
<div><a href="#">item3</a></div>
<div><a href="#">item4</a></div>
<div><a href="#">item5</a></div>
</div>Se ve fácil, no? Muajajajaja… no, en serio, la parte del CSS es también muy simple: al div que contiene los Ãtems, al que nosotros llamamos nav, debemos especificarle mediante la propiedad width que ocupe el 100%. Luego debemos definir los divs que están dentro del div nav: debemos aplicar el float:left para que los elementos se alinéen a la izquierda uno al lado del otro y acá viene lo más importante y a la vez la gran falencia de este método: a la propiedad width debemos ponerla en el porcentaje relativo a la cantidad de Ãtems de la lista, esto hace por ejemplo, que no se pueda usar para generar Ãtems dinámicamente. Para que se entienda mejor: si tenemos 5 Ãtems en la lista, entonces el width para cada uno será de 20%. Otra falla que tiene es que si a ese Ãtem le queremos añadir margin, padding o border, debemos también ajustar el width para que no se nos desacomode.
Énigüei, es algo simple y sirve si ya está definida la cantidad de Ãtems y sea un sitio estático. Aunque ahora que me pongo a pensar sà se puede hacerlo de manera dinámica! Y ahi una cosita más: como siempre el fáquin IE necesita un poquito de hacks!!! Acá va el código CSS:
#nav {
width:auto;
}
#nav div {
float:left;
text-align:center;
width:19%;
background:#f1f1f1;
margin-right:1%;!important
}
#nav div { /*para IE */
float:left;
text-align:center;
width:19%;
background:#f1f1f1;
margin-right:0.9%;
}
Bueno, espero que sirva, si alguien conoce una solución mejor, por favor que me la haga saber.
con javascript se puede calcular el porcentaje de ancho y asignarlo, pero seria lindo una solucion solo CSS no?