listas HTML

Lenguajes de Internet

Utilización de las listasLas listas en CSS constituyen uno de los elementos más importantes para el desarrollo de una página web que respete los estándares. Así como es importante el marcado correcto de párrafos y encabezados, las listas también deben estar especificadas de la forma adecuada.

Más allá de la marcación del documento HTML, con la ayuda de CSS es posible cambiar por completo la apariencia de las listas y crear elementos atractivos y de gran impacto visual, tanto para un simple listado como para la creación de una barra de navegación.

El marcado de las listas

En HTML la manera correcta de presentar una lista con ítems es utilizando las etiquetas UL y OL. La sigla UL proviene de Unordered List (listas sin orden) y OL de Ordered list (listas ordenadas). Al utilizar estas etiquetas en un documento HTML el navegador se encarga de colocar viñetas (cuando se usa UL) o numerar los ítems (al usar OL):

Ejemplo

Para lograr las listas anteriores el código HTML utilizado es:

Lista con UL:

<ul><li>Argentina</li><li>Brasil</li><li>Uruguay</li><li>Paraguay</li>

</ul>

Lista con OL:

<ol><li>Argentina</li><li>Brasil</li><li>Uruguay</li><li>Paraguay</li>

</ol>

Patricio Rodríguez M.Escuela de Diseño | Duoc UC | Sede Viña del Mar


Dando formato a las listas

Utilizando CSS es posible dar formato a las listas sin modificar el código HTML (ese precisamente es el chiste de las hojas de estilo). Por ejemplo es posible elegir entre una viñeta cuadrada (square), circular (disc, circle) o listas con letras (lower-roman, lower-alpha, upper-alpha, etc.)

El código CSS para lograr la lista con viñeta cuadrada es este:

ul{list-style-type: square;

}

Utilizando imágenesEn el ejemplo anterior se demostró que es posible variar el estilo de las listas usando los valores que nos da CSS de una forma muy sencilla. Asimismo, en muchas ocasiones, nuestros diseños requerirán de soluciones más estéticas que un simple círculo. Para ello CSS nos da la opción de incluir imágenes en nuestras listas utilizando dos métodos: reemplazar la viñeta por una imagen o añadirla como fondo. La segunda opción suele ser más práctica ya que es posible determinar la ubicación de la imagen desplazándola horizontal o verticalmente e intentar así una visualización similar en distintos navegadores.

ul{list-style-image: url(rombo.gif);

}

Esto hace que se reemplace la viñeta de la lista por la imagen indicada. Hay que tener en cuenta que cada navegador

presenta en pantalla los elementos con algunas pequeñas diferencias entre sí.



Creación de un menú horizontal

La creación de menús en CSS supone dos instancias a entender. En primer lugar debemos de tener en cuenta que la gran ventaja que presenta la creación de un menú basado en elementos de lista es su posibilidad de ampliar el rango de actualización, ya que basta agregar un nuevo elemento de lista (LI) en el documento HTML para que aparezca un nuevo ítem en el menú.

Comenzaremos por ver la creación de un menú horizontal:1. utilizaremos las etiquetas

ul { }li { }

2. luego comenzaremos a asignar algunos atributos visuales:ul { list-style-type: none; }li { background-color: #F6E3CA; }

La función list-style-type, elimina la propiedad de lista de nuestro listado, en referencia elimina la viñeta nativa de las listas sin formato

3. ahora haremos que los elementos de lista se alineen uno al lado del otroul { list-style-type: none; }li { float: left; background-color: #F6E3CA; }

La función float:left, hace que los elementos de lista dejen libre su costado derecho, ubicándose unelemento al costado de otro

4. lo que nos queda es asignar algunos estilos gráficos a fin de generar un referente diferenciador entre el texto normal y los elementos de navegación

ul { list-style-type: none; }li { float: left; background-color: #F6E3CA;border: #D7C8B6 2px solid;margin-right: 10px; padding: 0 4px; }

Hemos agregado un borde sólido de un determinado espesor y color, además de elementos de margenes y espaciados interiores por medio del atributo padding.

5. También se puede utilizar la pseudo-clase :hover para mejorar el resultado. Como Internet Explorer sólo admite esta propiedad sobre los enlaces, se debe poner el padding en el enlace en vez de en el elemento de la lista para que el cambio de color afecte a toda la opción del menú.

ul { list-style-type: none; }li { float: left; background-color: #F6E3CA;margin-right: 10px; border: #D7C8B6 2px solid; }a { color: black; text-decoration: none; padding: 0 4px; }a:hover { background-color: white; color: #D7C8B6; }

En esta parte se agregaron las etiquetas nativas de vínculo (<a>) con el atributo text-decoration:none; este atributo elimina de los textos vinculados el subrayado.

a:hover esta dentro del mismo atributo pero se utiliza para el caso en que el usuario coloque el cursor sobre los elementos de lista para tener una variación visual (equivalente a la función rollover).



Para el caso del menú vertical, las condiciones visuales serían las siguientes:#menuv {

border: 1px solid #ACCFE8;border-width: 1px 1px 0 1px;width: 150px;font: 90% "Trebuchet MS", Arial, Helvetica, sans-serif;float: left;

}

menuuv será el nombre de nuestro contenedor (div) al cual le otorgaremos atributos de color, tamaño y tipo de letra, en este caso queda por omisión la función flota:left; ya que se entiende que si el menú es vertical, necesariamente acompaña en su diagramación a otro contenedor que tiene la información central.

#menuv ul, li {list-style-type: none;

}

Como ya explicamos antes esta función asignadas a la lista sin formato y a los elementos de lista nos permite quitar el atributo de viñeta al listado.

#menuv ul {margin: 0;padding: 0;

}

Quitamos los márgenes y los rellenos interiores a la lista.

#menuv li {border-bottom: 1px solid #ACCFE8;

}

