Columnas y listas

Tantas veces me lo preguntan y tantas veces respondo lo mismo que voy a ver si puedo explicar como están hechos los índices de este blog.

Primero las decepciones:
no, no son páginas estáticas, son entradas comunes y corrientes
no, no se utilizan scripts, todo está hecho a mano

Probablemente, ambas cosas hacen que algunos abandonen antes de empezar pero, igual continúo.

Cada entrada tiene agregado el CSS que es igual en todos ellos y bien podría estar en el head de la página. En esas definiciones de estilo se cambian las características generales del blog, ocultando ciertos DIVs como la sidebar, la fecha, el footer de las entradas y los comentarios que además, no se permiten; para esto último, basta desplegar las opciones y marcar No permitir, ocultar existentes. Por último, la fecha que les he colocado es muy antigua (año 2006) y de esa manera no se muestran normalmente ni se actualiza el feed cuando se modifican.

Como se oculta la sidebar, el blog queda más ancho así que para compensar esto, también se amplia el ancho de las entradas; algo así:

#main-wrapper {width:VALORpx;}
#sidebar-wrapper, .post-footer, #blog-pager, #comments {display:none;}

Luego se agregan las definiciones de este tipo de entrada que son personales; puede ponerse lo que uno quiera, dependerá del diseño deseado.

Lo que sigue es crear una lista que repito, agrego de manera manual, ordenándola como crea conveniente y la pregunta repetida es ¿cómo generar columnas?

Podrían usarse tablas pero, en este caso, como sólo se trata de enlaces, es mucho más simple utilizar una o varias listas UL a las que les pondremos una clase CSS para controlarlas:

<ul class="milista">
  <li><a href="URL_pagina1">enlace 1</a></li>
  <li><a href="URL_pagina2">enlace 2</a></li>
  <li><a href="URL_pagina3">enlace 3</a></li>
  .......
  <li><a href="URL_paginaN">enlace N</a></li>
</ul>

Hay muchas formas de simular esas columnas, la base de todas esas formas es utilizar la propiedad float y dimensionar alguna de las etiquetas, ya sea la etiqueta LI o la etiqueta A del enlace; por ejemplo:

/* el rectángulo con la lista en si misma */
ul.milista {
  clear: both;
  float: left;
  list-style-type: none;
  margin: 20px 0;
  padding: 0;
}
/* los items de esa lista */
ul.milista li {
  display: inline;
}
/* transformamos los enlaces en bloques de cierto ancho y cierto alto */
ul.milista li a {
  float: left; /* flotan */
  line-height: 2em; /* el alto */
  padding: 0 5px; /* la separación entre ellos */
  width:150px; /* el ancho */
}
ul.milista li a:hover { /* ... cualquier efecto ... */ }

Cuando algo flota, se acomoda dentro de su contenedor así que acá, como todos tienen el mismo ancho y la misma separación (width y padding) lo que veremos es una serie de enlaces encolumnados:

• in aliquet rhoncus
• proin id dolor
• nulla facilisis eget
• nam ultrices
• tempus est magna
• hendrerit pharetra
• ut fringilla quam
• aenean nisi
• malesuada neque
• ipsum dolor amet
• pellentesque ultrices

Con line-height controlamos la "altura" de cada enlace y con width su ancho. Si aumentamos el primer valor y ponemos line-height: 3em cada enlace sera más alto y por lo tanto, las filas se separarán más verticalmente; si disminuimos el ancho con width:135px habrá más lugar disponible así que en lugar de tres columnas tendremos cuatro:

• in aliquet rhoncus
• proin id dolor
• nulla facilisis eget
• nam ultrices
• tempus est magna
• hendrerit pharetra
• ut fringilla quam
• aenean nisi
• malesuada neque
• ipsum dolor amet
• pellentesque ultrices

Si seguimos disminuyendo el ancho y este ya no es suficiente para contener el texto, cada línea bajará para hacerle lugar pero las columnas se mantendrán:

• in aliquet rhoncus
• proin id dolor
• nulla facilisis eget
• nam ultrices
• tempus est magna
• hendrerit pharetra
• ut fringilla quam
• aenean nisi
• malesuada neque
• ipsum dolor amet
• pellentesque ultrices