Como dar estilo de listas ol (ordenadas/numeradas) con css

Detalles

Categoría: Programación

Última actualización el Jueves, 12 Abril 2012 21:28

Escrito por cybnet

Visto: 3735

Las listas ol, las listas numeradas, tienen un estilo por defecto en el que puedes elegir entre unas cuantas opciones a través de las hojas de estilo css como decimal (por defecto), lower-alpha (letras minúsculas en lugar de números), upper-alpha, lower-roman (números romanos), upper-roman, none y algunos más:

Ejemplo:

ol {list-style-type: upper-roman;}

Por defecto, la mayoría de los navegadores muestran las listas numeradas con la misma fuente y estilo que el texto especificado en body. En este artículo mostramos como cambiar el estilo de los números de las listas numeradas usando el tag de listas ordenadas <g;ol> y párrafos <p> anidados (vea anidar etiquetas html correctamente) en cada item <li> de la lista de modo que puedas tener practicamente un control total en el diseño de una lista numerada.

Básicamente, todo lo que necesitamos hacer es dar estilo al elemento <ol> estableciendo una fuente determinada y una imagen de fondo y resetear el elemento <p> (anidado en <li>) a otro tipo de fuente. Debemos recordar que, en las listas ordenadas, cada elemento de la lista viene especificado por el elemento <li> y que, por defecto, los números de la lista aparecen posicionados fuera de <li> y por ello será necesario poner un margen a los elementos <li> para posicionar el texto y el número del elemento correctamente según nuestro diseño.

1. Empezemos por el principio, el HTML:

<ol> 
  <li> 
   <p>Primer elemento de la lista ordenada</p>
  </li> 
 <li> 
    <p>Segundo elemento de la lista ordenada </p>:
  </li> 
  <li> 
    <p>Tercer items de la lista ordenada</p>
 </li> 
</ol>

Con este código el resultado es:

1. Primer elemento de la lista ordenada

2. Segundo elemento de la lista ordenada

3. Tercer elemento de la lista ordenada

2. Damos estilo al elemento ol

ol {
  font: normal 1em Impact,Georgia,serif;
  color: #999999:
}

1. Primer elemento de la lista ordenada

2. Segundo elemento de la lista ordenada

3. Tercer elemento de la lista ordenada

3. Reseteamos el estilo del elemento p que tenemos dentro de cada elemento li de la lista

ol p {
 font: normal .7em Arial,Helvetiva,sans-serif;
 color:#333333;
}

Ahora la lista quedará con los números cambiados y el texto de cada item de acorde con la fuente especificada:

1. Primer elemento de la lista ordenada

2. Segundo elemento de la lista ordenada

3. Tercer elemento de la lista ordenada

4. Damos estilo al fondo de los números

Ahora que tenemos los números en un formato diferente al resto del texto y con la fuente que queremos podemos darle, por ejemplo, un color de fondo. Al hacer esto no hay que olvidar eliminar el margen de los elementos <ol> y <p> y poner el adecuado al elemento <li> para conseguir la alineación del texto, fondo y números. Todo junto quedaría:

ol {
  background: #333333;
  margin: 0px;
  padding: 0px;
  font: bold 1em Impact,Georgia,serif;
  color: #999999;
}
ol p {
 margin: 0px;
 padding: 3px 0px;
 font: normal .7em Arial,Helvetiva,sans-serif;
 color:#333333;
}
li {
 background: #ffffff;
 margin: 0 0 0 30px;
 padding-left: 5px;
}

Este será el resultado:

1. Primer elemento de la lista ordenada

2. Segundo elemento de la lista ordenada

3. Tercer elemento de la lista ordenada

Ahora podemos seguir haciendo cambios, por ejemplo, añadir una imagen de fondo para los números y cambiar la numeración a alfabética en minúscula:

ol {
  list-style-type: lower-alpha;
  background: url("images/imagen.png") repeat-y scroll left top transparent;
  margin: 0px;
  padding: 10px 0;
  font: normal 1em Impact,Georgia,serif;
  color: #999999;
}
ol p {
 margin: 0px;
 padding: 3px 0px;
 font: normal .7em Arial,Helvetiva,sans-serif;
 color:#333333;
}
li {
 background: transparent;
 margin-left: 50px;
 padding-lef: 20px;
}

Con la imagen de fondo la lista ordenada queda de este modo:

1. Primer elemento de la lista ordenada

2. Segundo elemento de la lista ordenada

3. Tercer elemento de la lista ordenada

Como ves, las posibilidades que nos brindan las hojas de estilo css son practicamente infinitas. Estos son solo algunos ejemplos de lo que se puede hacer para cambiar el estilo de los números de las listas numeradas (ol - listas ordenadas).

Eliminar el punto después del número

Me han hecho una pregunta en los comentarios sobre cómo quitar el punto que aparece después de los números o letras de una lista ordenada. He investigado un poco y directamente no se puede, o al menos no he encontrado cómo hacerlo. Lo que se puede hacer es dar algunos rodeos, por ejemplo, quitar todos los números y luego ponerlos en cada item de la lista. Esto se puede hacer por ejemplo con el siguiente código css (no probado en todos los navegadores, pero debería funcionar):