Con esto a cada elemento de lista le estamos un borde de base visualmente con un espesor y un color determinado, para que haga las veces de separador entre un elemento y otro de nuestro menú.

#menuv a {text-decoration: none;color: #3366CC;background: #F0F7FC;display: block;padding: 3px 6px;width: 138px;

}

Condiciones gráficas para los elementos de la lista que funcionen como vínculos, destacar de esta parte del código la función Display:block; hace que los elementos de lista se muestren como bloques de color asignando un ancho fijo y no variable que dependa de la extensión del texto.

#menuv a:hover {background: #DBEBF6;

}



Creación de una galería de fotos utilizando CSSUna galería de fotos al fin y al cabo no es más que una lista de elementos (en nuestro caso imágenes) que mostraremos como más nos convenga. Desde el punto de vista de la ordenación lógica de la información en nuestros documentos resulta razonable usar una lista para estructurar nuestros elementos, por tanto recordaremos la clase anterior en que creamos un listado, pero esta vez asignaremos otros valores para poder conformar nuestra galería.

Normalmente estamos acostumbrados a ver las listas organizadas verticalmente, pero CSS nos permite jugar con los elementos de una lista para mostrarlos de distintas maneras. En nuestro caso, probablemente si organizáramos la lista verticalmente la apariencia de nuestra galería quedaría extraña comparada con una organización horizontal; por tanto, organizaremos nuestra lista horizontalmente, aplicando un display:inline y flotando los elementos a la izquierda para que fluyan unos a continuación a otros.

Partimos del siguiente código html:

<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link href="css/tres.css" rel="stylesheet" type="text/css"></head>

<body><div id="principal"> <h3>GALERÍA CSS - Listas</h3> <ul> <li><a href="#"><img src="img/1.jpg" border="0" alt=""/><br>

<span>Descripción de la imagen</span></a></li> <li><a href="#"><img src="img/2.jpg" border="0" alt=""/><br>



<span>Descripción de la imagen</span></a></li> <li><a href="#"><img src="img/5.jpg" border="0" alt="0"/><br>




<span>Descripción de la imagen</span></a></li> </ul></div></body> </html>



Como puede apreciarse, hemos insertado dentro de cada <li> (list item) nuestra imagen y un comentario añadido con un <span>;lLa etiqueta <span> permite agrupar varios elementos en línea seguidos dentro de un mismo bloque (por ejemplo, varias palabras seguidas en un párrafo), para después darles formato con la hoja de estilo.

Creamos una nueva hoja CSS y asignamos valores a nuestra división que denominamos principal, de esta manera definimos los espacios a utilizar en nuestro documento:

En CSS sería así:

body{background-color: #cccccc;font-family: helvetica;font-size: 10pt;color: #fff;}

#principal li { display:inline; float:left; width:220px; background-color:#f5f7f9; padding:5px; margin:10px; text-align: center; border-right: #a5a7aa solid 1px; border-bottom: #a5a7aa solid 1px;}

Nótese que las típicas viñetas que aparecen asociadas a las listas desordenadas desaparecen cuando aplicamos el display:inline, de la misma forma que si hubiéramos unsado un list-style:none.

Podemos modificar las propiedades que queramos para lograr que la apariencia de cada uno de los elementos de la lista se ajuste a nuestro objetivo. Basándonos en los estilos que aplicamos en el ejemplo de la galería fotográfica con capas, cambiamos el color de fondo, el ancho de cada <li>, les damos margin y padding para presentarlos correctamente y damos estilo a los bordes para lograr apariencia de profundidad.


listas HTML

Design

Transcript of listas HTML