JMiur [E]

Si las listas parecen tener tan pocas alternativas ¿por que se usan tanto? Porque son cómodas pero, para sacarles provecho hay que entender un poco como las afectan las propiedades CSS [más información]

Por defecto, la separación entre un item y otro es equivalente a la altura de la fuente. Eso, lo controlamos con la propiedad margin o, individualmente con margin-top y margin-bottom; sólo hay que tener en cuenta que los márgenes son "invisibles" es decir, el tamaño del elemento no cambia. Esto que parece raro, es fácil de entender si le colocamos un color de fondo [más información]

Otra forma es usar la propiedad height pero, aumentar la altura, no hará que se alineen los textos. Lo mejor es utilizar la propiedad line-height. Con ella, aumentamos el espacio que ocupa el texto y siempre lo veremos centrado verticalmente:

Lista NormalPropiedad marginPropiedad heightPropiedad line-height

Una de las propiedades de las lista que les da flexibilidad es display. Por defecto, los items se muestran una debajo del otro pero si les agregamos la propiedad display:inline, veremos los items uno al lado el otro. Eso es lo que normalmente se hace para crear menús.

  • ITEM 1
  • ITEM 2
  • ITEM 3
  • ITEM 1
  • ITEM 2
  • ITEM 3
background-color: #555555;
background-color: #555555;
display: inline;
margin-left: 10px;
padding: 2px 5px;

Con la propiedad list-style-image podemos personalizar las listas cambiando los bullets por una imagen cualquiera. Si la colocamos en UL, la imagen se usará en todos los items LI:

<ul style="list-style-image: url(URL_imagen)">

Si la colocamos en LI, será válida para cada item así que podrá haber varias en una misma lista:

<li style="list-style-image: url(URL_imagen)">

  • ITEM 1
  • ITEM 2
  • ITEM 3
  • ITEM 1
  • ITEM 2
  • ITEM 3
  • ITEM 1
  • ITEM 2
  • ITEM 3

En todos los casos, UL debe tener un padding-left de 1.5em como mínimo porque sino, la imagen aparecerá "partida":

  • ITEM 1
  • ITEM 2
  • ITEM 3

Como bajo ciertas condiciones, el uso de list-style-image suele tener problemas en IE, últimamente se está reemplazando esta propiedad por background que funciona con cualquier etiqueta. Esto, incluso, nos permite tener un mejor control sobre cada item ya que si eliminamos list-style-type, podemos manejar las listas de modo más sencillo.

Por ejemplo, de esta manera podemos implementar un efecto rollover:

  • ITEM 1
  • ITEM 2
  • ITEM 3
  • ITEM 4
  • ITEM 1
  • ITEM 2
  • ITEM 3
  • ITEM 4
  • ITEM 1
  • ITEM 2
  • ITEM 3
  • ITEM 4

16 comentarios:

Anónimo  

Me ha venido de perlas para mi blogroll, gracias JMiur. Por cierto cómo haces para que se suscriban a tus comentarios, creo que yo ya no podré por que creo que borre el sistema atom (uso feedburner) si pudiese solucionarlo me gustaría que me dijieses como. Gracias.

Responder
Nitos  

Muchas gracias! :P

Responder
germanbg  

Mostrar mi agradecimiento por enseñarme cada día un poco más del apasionante lenguaje html.
SALU2

Responder
JMiur  

Juanjo:
Fíjate si encuentras esto:
<b:includable id='feedLinksBody' var='links'>
.....
</b:includable>
esto:
<b:includable id='feedLinks'>
.....
</b:includable>
y esto:
<b:include name='feedLinks'/>

Una forma de solucionarlo es con un blog de pruebas y una plantilla nueva. Los códigos que controlan eso, son iguales en cualquiera.

Saludos, Nitos :)

Gracias, kyle xy. Me alegro que te fuera útil :)

Responder
Anónimo  

Ante todo perdona a este inexperto del CSS. He encontrado las tres partes que me dices, estoy en mi blog de pruebas, pero y ahora?, debo de crear un sistema de comentario/feeds Atom desde Fedburner para mi blog?, porque los he elimine hace tiempo, ni rastro de los feeds de Atom. Solo tengo feeds para que se suscriban a las entradas, que es lo que me faltaría?

Vale me has dicho donde esta la parte que he de editar, pero Jmiur no me has explicado que debo hacer en estas partes de código, puedes ser mas conciso?? Mil gracias.

Juanjo.

Responder
JMiur  

Juanjo:

Los feeds los crea Blogger, son Atom y RSS, ambos. Feedburner no crea nada, sólo "maneja" esos feeds. No hay que hacer nada con Feedburner.

Primero, revisa que todos los feesds esten habilitados en Configuración | Feed del sitio | Modo avanzado: Permitir feeds del blog, que todas las opciones digan COMPLETO o CORT:
Feed de entradas del blog
Feed de comentarios del blog
Feeds de comentarios por entrada

Luego, si esto existe: <b:include name='feedLinks'/>
hay que revisar que los otros dos b:includable estén completos. El código de cada uno de ellos es demasiado largo para escribirlo acá pero puedes verlo en este archivo de texto

Ahora, en ninguno de los dos blogs se ve el código de esos bloques.

Responder
Adrián J. Messina  

E-XAC-TO , diste en la tecla con lo que necesitaba saber como hacer,
como siempre una enciclopedia e impecablemente explicado.
Gracias,

Responder
Kas-Tro  

Pegue el codigo de esta manera pero el menu se me distorciono y los enlaces donde estan lso archivos de blog cuando le paso el mouse por arriva desparece el numerito que tienen..

/* ----- SIDEBAR ----- Blogger template design */
#side-wrapper1 {
width: 198px;
float: left;
margin: 0px 0px 0px 0px;
padding: 9px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

UL {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 160px;
}
UL li {
background: transparent url(URL_imagen1) no-repeat left 50%;
cursor: pointer;
padding: 0 0 0 20px;
line-height: 20px;
}
UL li:hover {
background: #FF9933 url(URL_imagen2) no-repeat left 50%;
color: #000000;
}

Responder
JMiur  

Eso que descrbes, afecta a toda la página y por lo tanto, puede distorcioanr muchos elementos que no quieres modificar. Si todo lo que quieres es que al pasar el mouse sobre los enlaces de la lista esa, el fondo cambie de color, bastaría poner esto:

#LinkList3 ul li:hover {
background-color: #FF9933;
}

Responder
Kas-Tro  

Un millon de gracias por fin lo consegui y si quiere ponercelo a otra seccion solo tengo que cambiar este parte #LinkList3 por lo que quiereo?

Responder
JMiur  

Exactamente. Busca siempre el ID del elemento que quieras cambiar y de esa manera, lo controlas uno por uno.

Responder
Kas-Tro  

oh muchas gracias..

Responder
Anónimo  

como le ago para que en ves de background osea imagen se seleccione el link al pasar el mouse osea que al pasar el mouse en cualquier espacio de esa linea se seleccione el link?

Responder
JMiur  

No entiendo la pregunta.

Responder
Abraham  

¿Cómo le hago para que en vez de que la lista contenga una imagen, tenga un texto? Como por ejemplo, un caracter unicode.

Responder
JMiur  

En ese caso, no puedes usar background sino agregar alguna etiqueta extra con el carácter a usar o probar alguna propiedad tipo :before combinada con content para agregar caracteres de modo automático y no tener que escribirlos manualmente. algo similar a lo que se hace en este ejemplo con la numeración.

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