Imagen de fondo dentro de una lista

[sergi_multimedia]

Hola a tod@s, a ver si me podéis ayudar...quiero hacer una lista y en cada fila poner una imagen descriptiva.

Aquí he subido lo que he hecho:

http://s310876771.mialojamiento.es/contacte.html

Como veréis, en el principio está la imagen pero las letras están justo encima, yo lo que quiero es que haya un espacio entre la imagen y las letras, o sea, que no se sobrepongan unas a las otras.

Código HTML:

<ul id="contacte">
    
        <li class="casa">C/ Física, 2, Pol.Ind. La Ferreria</li>
        <li class="mon">08110 | Montcada i Reixac (Barcelona)</li>
        <li class="telefon">Tel [phone]</li>
        <li class="fax">Fax [phone]</li>
        <li class="email">[email protected]</li>
    
    </ul>
 

Código CSS:

#contacte {
 
list-style: none;
 
}
 
.casa {
background: url(imatges/icones/casa_20.png) no-repeat;
}
 
.mon {
background: url(imatges/icones/mon_20.png) no-repeat;
}
 
.email {
background: url(imatges/icones/email_20.png) no-repeat;
}
 
.fax {
background: url(imatges/icones/fax_20.png) no-repeat;
}
 
.telefon {
background: url(imatges/icones/telefon_20.png) no-repeat;
}
 

He probado de posicionar las imágenes, pero siempre se queda debajo de las letras.

Gracias de antemano

[kenproxd]

Hola,

prueba agregándoles a cada una de las classes que usas para la lista lo siguiente:

Código CSS:

padding-left: 25px;
 

Suerte!

[sanxuan]

Aún más simple:
#contacte li {
padding-left: 25px;
}
Es suficiente solo una propiedad para que todos los elementos de la lista guarden esa distancia.

[gabriel_crack]

De igual forma pudieras poner las imagenes como viñetas con la propiedad

list-style-image: url("direccion de tu imagen");
asi automaticamente le da un espacio entre la imagen y el texto

[sergi_multimedia]

Muchas gracias a todos por las respuestas, me han sido muy útiles, ahora ya lo he solucionado, al final he dado más padding porque he hecho las imágenes un poco más grandes.

Ahora me gustaría centrar el texto con la imagen de fondo; he estado buscando y he probado diversas cosas:

background-position: left-center;

vertical-align: middle;


Y ninguna ha sido satisfactoria, no sé si lo he aplicado mal o hay otra forma de poder alinear el texto con la imagen de fondo, o al revés, el fondo con el texto, lo importante es que estén centrados verticalmente.

[kenproxd]

prueba con:

background-position: center left;