ol { 
    counter-reset: item;
    list-style-type: none;
}
li { display: block; }
li:before { 
    content: counter(item) "  "; 
    counter-increment: item 
}

Si en lugar del punto quieres poner otro elemento, por ejemplo un paréntesis ), se cambiaría:

li:before { 
    content: counter(item) ") "; 
    counter-increment: item 
}

En otro post explicabamos como hacer que una lista ol comience con un número diferente de 1 utilizando css

+3

+1-1ComparteReportar

css - diseño - estilo de listas ordenadas - listas ordenadas - ol - imagenes de fondo - cambiar estilo listas ordenadas - listas ordenadas css - números de listas ordenadas - diseño web

Comentarios (7)

RSS

cybnet

(16.05.2012 (22:48:56))

Saludos Batera,
El comportamiento que describes es el normal del código HTML que has puesto, aunque para tí sea un problema. Si no te queda más que utilizar esa estructura tendrás que utilizar CSS para poner los márgenes que quieras; por ejemplo, puedes dar un margen negativo al elemento <p> para compensar el margen de su elemento padre (en este caso la lista). U otra técnica parecida. Olvídate del atributo start y cosas así pues tu problema no es de la numeración de los elementos de la lista sino de su formato.

Así de golpe no se me ocurre otra cosa.

Citar

Batera

(16.05.2012 (16:36:42))

Resulta que estoy maquetando un epub mediante Sigil sobre economía que tiene una gran cantidad de listas que contienen listas, que a su vez éstas contienen otras listas y además van aderezadas con comentarios del autor que las cortan de vez en cuando. Sería algo así:

1. bla bla bla
2. bla bla bla
3. bla bla bla

__a. bla bla bla
__b. bla bla bla

____◦ bla bla bla
____◦ bla bla bla

__c. bla bla bla

Comentario del autor que el formato y márgenes de texto no normal, no de lista.

__d. bla bla bla

4. bla bla bla

__a. bla bla bla

Imagen de tabla

__b. bla bla bla

5. bla bla bla

Comentario del autor que el formato y márgenes de texto no normal, no de lista.

6. bla bla bla


En vista de código quedaría así (con sus respectivas líneas en la página de estilo CSS):

Código :

< ol >
< li >bla bla bla< /li >
< li >bla bla bla< /li >
< li >bla bla bla< /li >

__< ol class=" latin " >
__< li >bla bla bla< /li >
__< li >bla bla bla< /li >

____< ul class=" circulo " >
____< li >bla bla bla< /li >
____< li >bla bla bla< /li >
____< /ul >

__< li >bla bla bla< /li >

< p >comentario< /p >

__< li >bla bla bla< /li >
__< /ol >

< li >bla bla bla< /li >

__< ol class=" latin " >
__< li >bla bla bla< /li >

< p >Imagen de tabla< /p >

__< li >bla bla bla< /li >
__< /ol >

< li >bla bla bla< /li >

< p >comentario< /p >

< li >bla bla bla< /li >
< /ol >

El importante problema que me encuentro es que los comentarios aparecen con el margen de la lista, en vez de con margen normal de texto de etiqueta < p > (y no < li >). Entonces probé con la opción que comentas de "start". Corté la lista justo antes de comenzar el comentario para abrir otra al acabarse éste. Entonces puse < ol start=" 6 " >, y así aunque empieza una nueva lista, la numeración es correcta porque comienza por el número que quiero yo y no desde el 1. Pues esto aparecía perfecto en Sigil, pero al probarlo en el programa Sony Reader y en mi eBook Sony PRS-350 no lo reconocen (debe de ser que no reconocen HTML5), empezando en ambos casos la lista en 1 en lugar de en el número que le indico.

Luego probé lo que indicas en esta página http://www.bloogie.es/tecnologia/programacion/57-hacer-que-una-lista-ol-
Pero tampoco me funciona, porque me descojona toda la lista, cambiándome las letras y círculos de las sublistas, por números.

Y por mucho que le doy vueltas no encuentro solución para este entuerto.

Agradecería enormemente algo de ayuda.

Muchas gracias.

Citar

Ronald

(16.05.2012 (00:00:14))

Citando "cybnet" :

Mira el artículo Invertir orden de listas ol.

Pero muchas muchas gracias...

Citar

cybnet

(14.05.2012 (20:29:35))

Invertir orden de listas OL Mira el artículo Invertir orden de listas ol.

Citar

Ronald

(13.05.2012 (23:02:59))

¿Conocen alguna forma de invertir el orden la lista ordenada?

Tengo una lista donde lo nuevo se coloca arriba, por lo tanto me gustaría que fuera:

4.
3.
2.
1.

Lo más viejo va al final, lo nuevo va arriba.
La lista se actualiza periodicamente.

Citar

cybnet

(12.04.2012 (21:26:41))

quitar puntos después de los números Saludos Rodrigo, me ha parecido interesante la pregunta, así que he añadido la respuesta al post.

Citar

rodrigo

(12.04.2012 (19:43:10))

consulta... es posible quitar los puntos después de los números?
cambie el color del cuadro pero no diloy con un estilo para cambiar eso

Citar

Nombre

Email

Asunto

 

Comentario 100000

Antispam  

 Enviar Limpiar

• < Anterior
• Siguiente >