Hace poco leía una entrada de Dicas e Templates donde nos mostraba como dividir el widget de categorías en dos columnas.

Profundizando un poco más realmente podemos dividirlo en el número de columnas que queramos, como es mí caso que lo he dividido en tres. Y si queramos podemos dividir cualquier lista.


Para ello debemos implementar el siguiente código CSS

#Label1 ul li{
float: left;
width: 45%;
}


Para entender lo que estamos haciendo debemos primero conocer el HTML de ese widget. Es una lista y cualquier lista en HTML se define de esta forma


<ul>
<li>TEXTO</li>
<li>TEXTO</li>
<li>TEXTO</li>
<li>TEXTO</li>
<li>TEXTO</li>
<li>TEXTO</li>
...
</ul>


Este código nuestro navegador lo interpreta como una lista y nos la representa como tal. Pero si le añadimos el código CSS anteriormente expuesto, ¿que ocurre entonces?



En el código CSS elegimos sobre que queremos actuar, en este caso cada elemento comprendido entre <li> y </li>


Como, normalmente, no le indicamos nada más, el espacio del texto entre <li> y </li> ocupara una línea, pero si ese espacio se lo reducimos indicando un width (width:45%;), dejamos espacio libre detrás


Para forzar que se nos divida en columnas, debemos posicionarlo, para ello indicamos float: left; Con eso conseguimos que cada elemento se posicione a la izquierda y aunque sea un contrasentido, si la izquierda del elemento ya esta ocupada se posicionara inmediatamente detrás y no debajo. Por lo que el widget primero ira rellenando de izquierda a derecha y no de arriba abajo.



Entendiendo este concepto podemos dividir cualquier widget que sea una lista y podemos dividirlo en el numero de columnas que queramos, solo dependerá del ancho del espacio que tenemos para el widget. Se acabaron las listas interminables.
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también

6 comentarios:

  1. Wow! ¡que fácil! Gracias por compartir esta info... que claro lo explicaste, pizcos.

    ¿De casualidad sabes cómo hacer un menu de pestañas múltiples para el "sidebar"? Busqué y lo que encontré es con un efecto añadido que no deseo. (Lo quiero "plain"). Y deseo aplicarlo a las etiquetas y ahí se me complica la cosa aún más. Si sabes de alguna referencia que me ayude a aprender como hacer esto, te lo agradecería.

    Gracias!

    --Jessica (aka @asl2spanishterp)

    ResponderEliminar
  2. Me imagino la respuesta pero...

    Por qué 45 y no 50???

    De todas formas es la forma en la que me gusta que expliquen, mil gracias!!!

    ResponderEliminar
  3. Jessica pestañas o acordeon...tengo alguna entrada sobre como hacerlo...☺☺☺

    ResponderEliminar
  4. Tepi porque ademas en nuestro CSS hay otras propiedades que afectan a los qidget como margin y padding..por eso ese margen ☺☺☺

    ResponderEliminar
  5. Hace tiempo quise hacer eso pero sólo consegui que el gadget quedara más angosto pero del mismo largo, es decir no se creaba una nueva columna. Hay algún motivo por el cual ya no ocurre eso?, o al menos en el ejemplo no pasa..

    ResponderEliminar
  6. Esteban puede que alguna otra propiedad de tu css lo afectara ...

    ResponderEliminar