domingo, 29 de marzo de 2009

Listas con css

He copiado el estilo de un par de tutoriales de css para hacer que una lista aparesca en forma horizontal y nada.

Supongamos que mi lista es la siguiente:

<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>

Y deseo que aparesca de forma horizontal, como lo hago con CSS?

El estilo necesario es el siguiente:

<style>
ul li{
display:inline;
}
</style>

Si deseas agregarle un icono a los elementos li puedes hacer lo siguiente:
Agrego padding-left para establecer la zona de relleno izquierdo al texto, y la imagen que quiero mostrar en ese link.

.icono1{
padding-left: 20px;
background:url(../templates/maps/maps/mapa_r1_c2_r2_c2.jpg) no-repeat;
}

por lo que la lista quedaría como sigue:

<ul>
<li class="icono1" >Elemento 1</li>
<li>Elemento 2</li>
</ul>

Encontre este codigo css que asocia la extension a la que apunta el link con una imagen, no lo he probado.

a[href $='.pdf'] {
padding-left: 20px;
background: transparent url(icon_pdf.gif) no-repeat center left;
}

No hay comentarios: