Foros del Web » Creando para Internet » CSS »

Problema con imagen flotando a la derecha en una lista ul li

Estas en el tema de Problema con imagen flotando a la derecha en una lista ul li en el foro de CSS en Foros del Web. Hola, un saludo a todos ya que hace mucho que no pasaba por aquí Hace días que tengo un problema con una imagen flotante a ...
  #1 (permalink)  
Antiguo 23/02/2010, 12:14
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Problema con imagen flotando a la derecha en una lista ul li

Hola, un saludo a todos ya que hace mucho que no pasaba por aquí

Hace días que tengo un problema con una imagen flotante a la derecha dentro de una lista ul li que como siempre solo en Iexplorer 6 y también en el 7 me dan problemas.

El código es este:

Código HTML:
<ul class="listas">
<li>Adrián y Anita (Uruguay-Brasil-España)<img src="imagenes/adrian-y-anita.jpg" alt="Adrian y Anita" title="Adrian y Anita" class="imagen-listas" height="125" width="125"></li>
<li>Alfonso y Mónica (Cartagena)<img src="imagenes/alfonso-y-monica.jpg" alt="Alfonso y Mónica" title="Alfonso y Mónica" class="imagen-listas" height="125" width="125"></li>
</ul> 
y el css este:

Código:
.listas {
	text-decoration:none;
	margin-left:20px;
	padding-left:20px;
	list-style-image: url(imagenes/imagen-listas.gif);
	list-style-position: inside;
	}
.listas ul{margin:0;
	padding:0;
	}
.listas li{
	height:125px;
	line-height:120px;
	margin:10px;
	padding:10px;		
}
.imagen-listas{
margin-left:20px;float:right;
margin-right:150px;
}
En Firefox sale así:



y en Iexplorer 6 así:




Aparte no termino de centrar la imagen de fondo de las listas (list-style-image: url(imagenes/imagen-listas.gif); siempre queda un poco más arriba.

¿Alguna sugerencia?

Gracias.
  #2 (permalink)  
Antiguo 23/02/2010, 13:30
Avatar de dacho  
Fecha de Ingreso: junio-2008
Ubicación: Argentina
Mensajes: 374
Antigüedad: 9 años, 6 meses
Puntos: 21
Respuesta: Problema con imagen flotando a la derecha en una lista ul li

Hola, de todas formas internet explorer no es el problema en este caso. el tema es que el float lo estas haciendo despues. Podes hacer varias cosas pero el tema esta estructuralmente en el html si no me falla mi conocimienta ja.

Fijate si mejor haces esto en el HTML:

Código HTML:
<ul class="listas">
<li><p>Adrián y Anita (Uruguay-Brasil-España)</p><img src="imagenes/adrian-y-anita.jpg" alt="Adrian y Anita" title="Adrian y Anita" class="imagen-listas" height="125" width="125"></li>
<li><p>Alfonso y Mónica (Cartagena)<p><img src="imagenes/alfonso-y-monica.jpg" alt="Alfonso y Mónica" title="Alfonso y Mónica" class="imagen-listas" height="125" width="125"></li>
</ul> 
y el css agregamos:

Código:
.listas {
	text-decoration:none;
	margin-left:20px;
	padding-left:20px;
	list-style-image: url(imagenes/imagen-listas.gif);
	list-style-position: inside;
	}
.listas ul{margin:0;
	padding:0;
	}
.listas li{
	height:125px;
	line-height:120px;
	margin:10px;
	padding:10px;		
}
.listas li p{
        margin: 0px;
        float:left;
        padding:0px;
}

.imagen-listas{
        margin-left:20px;
        float:right;
        margin-right:150px;
}
Creo que eso deberia solucionar el tema de la imagen a la derecha.

Sino otra solucion es colocar la imagen Antes del texto, osea dejar el html y poner la imagen asi:


Código HTML:
<ul class="listas">
<li><img src="imagenes/adrian-y-anita.jpg" alt="Adrian y Anita" title="Adrian y Anita" class="imagen-listas" height="125" width="125">Adrián y Anita (Uruguay-Brasil-España)</li>
<li><img src="imagenes/alfonso-y-monica.jpg" alt="Alfonso y Mónica" title="Alfonso y Mónica" class="imagen-listas" height="125" width="125">Alfonso y Mónica (Cartagena)</li>
</ul> 
Osea en este caso la imagen tiene que esta antes que el texto y con eso posiblemente tambien se solucione el problema.

Con respecto a centrar el background, del li te recomiendo que utilices la barra de firefox webdeveloper o Firebug y busques que esta pasando, porque se marca la diferencia entre una y otra. Antes de solucionar el problema hay que encontrarlo!....

ahhh.. mmm... Acaba de ver que utilizas list-style-image: url(imagenes/imagen-listas.gif); list-style-position: inside;... La verdad no utilizo eso para los fondos de las listas, simplemente hago un

list-style: none; y le pongo un
background-image: url(nombredeimage.jpg);
background-position: 10px 20px; (ubica la imagen de background)
Background-repeat: no-repeat;

Avisa si no te funciona lo que dije y vemos que puede estar mal de lo que dije :)
__________________
Curso de SEO y HTML.
Diprox.com.ar // Diseño Web.
Mi twitter: @soydacho
  #3 (permalink)  
Antiguo 23/02/2010, 13:32
Avatar de dacho  
Fecha de Ingreso: junio-2008
Ubicación: Argentina
Mensajes: 374
Antigüedad: 9 años, 6 meses
Puntos: 21
Respuesta: Problema con imagen flotando a la derecha en una lista ul li

Una auto correccion en la primera solucion es necesario que el p tenga un width que no sobrepase el el ancho del li si lo sumamos al tamaño de la imagen.
__________________
Curso de SEO y HTML.
Diprox.com.ar // Diseño Web.
Mi twitter: @soydacho
  #4 (permalink)  
Antiguo 24/02/2010, 02:22
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Respuesta: Problema con imagen flotando a la derecha en una lista ul li

Hola dacho.

He probado todos tus ejemplos y por fin se arregla, simplemente como bien decías tenía que colocar la imagen antes del texto por el tema del float que lo hacía al revés. había probado de todo menos esa opción, estoy perdiendo facultades...

El fondo de las listas también sale ubicado correctamente

Código HTML:
<ul class="listas">
<li><img src="imagenes/adrian-y-anita.jpg.jpg" width="125" height="125" alt="Adrián y Anita" class="imagen-listas" />Adrián y Anita (Uruguay-Brasil-España)</li>
<li><img src="imagenes/alfonso-y-monica.jpg" alt="Alfonso y Mónica" title="Alfonso y Mónica" class="imagen-listas" height="125" width="125" />Alfonso y Mónica (Cartagena)</li>
</ul> 
Código HTML:
<style type="text/css">
.listas {
	text-decoration:none;
	margin-left:20px;
	padding-left:20px;
	}
.listas ul{margin:0;
	padding:0;
	}
.listas li{
	height:125px;
	line-height:120px;
	margin:10px;
	padding:10px;
	padding-left:40px;
	list-style: none;
	background-image: url(imagenes/imagen-listas.gif);
	background-position: 0 53px; 
	background-repeat: no-repeat;
	}
.imagen-listas{
        margin-left:20px;
        float:right;
        margin-right:150px;
}
	 </style> 

También en probado la otra forma con los p y el width pero me da problemas, en Iexplorer 6 si va bien, es raro...

Muchas gracias por tu ayuda


Etiquetas: derecha, lista
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 09:21.