English Português

La creación de columnas sin tablas es uno de los primeros problemas con los que nos topamos al tratar de estructurar nuestro sitio con hojas de estilo CSS. Bien, pues aca te diremos como solucionarlo a definiendo propiedades a las listas.

Vamos a crear una lista que se acomode en cuautro columnas, para esto definimos las etiquetas <ul> y <li> de la siguiente forma:

<style type="text/css">

/*Definimos una clase para <ul> */

  ul.columnas {
  Float: left;
  width: 100%; /*Este ancho será el total que ocupen muestras columnas */
  List-style-type: none; /*Eliminamos las viñetas */
  }
  
/*Definimos las propiedades para <li> a partir de las otorgadas a <ul>*/

  ul.columnas li{
  Display:inline; /*Se declara que las propiedades serán otorgadas a cada linea*/
  Float: left;
  Width:25%;} /*Al definir el ancho definimos también el número de columnas, siendo 25% para 4 columnas, 33% para 3, 50% para 2 y asi para la cantidad de columnas que deseemos */

</style>

Definidas de esta forma, determinamos el ancho total de todas las columnas y la cantidad de ellas distribuidas en ese espacio. Para aplicar estas propiedades, basta aplicar estas propiedades a una lista como se muestra a continuación:


<ul class="columnas">
<li>CSS</li>
<li>HTML</li>
<li>PHP</li>
<li>JAVASCRIPT</li>
<li>ASP</li>
<li>XHTML</li>
<li>ACTIONSCRIPT</li>
</ul>

Descargar el ejemplo

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

Comentarios

  1. halı yıkama / Hace 6 años /

    thanks

    Responder a halı yıkama →
  2. Nestor / Hace 5 años /

    gracias por el ejemplo, lo probare en mi web

    Responder a Nestor →
  3. Striker new / Hace 5 años /

    Tratare de cambiar de tablas a los estilos css y estos son mas amigables a los buscadores.

    Responder a Striker new →
  4. weycl / Hace 5 años /

    Utilizare estos ejemplos para mi web weycl.com

    Responder a weycl →
  5. nomodificar / Hace 4 años /

    Buenisimo! yo lo hago asi tambien pero pense que era una idea original!

    Responder a nomodificar →
  6. nhralo / Hace 3 años /

    Gracias, esto es justo lo que buscaba. Pronto estará en mi sitio web (se encuentra en fase alfa).

    Responder a nhralo →
  7. Nario / Hace 1 año /

    gracias por el aporte, me ayudo muchisimo

    Responder a Nario →
  8. Julio / Hace 6 meses /

    Bueno, lo puse en la hoja css enlazada a la página, para lo cual le saqué los encabezados style y me funcionó sin problema. gracias

    Responder a Julio →

Responder

¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

Términos de uso - Política de privacidad