F R E E

Enlaza listas numeradas con CSS

En este artículo [en inglés] nos explican cómo enlazar las listas numéricas con CSS que por separado nunca nos cuadran los números.

Si necesitas crear una lista numerada que empiece por un número diferente de 1, aqui tienes una solución elegante.

Es muy útil si necesitas mostrar una lista en más páginas (por ejemplo si hay 100 resultados de una búsqueda y quieres mostrar 10 resultados por página).

En este caso, si estás usando una lista numerada, comenzará por el 1 en cada página, y no es una buena solución dado que saldrá así:

Página 1

1. Division Bell
2. Atom Hearth Mother
3. Relics
4. Dark Side of the Moon
5. Wish You Were Here

Página 2

1. The Wall
2. More
3. Piper at the gates of Dawn
4. Final Cut
5. Meddle

Para no tener que usar el parámetro depreciado

< ol start=”6″>

en la segunda lista, he buscado por la web una solución adecuada que cumpla con los estándards W3C - y lo encontré.

Hay que escribir lo siguiente en el CSS:

Y así es como quedarán definidas tus listas:

 
Ahora, nuestras listas se mostrarán como queríamos:

Estos recuadros representan diferentes páginas, por supuesto.

Voy a explicar lo que ha ocurrido: si indicas esta regla CSS OL {counter-reset: item 2;} tu lista empezará en el 3 (el valor por defecto está a 9, y la lista por defecto empieza con el 1).

Por alguna razón, necesitas indicar LI:display:block; si no lo haces, los números no aparecen.

Todo lo que necesitas ahora es cambiar dinámicamente el valor en tu regla para resetear el contador.

Puedes hacerlo en PHP, ASP, CF, etc ...

La regla li:before se usa para definir la apariencia del número en tu lista numerada.

Si indicas display:block dentro del li:before, podrás crear buenas vistas y productos 100% CSS.

Y, ahora la vuelta de la tuerca - a pesar de que esta regla está especificada en W3C CSS2 standard (con soluciones incluso mejores, que harán la vida del codificador XHTML más fácil), IE 6 ignora completamente estas reglas!

Sin embargo, en el ejemplo de Amazon Search created in Ruby creado por mi colega, podemos ver como IE6 ignora la regla, pero los resultados de la búsqueda aparecen correctamente, y la apariencia en general es aceptable.

Sin embargo, si usas Firefox, verás nuestra lista numerada con toda su gloria.

nemrac @ 01:25

Meneame | del.icio.us