Sin embargo, cuando hablamos de CSS lo más habitual es que nos estemos refiriendo a pequeños trucos que resuelven problemas concretos pero comunes a muchos diseños.
Eso es lo que veremos hoy, un sistema sencillo de formatear una lista para que se vea en horizontal y que además sus elementos estén totalmente centrados con respecto a sus márgenes laterales.
Normalmente esto se usa para crear menús y el truquillo nos servirá no sólo para que sus elementos estén centrados, sino para que SIEMPRE estén centrados, independientemente del ancho de la ventana. Es decir, que sean adaptables (RWD, Responsive Web Design).
Lo habitual
Supongamos este HTML para formar una lista:
<ul class="lista">
<li><a href="#">UNO</a></li>
<li><a href="#">DOS</a></li>
<li><a href="#">TRES</a></li>
<li><a href="#">CUATRO</a></li>
</ul>
<li><a href="#">UNO</a></li>
<li><a href="#">DOS</a></li>
<li><a href="#">TRES</a></li>
<li><a href="#">CUATRO</a></li>
</ul>
Si a modo de muestreo, miráis en el código fuente de unos cuantos menús, descubriréis que muchísimos de ellos utilizan float para conseguir acomodar los elementos de la lista uno junto a otro. Este sería un CSS típico y a continuación el resultado:
ul.lista {width:100%; border-top: 1px solid blue;}
ul.lista li {float:left; margin: 0 4px 0 0; list-style:none;}
ul.lista li a {display:block; text-decoration:none; padding: 4px; border-bottom: 4px solid transparent; color: black;}
ul.lista li a:hover {color: blue; border-color: blue;}
ul.lista li {float:left; margin: 0 4px 0 0; list-style:none;}
ul.lista li a {display:block; text-decoration:none; padding: 4px; border-bottom: 4px solid transparent; color: black;}
ul.lista li a:hover {color: blue; border-color: blue;}
El problema de usar float está a la vista y es que todo se nos va a la izquierda de la caja contenedora (en este ejemplo el cuerpo para posts).
Además no nos podemos olvidar de situar un clear tras la lista. Caso contrario lo siguiente que aparezca en la página se acoplará al último elemento descuadrándonos todo.
Pues bien, para centrar eso no queda otra que darle un ancho determinado a la lista (ul) y añadir un margin: 0 auto;, pero la cuestión es que eso sólo se puede hacer cuando cada elemento de lista (li) tiene un ancho conocido y podemos sumarlos para obtener el que debería tener la lista completa.
En el ejemplo anterior podemos calcular el espacio que ocupan los cuatro enlaces por lo que podríamos cambiar esto en el CSS:
ul.lista {width: 230px; margin:0 auto; border-top: 1px solid blue;}
Y ahora sí que tendremos centrada la lista:
Pero ¿qué ocurre si en el futuro incorporamos un nuevo elemento de lista, cambiamos el tamaño de fuente, el relleno o cualquier otra cosa que haga cambiar el tamaño total? Pues eso, que tendremos que calcular y ajustar de nuevo el ancho de la lista.
La sencilla solución
Para solucionar estos problemillas hay una solución y lo mejor de todo es que es muy simple.
Se trata de utilizar para los elementos de lista un display: inline-block (bloques en línea) en lugar de float y añadir a su caja contenedora, que no es otra que la marcada como ul, un text-align:center. Con eso ya se nos centrará todo automáticamente:
ul.lista {width:100%; border-top: 1px solid blue; text-align: center;}
ul.lista li {display: inline-block; margin: 0 4px 0 0; list-style:none;}
ul.lista li a {display:block; text-decoration:none; padding: 4px; border-bottom: 4px solid transparent; color: black;}
ul.lista li a:hover {color: blue; border-color: blue;}
ul.lista li {display: inline-block; margin: 0 4px 0 0; list-style:none;}
ul.lista li a {display:block; text-decoration:none; padding: 4px; border-bottom: 4px solid transparent; color: black;}
ul.lista li a:hover {color: blue; border-color: blue;}
Y da igual qué cantidad de elementos haya o qué espacio ocupa cada uno de ellos. Con este código siempre nos quedará todo centrado y tal y como prometía, con un diseño adaptable.
Sólo tenéis que probar a hacer más pequeña la ventana de vuestro navegador y veréis que los elementos pasan a ocupar más líneas, pero que siguen centrados.
Por si estáis interesados, este sería el código para el anterior menú:
ul.lista {font-family:helvetica,arial,sans-serif;margin:0;padding:0;text-align:center;width:100%;font-size:0;}
ul.lista li {list-style: none;display: inline-block;width: 110px;margin:4px 1px;padding: 0;font-size:14px;}
ul.lista li a {display:block;text-decoration:none;padding:0.5em 0.5em;border-left:10px solid #036;border-right:10px solid #036;color:#fff;background:#036;}
ul.lista li a:hover {border-left:10px solid red;border-right:10px solid #369;color:#fff;background:#369;}
ul.lista li {list-style: none;display: inline-block;width: 110px;margin:4px 1px;padding: 0;font-size:14px;}
ul.lista li a {display:block;text-decoration:none;padding:0.5em 0.5em;border-left:10px solid #036;border-right:10px solid #036;color:#fff;background:#036;}
ul.lista li a:hover {border-left:10px solid red;border-right:10px solid #369;color:#fff;background:#369;}
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
HOLA DISCULPA MI PREGUNTA QUE NO TIENE NADA QUE VER CON ESTA ENTRADA, MI PREGUNTA ES, YO TENGO UN BLOG XXX EN BLOGGER PERO QUIERO PASARLO PARA UN SERVIDOR, Y USARLO CON WORPRES O OTRO SIMILAR, PERO POR EL MOMENTO NO TENGO IDEA COMO HACERLO, DIME QUE COMPRO PRIMERO EL SERVIDOR O COMO LO HAGO SERA QUE ME DICES COMO HACERLO POR FABOR, Y GRACIAS DE ANTE MANO
ResponderEliminarYo tampoco tengo ni idea. (Casi) Nunca he salido de Blogger.
EliminarQue potito :')
ResponderEliminarTomaré prestado el código para determinado momento :D
Gracias.
Me gustó esto mucho le voy sacar partido cuado tenga tiempo
ResponderEliminarHola Oloman, cuál sería el código final apara ver los efectos, porque me muestra literalmente el código, más no lo que se supone debe hacer.
ResponderEliminarHernán, el último trozo de código es el que has de insertar en tu hoja de estilo o CSS. En Blogger eso puede ir en la plantilla, entre las etiquetas SKIN o añadiéndolo desde el Diseñador de Plantillas.
EliminarLuego, dónde quieras que aparezca ese menú tienes que usar un trozo como el primero que se muestra.
Hay posibilidad de insertar submenus? puedes poner un ejemplo con codigo?
ResponderEliminarsaludos
Siempre se pueden añadir submenús, pero es largo de explicar un caso general. Mejor usa esto y luego ya adaptas el estilo: http://www.oloblogger.com/2008/05/mens-crea-tu-propio-estilo.html
EliminarSaludos Oloman, tengo una duda, me pasa esto, cuando aplico a las listas de un menu la instrucion FLOAT obvio todo se va a la izquierda y no queda espacio entre las lista (li), osea se podria decir no hay un margin a los costados entre las listas, pero cuando se aplica un display:inline-block; si que queda un espacio entre las listas, como en el ejemplo de este post, ¿Como puedo eliminar ese espacio si uso inline-block? de tal manera que no exista margin a los costados de las listas??..
ResponderEliminarHola J.Marcelo. Hay un truco sencillo para eliminar esos pequeños márgenes que deja inline-block. Consiste en poner en el selector de la caja contenedora una alto de línea y un tamaño de fuente 0, pues el valor por defecto de los navegadores no es nulo.
EliminarEn el ejemplo del post, como el inline-block lo llevan los elementos de lista (li), su contenedor es la lista (ul), así que sería de esta manera:
ul.lista {
font-size: 0;
line-height: 0;
}
Eso obliga a declarar algún font-size y line-height al elemento de lista (li) para que se vea, pues por herencia pasará a tener un tamaño también cero:
ul.lista li {
font-size: 14px;
line-height: 18px;
}