JMiur [E]

Las listas son uno de las etiquetas más comunes que usamos en una página web. Cuando comenzamos a aprender este lenguaje, suele parecernos que son algo "poco interesante" y a decir verdad, durante mucho tiempo fue así porque ¿para qué puede servir una lista si no es para hacer listas?

En los últimos tiempos, vaya uno a saber por qué, las listas comenzaron a tener un papel importante; alguien las sacó del olvido y se han transformado en las nuevas estrellas de las web. Blogger las usa para muchas cosas, desde lo "normal" como los archivos hasta lo insólito como los perfiles; en WordPress es aún peor, casi todo es una lista, hay un abuso de esas etiquetas y eso causa problemas a la hora de usarlas porque es un elemento que tienen una serie de propiedades especiales y porque los navegadores suelen interpretarlas de manera diferente.

Hay tres tipos de listas:

<UL> </UL> crea una lista desordenada (sin numeración).
  • item 1
  • item 2
  • item 3
  • item 1
  • item 2
  • item 3
<ul type="disc|square|circle">
<li> ....... </li>
</ul>

El atributo type define el gráfico que se muestra y por defecto es un bullet pero los navegadores los muestran de formas diferentes o simplemente ignoran ciertos tipos.

Por defecto, la etiqueta UL tiene las siguientes propiedades CSS:
display: block;
font-family: Times New Roman;
font-size: 12pt; /* lo que equivale a 16px */

/* se separa de arriba y de abajo el equivalente a la altura de la fuente */
margin: 1em 0;

/* se separa de la izquierda el equivalente a dos veces y media el ancho de la fuente */
/* esto lo hace para dejar espacio para colocar el gráfico indicado en type */
padding: 0 0 0 2.5em;

list-style-image: none;
list-style-position: outside;
list-style-type: disc;

<OL> </OL> crea una lista ordenada (numerada)
  1. item 1
  2. item 2
  3. item 3
  1. item 1
  2. item 2
  3. item 3
  4. item 4
<ol type="1|a|A|i|I" start="n">
<li> ....... </li>
</ol>

El atributo type define el tipo de numeración y también depende de los navegadores:
1 muestra números(1, 2, 3, 4, ...)
a letras en minúscula (a, b, c, d, ...)
A letras en mayúscula (A, B, C, D, ...)
i números romanos en minúscula (i, ii, iii, iv, ...)
I números romanos en mayúscula (I, II, III, IV, ...)
El atributo start indica el inico del contador de la lista.

Por defecto, la etiqueta OL tiene las mismas propiedades que la etiqueta UL excepto su tipo:
list-style-type: decimal;
En ambos casos, tanto en lista ordenadas como desordenadas, la regla indica que su contenido sólo deben ser etiquetas <LI> </LI>

Los atributos que pueden usarse son los mismo:
<li type="disc|square|circle"> </Ii>
<li type="1|a|A|i|I" start="n"> </li>
Tienen una particularidad; no hace falta que estén dentro de listas; podemos utilizarlos de manera independiente en cualquier parte aunque, en este caso, el resultado podrá variar con los navegadores y, en algunos casos, esto es completamente ignorado.

Por defecto, la etiqueta LI tiene las siguientes propiedades:
margin: 0;
padding: 0;
display: list-item;
line-height: 1.25em;
height: 1.25em
width: 100%
list-style-image: none;
list-style-position: outside;
list-style-type: disc;


<DL> </DL> es la llamada Definition List.
ITEM 1
DEFINICION 1
ITEM 1
DEFINICION 1
ITEM 2
DEFINICION 2
<dl>
<dt> ....... </dt>
<dd> ....... </dd>
</dl>

En principio, fue creada para armar listas de definiciones. Cada item de este tipo de lista se coloca en una etiqueta DT (Definition Term) y su definición dentro de una etiqueta DD (Definition Definition) que va inmediatamente después de la anterior.

Por defecto, la etiqueta DL tiene las misma propiedades que UL pero padding es cero. Además, las propiedades de la lista (list-style-position, list-style-type y list-style-image) no se aplican.

Hay dos etiquetas más que crean listas pero, aunque siguen funcionando, ya no se utiliza: <DIR> </DIR> y <MENU> </MENU>. Ambas son iguales que UL, no tienen atributos y sólo pueden contener etiquetas LI. Ambas se consideran depreciadas.

Otra etiqueta asociada a las listas y que tiene muy poco uso es la llamada List Header: <LH> </LH>

Se utiliza para colocar el título de la lista y debe ser colocada inmediatamente después de UL, OL o DL
<ul>
<lh id="nombreUnico" class="nombre"> ....... </lh>
<li> ....... </li>
</ul>

16 comentarios:

Jorge Ruiz  

Hola,

Para los que somos principiantes estos tipos de tutoriales en verdad ayudan mucho. Muy bien explicado, con ejemplos, y resultados.

Le doy las gracias tu compartir con nosotros,

Un saludo,

el Manchego

Responder
JMiur  

Me alegro que te sea útil :)

Responder
germanbg  

