Foros del Web » Creando para Internet » CSS »

Fondo de una lista

Estas en el tema de Fondo de una lista en el foro de CSS en Foros del Web. Buenas tardes a todos. Tengo un problema al momento de mostras unos datos en una lista, para tal efecto uso como fondo una imagen, siendo ...
  #1 (permalink)  
Antiguo 24/01/2008, 16:23
Avatar de JuanKa  
Fecha de Ingreso: septiembre-2004
Mensajes: 468
Antigüedad: 13 años, 3 meses
Puntos: 1
Fondo de una lista

Buenas tardes a todos.

Tengo un problema al momento de mostras unos datos en una lista, para tal efecto uso como fondo una imagen, siendo su hoja de estilos la siguiente :

Código HTML:
#familia{
	list-style:none;
	margin:0px 5px;
	padding:0px;
	height:30px;	
}

#familia li{
	margin:2px;
	padding:0px;
	width:170px;
	height:30px;	
	background-image:url(../Imagenes/bot_familia_a.jpg);
	background-repeat:no-repeat;
	float:right;
}

#familia li a{
	display:block;
	height:22px;		
	padding-left:25px;
	padding-top:6px;
	text-decoration:none;
	color:#006699;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	background-image:url(../Imagenes/bot_familia_a.jpg);	
}

#familia li a:hover{
	color: #666666;
	background-image:url(../Imagenes/bot_familia_b.jpg);
}
y lo que pasa que en internet explores se ve perfectamente pero en Mozila Firefox no se be bien, es decir, un elemento li "monta" al otro , estuve viendo que podria ser la altura que lo fije en pixeles, luego lo puse en porcentajes la altura y sigue haciendo lo mismo.

Como se podria realizar esto.


Gracias y Saludos a todos.
  #2 (permalink)  
Antiguo 24/01/2008, 18:13
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Fondo de una lista

y sit ratas de poner mas margin?
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 25/01/2008, 08:17
Avatar de elbecerro  
Fecha de Ingreso: enero-2008
Mensajes: 7
Antigüedad: 9 años, 10 meses
Puntos: 0
Re: Fondo de una lista

Yo haría lo siguiente.... sólo una imagen con los 2 estados (link y hover), de tal manera que la imagen que usas para link esté encima de la del hover, en el css pondrias:

#familia li a{
display:block;
height:22px;
padding-left:25px;
padding-top:6px;
text-decoration:none;
color:#006699;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
background-image:url(../Imagenes/bot_familia.jpg) no-repeat 0 0;
}

#familia li a:hover {
background-image:url(../Imagenes/bot_familia_a.jpg) no-repeat 0 -22px;
}

(lo de -22px lo supongo por la altura que pones y es en negativo porque así desplaza la imagen con los dos estados 22px hacia arribas que es donde empieza la imagen en estado hover)

y quita la imagen de fondo de #familia li.

No sé si me explico :), ya me dirás
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 22:36.