Foros del Web » Creando para Internet » CSS »

Imagen de fondo dentro de una lista

Estas en el tema de Imagen de fondo dentro de una lista en el foro de CSS en Foros del Web. Hola a [email protected], a ver si me podéis ayudar...quiero hacer una lista y en cada fila poner una imagen descriptiva. Aquí he subido lo que ...
  #1 (permalink)  
Antiguo 01/03/2011, 02:32
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 7 años
Puntos: 4
Pregunta Imagen de fondo dentro de una lista

Hola a [email protected], 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:
Ver original
  1. <ul id="contacte">
  2.    
  3.         <li class="casa">C/ Física, 2, Pol.Ind. La Ferreria</li>
  4.         <li class="mon">08110 | Montcada i Reixac (Barcelona)</li>
  5.         <li class="telefon">Tel 935 750 905</li>
  6.         <li class="fax">Fax 935 750 229</li>
  7.         <li class="email">[email protected]</li>
  8.    
  9.     </ul>

Código CSS:
Ver original
  1. #contacte {
  2.  
  3. list-style: none;
  4.  
  5. }
  6.  
  7. .casa {
  8. background: url(imatges/icones/casa_20.png) no-repeat;
  9. }
  10.  
  11. .mon {
  12. background: url(imatges/icones/mon_20.png) no-repeat;
  13. }
  14.  
  15. .email {
  16. background: url(imatges/icones/email_20.png) no-repeat;
  17. }
  18.  
  19. .fax {
  20. background: url(imatges/icones/fax_20.png) no-repeat;
  21. }
  22.  
  23. .telefon {
  24. background: url(imatges/icones/telefon_20.png) no-repeat;
  25. }

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

Gracias de antemano
  #2 (permalink)  
Antiguo 01/03/2011, 06:59
 
Fecha de Ingreso: agosto-2009
Mensajes: 349
Antigüedad: 8 años, 4 meses
Puntos: 8
Respuesta: Imagen de fondo dentro de una lista

Hola,

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

Código CSS:
Ver original
  1. padding-left: 25px;

Suerte!
  #3 (permalink)  
Antiguo 01/03/2011, 15:39
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Imagen de fondo dentro de una lista

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.
  #4 (permalink)  
Antiguo 01/03/2011, 16:09
 
Fecha de Ingreso: diciembre-2008
Ubicación: Quintana Roo
Mensajes: 4
Antigüedad: 9 años
Puntos: 0
Respuesta: Imagen de fondo dentro de una lista

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
  #5 (permalink)  
Antiguo 02/03/2011, 02:24
Avatar de sergi_multimedia  
Fecha de Ingreso: noviembre-2010
Mensajes: 213
Antigüedad: 7 años
Puntos: 4
Respuesta: Imagen de fondo dentro de una lista

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.
  #6 (permalink)  
Antiguo 02/03/2011, 07:41
 
Fecha de Ingreso: agosto-2009
Mensajes: 349
Antigüedad: 8 años, 4 meses
Puntos: 8
Respuesta: Imagen de fondo dentro de una lista

prueba con:

background-position: center left;

Etiquetas: list, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:32.