Listas en columnas

El título de esta artículo de alist apart es intraducible, nos quedaría algo así como Toffee multicapas. Viene a resolver un problema con el que nos hemos encontrado más de una vez al intentar hacer un listado largo de items cortos. Nos enseña cómo hacer listas a dos columnas. Cómo necesito aprender a hacerlo ¿qué mejor manera que traducir el artículo? – mas –

==================

Bulleted Lists: Multi-Layered Fudge

por Nandini Doreswamy

Al diseñar la página de nuestra compañía con CSS todo estaba saliendo bien, hasta que me encontré con una barrera. El reto consistía en crear dos clumnas con listas dentro del del texto. La disposición que tenía en mente era más o menos algo así:

Quote Párrafo 1
Lista | Lista
Párrafo 2
Lista | Lista
Párrafo 3
Lista | Lista

Estuve jugando con algunas listas, que funcionaban bien con IE 6, pero que me provocaban un tremendo dolor de cabeza casi con cualquier otro navegador. Quizá podría haberme saltado la barrera utilizando listas horizontales, pero cómo siempre he preferido flotar, pues eso es lo que hice.

Flotar ULs

Para solucionar el problema con los floats, vamos a asignar dos clases de listas desordenadas, ul.left and ul.right, que vamos a colocar en un div al que hemos llamado ‘div’ y que tiene 800 píxeles de ancho. (sí, 800 es un número arbitrario, puedes establecer el div al ancho que quieras. El estilo básico que necesitamos es:

#div {width: 800px;}
ul.left {float: left;}
ul.right {float: right;}

Para el código, utilizaremos 3 párrrafos de texto tipo lorem ipsum con algunas listas desordanadas y meteremos todo dentro del DIV. El código tiene este aspecto:

<div id="div">

<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud.</p>

<ul class="left">
<li>Item 1: Left</li>
<li>Item 2: Left</li>
</ul>
<ul class="right">
<li>Item 3 Right: A long item</li>
<li>Item 4 Right: This is longer, just for
fun</li>
</ul>

<p>Duis aute irure dolor in reprehenderit
in voluptatevelit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident.</p>

<ul class="left">
<li>Item 1 Left: Varying length</li>
<li>Item 2 Left: This one varies in length,
too</li>

</ul>
<ul class="right">
<li>Item 3 Right: This is shorter</li>
<li>Item 4 Right: Right</li>
</ul>

<p>Pellentesque et erat. Quisque at quam.
Donec accumsan tellus at tellus. Donec
metus. Sed sit amet ante vitae metus imperdiet
varius. Vestibulum pulvinar bibendum.</p>

<ul class="left">
<li>Item 1 Left</li>
<li>Item 2 Left</li>
</ul>
<ul class="right">
<li>Item 3 Right: Another long item</li>
<li>Item 4 Right: Right</li>
</ul>

</div>

El problema

Pero el problema que tenemos con esta solución es que el texto de los párrafos se nos mete dentro de las listas y además, nuestra lista de la derecha pierde su alineación. Para solucionarlo hacemos tres cosas:

  1. Ponemos el margen, el relleno y el borde a 0the margin, padding and border to zero. Lo hacemos por consistencia, para evitar que los navegadores jueguen con la alineación de nuestros items con diferentes rellenos y márgenes por defecto.
  2. Especificamos los “bullets”. De nuevo, lo hacemos para mantener la consistencia en los distintos navegadores, utilizaremos “bullets” cuadrados simples.
  3. Declaramos el ancho de los UL’S: Aquí les asignamos un ancho arbitrario de 400px a cadA UL, la mitad del ancho del div que los contiene.

Ahora nuestro CSS queda así:

#div {width: 800px;}

ul.left {
float: left;
width: 400px;
margin: 0px;
padding: 0px;
border: 0px none;
list-style-position: inside;
list-style-type: square;
}

ul.right {
float: right;
width: 400px;
margin: 0px;
padding: 0px;
border: 0px none;
list-style-position: inside;
list-style-type: square;
}

El Grembling de los espacios

IE 6 deka un espacio idéntico, antes y después de los UL’S. Sin embargo las últimas versiones de Mozilla (1.7.3), Opera (7.54) yFirefox (1.0) leave dejan espacio antes de los UL’s, pero no antes. Para asegurarnos de que el espacio anterior y posterior a los ULs es igual, le asignamos un relleno (padding) de 15px encima y debajo de cada UL, así:

#div {width: 800px;}

ul.left {
float: left;
width: 400px;
margin: 0px;
padding: 15px 0px;
border: 0px none;
list-style-position: inside;
list-style-type: square;
}

ul.right {
float: right;
width: 400px;
margin: 0px;
padding: 15px 0px;
border: 0px none;
list-style-position: inside;
list-style-type: square;
}

IE 6 está contento. Hay algo de espcio detrás de los ULs EN Mozilla, Opera Y Firefox, pero el espacio antes de los ULs sigue sin ser exactamente igual. Este espaciado irregular es el resultado de un espacio por defecto después del párrafo anterior, así que es el párrafo lo que tenemos que definir para corregirl el problema. Definir el margen o el relleno encima ddnuestro UL no soluciona el problema.

Cómo queremos que nuestro toffee nos salga perfecto, añadiremos al párrafo una clase llamada .no-space y le pondremos el margen y el relleno a 0:

Quote no-space {
margin: 0px;
padding: 0px;
}

También cambiamos el código para incluir esta clase en los párrafos:

<div id="div">

<p class="no-space">Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam.</p>

<ul class="left">
<li>Item 1: Left</li>
<li>Item 2: Left</li>
</ul>
<ul class="right">
<li>Item 3 Right: A long item</li>
<li>Item 4 Right: This is longer, just for
fun</li>
</ul>

<p class="no-space"> Duis aute irure dolor
in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat.</p>

<ul class="left">
<li>Item 1 Left: Varying length</li>
<li>Item 2 Left: This one varies in length,
too</li>

</ul>
<ul class="right">
<li>Item 3 Right: This is shorter</li>
<li>Item 4 Right: Right</li>
</ul>

<p class="no-space">Pellentesque et erat.
Quisque at quam. Donec accumsan tellus at tellus.
Donec  metus. Sed sit amet ante vitae metus
imperdiet varius.</p>

<ul class="left">
<li>Item 1 Left</li>
<li>Item 2 Left</li>
</ul>
<ul class="right">
<li>Item 3 Right: Another long item</li>
<li>Item 4 Right: Right</li>
</ul>

</div>

Ahora parece que todo el mundo está contentto, más o menos. Casi hemos terminado.

Tendría mejor apariencia, sin embargo, so la columna de la lista de la izquierda estuviera indentada, en vez de estar pegada al margen izquierdo. Para lograrlo, hacemos lo siguiente:

  1. Declare relative positioning for the left UL.
  2. Specify its distance from the left. In our example, let’s make this distance 50 px.
  3. Ahora el CSS se nos queda así:

    #div {width: 800px;}

    ul.left {
    float: left;
    width: 400px;
    margin: 0px;
    padding: 15px 0px;
    border: 0px none;
    list-style-position: inside;
    list-style-type: square;
    position: relative;
    left: 50px;
    }

    ul.right {
    float: right;
    width: 400px;
    margin: 0px;
    padding: 15px 0px;
    border: 0px none;
    list-style-position: inside;
    list-style-type: square;
    }

    .no-space {
    margin: 0px;
    padding: 0px;
    }

    Todo está bien. Eso es todo por mi parte, al vedad. Ah, podéis ver la página que me dio el dolor de cabeza para empezar. La técnica utilizada allí es muy similar.

    Espero que disfrutéis del toffe multicapas. Añade tus propios bullets (gif) y sírvelo caliente.

    ======================
    Traducción del artículo original de Nandini Doreswamy publicado en alistapart

    Translated with the permission of A List Apart Magazine and the author[s].

    NOTA IMPORTANTE: Este artículo tiene copyright de alistapart. Este artículo NO ESTÁ BAJO CREATIVE COMMONS

Volver al índice

    Leave a Reply

    Please log in using one of these methods to post your comment:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s