Foros del web, para los que viven de bits

Juaran · 10-ago-2006, 04:25

Buenas,

estoy intentando crear una lista horizontal de imágenes pequeñas junto a un texto descriptivo a la derecha o a la izquierda de cada una de ellas. El problema es que el texto me pisa la imagen

el código que tengo es este:

Código:

  <ul id="leyenda">
    <li id="dolbySound">Dolby Sound</li>
    <li id="teaBar">Tea Bar</li>
    <li id="handicapped">Facilities for handicapped</li>
    <li id="carPark">Car Park</li>
  </ul>

Código:

ul#leyenda
{
	border: 1px solid #000;
	list-style: none;
    padding-top: 10px;
    margin: 0;
	width: 65%;
	height: auto 
}

ul#leyenda li
{
	float: left;
	color: #777;
	display: block; 
	padding: 0px 0px 5px 40px;
	text-align: center;
	text-decoration: none;
	width: 35px;
}

ul#leyenda li#dolbySound{
	background: transparent url(../resources/thx.JPG) no-repeat left;	
}	

ul#leyenda li#teaBar{
	background: transparent url(../resources/bar.JPG) no-repeat left;	
}	

ul#leyenda li#handicapped{
	background: transparent url(../resources/chair.JPG) no-repeat left;	
}	

ul#leyenda li#carPark{
	background: transparent url(../resources/parking.gif) no-repeat left;	
}

alguien sabe donde está el problema?

un saludo

alvlin · 10-ago-2006, 08:46

es lógico que el texto te quede por encima si le estás poniendo la imagen como fondo...

Quizás quieras probar la pseudoclase :before

Saludos.

Nigel · 10-ago-2006, 10:39

O simplemente poner las imágenes como lo que son, imágenes <img> más que nada porque :before no es que funciones mucho (por no decir que no funciona) en IE

Así te ahorra poner tanto identificador en CSS que no viene a cuento

Hououji Ayumu · 10-ago-2006, 17:39

pues yo tambien te recomiendo que no pongas las imagenes de Fondo porque es muy problematico acomodarles bien y el mayor problema con los visitantes que dependiendo del navegador y demas cosas es dificil predecir como se vera en fin como sea yo tambien te recomiendo usar las <img>

Juaran · 11-ago-2006, 01:37

muchas gracias por vuestros comentarios! Intentaré <img>

un saludo

10-ago-2006, 08:46	#2 (permalink)
alvlin import fdw.mod.py Fecha de Ingreso: julio-2005 Ubicación: Rodeado de indios... por suerte son amigos :) Mensajes: 4.050	es lógico que el texto te quede por encima si le estás poniendo la imagen como fondo... Quizás quieras probar la pseudoclase :before Saludos. __________________ Mi Blog "Por ahora casi nadie me trata de subnormal sin que a los 4 segundos se arrepienta. Porque yo a mis semejantes quiero a todos por igual: en cubitos de 40x40"

10-ago-2006, 17:39	#4 (permalink)
Hououji Ayumu Fecha de Ingreso: junio-2005 Ubicación: Queretaro Mexico Mensajes: 71	pues yo tambien te recomiendo que no pongas las imagenes de Fondo porque es muy problematico acomodarles bien y el mayor problema con los visitantes que dependiendo del navegador y demas cosas es dificil predecir como se vera en fin como sea yo tambien te recomiendo usar las <img> __________________ Sayounara

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado

10-ago-2006, 10:39	#3 (permalink)
Nigel Fecha de Ingreso: agosto-2006 Ubicación: Madrid Mensajes: 95	O simplemente poner las imágenes como lo que son, imágenes <img> más que nada porque :before no es que funciones mucho (por no decir que no funciona) en IE Así te ahorra poner tanto identificador en CSS que no viene a cuento

11-ago-2006, 01:37	#5 (permalink)
Juaran Fecha de Ingreso: noviembre-2002 Mensajes: 9	muchas gracias por vuestros comentarios! Intentaré <img> un saludo