¿Qué son las listas?, ¿Para qué se usan?, ¿Por qué ES MEJOR usarlas en un menú? Estas son preguntas que siempre vienen a la mente al hablar de las listas, sobre todo en la transición hacia el uso de XHTML estándar y el maquetado con CSS.
Hablar de listas (<ul> y <ol> ) es hablar de estructura, recordemos que el XHTML es un lenguaje diseñado para estructurar datos, y eso es lo que debemos hacer con el. En ese sentido, las listas nos ofrecen una muy buena forma de estructurar, pues...listas.
En HTML tenemos dos clases de listas, las ordenadas y las desordenadas, la unica diferencia es que las ordenadas añaden un número correlativo a cada item de la lista, mientras que las desordenadas no:
Las Listas Ordenadas:
<ol> <li>item</li> <li>item</li> <li>item</li> </ol>
Nos da como resultado:
Mientras que, las listas desordenadas:
<ul>
<li>item</li>
<li>item</li>
<li>item</li> </ul>
Nos queda:
Ahora la gran pregunta, Por qué &%$#$@/ tengo que usar eso para hacer mi menú?
Sencillo, porque un menú básicamente ES una lista, no es un parrafo, ni un titulo, es una lista de vínculos. Y como lista que és, lo mas correcto es que esté estructurada en el HTML como tal.
Pero no hay de que preocuparse, ya que el CSS nos permite cambiar completamente el aspecto de la lista, para convertirla en el bonito menú que queremos, sin que deje de ser lista. Pero primero, veamos en qué consisten los pre-formatos que trae de por sí una lista.
Las listas se renderizan en el navegador con ciertas características, como el margen / relleno (interpretado de diferente manera en los distintos navegadores) de la lista completa, el margen / relleno (idem) de cada item de la lista y las viñetas, ademas de un salto de línea para cada item por ser elementos de bloque.
Línea naranja delimita el margen / relleno de la lista, línea verde el bloque de cada item.
Todos estos formatos pueden ser eliminados / modificados a través de CSS muy fácilmente. Comencemos con las viñetas.
Nota: para los ejemplos usaremos una lista desordenada, ya que no necesitamos la numeración.
Usuarios que han visto este tema también han visto...
- Cambiar la apariencia del cursor con CSS
- Estilo en funcion del contexto
- Texto iluminado con CSS
- CSS para campos textarea de formulario
- Hojas de estilo externas
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.