Coincido con el_manchego, estos tutoriales son realmente útiles.
SALu2

Responder
Anónimo  

DISCULPA MI IGNORANSIA PERO DONDE PUEDO OBTENER ESTAS LISTAS Q CREO Q SON O LLAMAN CODIGOS PARA BAJAR UN VIDEO GRASIAS

Responder
JMiur  

No tengo idea de cuál es la pregunta.

Responder
EmmaX  

hola mira este es mi problema, yo a las listas de links las uso como identificadores para mis entradas, es decir que cada ves que las clickeo me redirecciona hacia una entrada especifica. bueno mi problema es que no se que parte del codigo tengo que modificar para que las listas tengan un margen izquierdo de 0, porque de un dia para otro pareciera que se han centrado. podrias ver si econtras el problema o de ultima si conoces otra forma similar de ordenar las entradas.
este es mi blog:

http://itaka-music.blogspot.com

desde ya gracias

Responder
JMiur  

EmmaX:
No veo que esten centradas salvo la de Comentarios. De todos modos, hay dos definiciones que puedes ver:

.sidebar ul { }
allí dice margin 0

y:
.sidebar li { }
donde margin es cero pero también hay otras dos propiedades que peudes usar para controlar la posición: padding y text-indent
}

Responder
Saúl Sánchez Toro  

Jmiur, tengo en mi blog una lista haciendo parte de un menu horizontal pero desafortunadamente no he podido organizarla de tal forma que el cursor se desplace hasta el final de la lista. He acudido a los otros "gurus" de los blogs (Escaparate de Rosa, Gema, etc.) de la red y aun no he podido obtener la solucion a mi problema.
Este es el blog: http://pionerosbibliotecologia.blogspot.com/

Responder
JMiur  

Saul:
¿A que te refiers con que no logras que el cursor llegue hasta el final de la lista? Esta es una captura para tratar de entender si se trata de esto, poder hacer click, por ejemplo, en el último. Si es eso, no he visto problemas ni en Firefox ni en IE7 ni en IE8 ¿El problema lo notas en algún navegador en especial?

Responder
Saúl Sánchez Toro  

Jmiur, lo que pasa es que yo quisiera que el menu se desplace de arriba a abajo y viceversa solo con el cursor y no con la ayuda del teclado como sucede ahora. Yo he mirado mi lista con Firefox, Safari e Internet Explorer y con los tres me pasa lo mismo.

http://pionerosbibliotecologia.blogspot.com/

Responder
JMiur  

Saul:
Ahora entiendo. Lo que ocurre es que para hacer eso, o se requiere usar la rueda de scroll del mouse (si lo tiene) o bien unscript que deje fija la lista de alguna forma. Se me ocurre una alternativa pero no sé si sea lo que buscas, de todas formas es sencillo de probar.

Podría fijarse la altura máxima de esas listas y forzar a que aparezca una barra de scroll dentro de ella, agregando algo a esta definición:

ul#navmenu ul {
........
height:400px;
overflow-y:scroll;
width:173px;
}

La altura height es sólo a modo de ejemplo, podría ser cualquier otro valor y habría que aumentar un poco el width para contemplar ese ancho extra de la barra.

Responder
Saúl Sánchez Toro  

Jmiur, y otra pregunta: como aumento el ancho de la barra para que me quepan los nombres completos?

Responder
Saúl Sánchez Toro  

Jmiur, ya casi me funciona. Creo que le falta una pequeña instruccion que no se cual es. Pero entre Gema y El Escaparate eres el unico que me ha entendido que es lo que quiero. Mirame por fa el blog y mira a ver que es lo que le falta a la instruccion que me diste.
ul#navmenu ul {
........
height:400px;
overflow-y:scroll;
width:173px;
}

http://pionerosbibliotecologia.blogspot.com/

Responder
JMiur  

Saul: Sólo es un problema de mala interpretación. Cuando decía:
ul#navmenu ul {
........
height:400px;
overflow-y:scroll;
width:173px;
}
esos puntos eran para indicar que dejaras el resto de las propiedades. Haz lo siguiente. Elimina eso que has colocado y busca en tu plantilla las definiciones que dicen algo así:

ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}

Eso es lo que vas a cambiar así:

ul#navmenu ul {
border:0 none;
display:none;
height:400px;
left:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
overflow-y:scroll;
padding:0;
position:absolute;
top:24px;
width:173px;
}

Por si lo que ves no es exactamente l oque veo en el código fuente, cambio:
width:173px;
y agrego:
overflow-y:scroll;
height:400px;

El ancho es aproximado, verifícialo en el navegador que utilices; si ves que aparece una barra de scroll horizontal, amplíalo un poco hasta que desaparezca.

Responder
Saúl Sánchez Toro  

Jmiur, GRACIAS mil GRACIAAS!!!!! por fin me doy por satisfecho con mi lista....quedo PERFECTA.....GRACIASSSSSSSSSSSSSSSSSSSSSSSSSSSSS!!!!!

Responder
JMiur  

Perfecto, Saul, me alegra que se haya solucionado el problema .)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR