Listemos y enumeremos

Crear listas es muy sencillo, para crear una lista con viñetas encerramos las palabras u oraciones en la etiqueta <ul> y para listas numeradas usamos <ol> y a cada item le ponemos la etiqueta <li>

Ejemplo de <ul>:

• Perro
• gato
• vaca
• pollo
• zorro

El código es:

<ul>
<li>Perro</li>
<li>gato</li>
<li>vaca</li>
<li>pollo</li>
<li>zorro</li>
</ul>

La misma lista ahora numerada:

1. Perro
2. gato
3. vaca
4. pollo
5. zorro

Y su respectivo código:

<ol>
<li>Perro</li>
<li>gato</li>
<li>vaca</li>
<li>pollo</li>
<li>zorro</li>
</ol>

Para personalizar nuestras listas y darles características gráficas como cambiar la viñeta trabajamos desde la hoja de estilos, en el caso que no exista creamos uno, por ejemplo quiero que no se vean las viñetas y que los textos se justifiquen a la derecha:

ul.menu{
list-style:none;
text-align: right;
}

y en el html le damos la clase menu:

<ul class="menu">

<li>Perro</li>

<li>gato</li>

<li>vaca</li>

<li>pollo</li>

<li>zorro</li>

</ul>

Vamos a aplicarlo al menú del blog:

Actualmente mi menú tiene el texto a la izquierda y viñetas de bolita de color verde, así lo muestrra la siguiente imagen:

Voy a quitar las bolitas y alinearlo a la derecha, así que busco el estilo de listado que tiene mi plantilla dentro de la hoja de estilos del HTML:


#sidebar ul li {
background:url("http://www.blogblog.com/dots/bullet.gif") no-repeat 3px .45em;
margin:0;
padding:0 0 5px 15px;
  }

Según este estilo, las bolitas verdes son una imagen llamada bullet.gif, voy a cambiar todo y veamos si funciona:


#sidebar ul li {
list-style:none;

text-align: right;

  }

A continuación una imagen con el resultado: el menú se ha justificado a la derecha y ya no hay viñetas: