Ordenando Listas

24/nov/2006 5

Ha resultado ser un extenso tópico el asunto de las listas. Mucho hay de qué hablar, y mucho por complementar. En esta ocasión, desenterraré varias propiedades HTML que se han dejado de utilizar por diferentes razones, pero que aún resultan esenciales para el desarrollo semántico y la presentación de contenidos. En muchas de ellas podremos utilizar CSS para ampliar su configuración.

UL es archi-conocido y ampliamente utilizado en este mismo sitio. Por eso, recurriré esta vez a OL: Ordered Lists. Corresponden a listas donde el orden de los elementos se realiza automática y secuencialmente, pero donde tenemos la oportunidad de manejar algunas de ellas a través de un par de atributos. Su forma de construcción es similar a los UL (Unordered Lists):

<ol>
    <li>Item Uno</li>
    <li>Item Dos</li>
    <li>Item Tres</li>
    <li>Item Cuatro</li>
    <li>Item Cinco</li>
</ol>

Ver este ejemplo

Como podrán ver, automáticamente se agregan antes de cada ítem un número, ordenando los elementos desde el 1 y consecutivamente. Algunas cosas que podemos modificar mediante atributos son:

type: podemos definir si las listas se ordenan por números, letras alfabéticamentes, incluso números romanos (mayúsculas y minúsculas):

<ol type="I">
    <li>Item Uno</li>
    <li>Item Dos</li>
    <li>Item Tres</li>
</ol>

Ver este ejemplo

start: este atributo nos permite definir desde qué número se comenzará a contar la lista (lamentablemente, no soportado por Safari 2):

<ol start="1354">
    <li>Item Uno</li>
    <li>Item Dos</li>
    <li>Item Tres</li>
</ol>

Ver este ejemplo

Bueno, a través del CSS podemos ampliar el abanico de atributos, donde CSS2.01 nos entrega varias opciones de desplegar el tipo de bullet que más nos acomode, por mera estética, o por necesidad. Veamos un ejemplo de su aplicación:

ol {
    list-style-type: decimal-leading-zero;
}

Aquí, podremos ver cómo los números anteriores a 10 se muestran antecedidos por un 0.

Ver este ejemplo

Algunas otras no muy utilizadas (quizas sí en otros continentes) las incluyo en la siguiente página, junto con su ejemplo gráfico. Quizás no puedan visualizarse en algunos browsers, y algunas plataformas, ya que no disponen de la tipografía necesaria para el idioma específico.

Recuerdo haber visto tantos sitios construídos con tablas utilizando celdas para hacer esto mismo… Para qué complicarse me pregunto yo.

Comentarios

  1. Sobre las listas y sus estilos « Cosas sencillas [#]

    […] Ordenando listas […]

  2. Enrique [#]

    Buen tutorial… gracias 😉

  3. carlos [#]

    wena!

  4. felipe [#]

    hola, sabes que necesito ayuda, subi recientemente una pagina, hecha en css, que no se ve igual ni en firefox ni en explorer 7. la hice probandola en explorer 6. porfa ayudaaa.

  5. CSSLab Admin [#]

    felipe, ese es el problema. deberias de construir tus sitios con firefox q renderizq bien el codigo, ie7 tb lo hace similar. despues hackear para ie6. suerte.

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab