Listas y menús en CSS

Lenguajes de Internet

Utilización de las listas
Las 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ágenes
En 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 otro
li { float: left; background-color: #F6E3CA; }

La función float:left, hace que los elementos de lista dejen libre su costado derecho, ubicándose un
elemento 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
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ú.
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 CSS
Una 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/5.jpg" border="0" alt="0"/><br>
</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 y menús en CSS

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Similar a Listas y menús en CSS

Similar a Listas y menús en CSS (20)

Más de iConstruye

Más de iConstruye (20)

Último

Último (20)

Listas y menús en CSS