Menú horizontal al 100% de ancho
Miércoles, Abril 26th, 2006El 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. Se puede ver en este ejemplo a lo que me refiero. É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.
Siempre es bueno recibir algún tipo de reconocimiento por lo que uno hace con esfuerzo y pasión. Por eso cuando recibí el email de 
A un año de su papado, en 
Estamos ultimando detalles con 
