Foros del Web » Creando para Internet » CSS »

fotografía + lista con imagen de fondo

Estas en el tema de fotografía + lista con imagen de fondo en el foro de CSS en Foros del Web. Hola, Tengo una fotografía y a su derecha una lista con una imagen de fondo a modo de icono. El caso es que en IE ...
  #1 (permalink)  
Antiguo 08/04/2008, 06:36
 
Fecha de Ingreso: noviembre-2004
Mensajes: 123
Antigüedad: 13 años, 1 mes
Puntos: 0
fotografía + lista con imagen de fondo

Hola,
Tengo una fotografía y a su derecha una lista con una imagen de fondo a modo de icono.
El caso es que en IE el icono se me pone detrás de la fotografía, siempre he solucionado esto poniéndole un tamaño a la ul o con márgenes, pero es que es una base de datos en la que en ocasiones no hay fotografía, por lo que la ul no tendría que tener un tamaño del 100% y sin márgenes ni padding.

¿Cómo puedo solucionarlo?

muchas gracias de antemano
  #2 (permalink)  
Antiguo 08/04/2008, 07:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: fotografía + lista con imagen de fondo

Hola.
Quizá podrías probar a ver poniendo list-style-position: inside; en tu selector li.

Sin ver el código es difícil imaginar si servirá de algo.

Mikel.
  #3 (permalink)  
Antiguo 08/04/2008, 07:26
 
Fecha de Ingreso: noviembre-2004
Mensajes: 123
Antigüedad: 13 años, 1 mes
Puntos: 0
Re: fotografía + lista con imagen de fondo

muchas gracias pero no funciona, es que el icono de la lista lo tengo como background, no como imagen de lista.
  #4 (permalink)  
Antiguo 08/04/2008, 07:46
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Re: fotografía + lista con imagen de fondo

Cita:
Iniciado por Mikmoro Ver Mensaje
Sin ver el código es difícil imaginar si servirá de algo.
recalco esto... yo no entendí muy bien como tenes el html...
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #5 (permalink)  
Antiguo 09/04/2008, 05:29
 
Fecha de Ingreso: noviembre-2004
Mensajes: 123
Antigüedad: 13 años, 1 mes
Puntos: 0
Re: fotografía + lista con imagen de fondo

Este es el código de la fotografía y el de la lista que está a la derecha:
# foto {border:1px solid #74AB00; padding:3px; float:left; margin:0 10px 10px 0;}
.circle li, . { background: url(images/list.gif) no-repeat 0px 6px; padding-left:13px;}
.circle ul {margin-left 10px; padding:0;}

<div id=”foto”><img src="images/foto.jpg" /></div>

<ul class="circle">
<li>Direcci&oacute;n: C. San Román</li>
<li>Tel&eacute;fono: 915 555 555 </li>
</ul>
Os dejo un ejemplo, como véis en la imagen de abajo (visto en IE) el background de la lista se queda por detrás de la fotografía porque la capa empieza en el mismo punto que la foto. Ah, y no quisiera poner list-type-image, que siempre se me descuadra mucho cuando las listas tienen más de una línea.

  #6 (permalink)  
Antiguo 09/04/2008, 05:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: fotografía + lista con imagen de fondo

Hola, Seterek.

Antes de nada, repasa un par de cosas:

# foto {border:1px solid #74AB00; padding:3px; float:left; margin:0 10px 10px 0;}
.circle li, . { background: url(images/list.gif) no-repeat 0px 6px; padding-left:13px;}
.circle ul {margin-left 10px; padding:0;}

1.- es misterioso que te funcione este selector: .circle li, . porque la coma y punto finales no son nada. Debe ser .circle li sin más.

2.- El segundo selector es .circle ul, pero en tu código es ul quien tiene la clase cicle, miestras que con tu selector le estás diciendo que afecte a los elementos ul dentro de otro ellemento de la clase circle. Debería ser: ul.cicle.

Resumiendo:

# foto {border:1px solid #74AB00; padding:3px; float:left; margin:0 10px 10px 0;}
.circle li { background: url(images/list.gif) no-repeat 0px 6px; padding-left:13px;}
ul.circle {margin-left 10px; padding:0;}

Haz estos cambios y mira a ver qué pasa.

Mikel.
  #7 (permalink)  
Antiguo 09/04/2008, 06:01
 
Fecha de Ingreso: noviembre-2004
Mensajes: 123
Antigüedad: 13 años, 1 mes
Puntos: 0
Re: fotografía + lista con imagen de fondo

Gracias Mikel,
lo de ".circle li, ." se me ha colado, tenía otra clase ahí también que no venía al cuento y al quitarla he dejado el punto y coma.

De todas maneras he probado a poner ul.circle y tampoco funciona, la lista se ha desplazado los 10px a la derecha pero sigue quedando detrás de la fotografía.

Si le pusiese el margin-left: 90px quedaría bien, pero como en otras ocasiones no hay fotografía no me interesa ponerle ese margen
  #8 (permalink)  
Antiguo 09/04/2008, 06:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: fotografía + lista con imagen de fondo

Bien, pues resuelto eso, miramos a ver si se ve qué ocurre.

Mikel.
  #9 (permalink)  
Antiguo 09/04/2008, 06:19
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: fotografía + lista con imagen de fondo

Bueno, pues además de esos tenías algún otro error en el trozo de css que has puesto, como:

.circle ul {margin-left 10px; padding:0;}, que te faltan los dos puntos detrás de left
.circle ul {margin-left: 10px; padding:0;}

El efecto que dices erróneo se lo estás pidiendo tú con:

.circle li { background: url(images/list.gif) no-repeat 0px 6px; padding-left:13px;}

Pueba a poner ese trozo de código así:

#foto {border:1px solid #74AB00; padding:3px; float:left; margin:0 10px 10px 0;}
.circle li { background: url(images/list.gif) no-repeat 0px 6px;}
ul.circle {margin-left: 10px; padding:0;}

y creo que lo verás casi igual en IE6 que en FF.

Mikel.
  #10 (permalink)  
Antiguo 09/04/2008, 06:45
 
Fecha de Ingreso: noviembre-2004
Mensajes: 123
Antigüedad: 13 años, 1 mes
Puntos: 0
Re: fotografía + lista con imagen de fondo

no le puedo quitar el padding-left:13px porque sino el texto de la lista se me pone encima del icono, tengo que desplazar un poco el texto a la izquierda para que se quede al lado.
  #11 (permalink)  
Antiguo 09/04/2008, 07:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: fotografía + lista con imagen de fondo

Pero entonces el error es otro: estás usando el estilo de lista y al mismo tiempo una imagen de fondo para simular la lista.

Si vas a usar una imagen de fondo, para lo que necesitas el padding, entonces quita el estilo de lista. Si vas a usar una imagen como estilo de lista, quita el background y no necesitas el padding. Estas dos cosas son prácticamente incompatibles.

Todo esto es un poco confuso. Mis comentarios se basan en el trozo de código que has puesto, donde no quitas el estilo de lista, metes la imagen como fondo y necesitas un padding.

Mikel.

Última edición por Mikmoro; 09/04/2008 a las 08:16
  #12 (permalink)  
Antiguo 09/04/2008, 08:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: fotografía + lista con imagen de fondo

Vamos a ver. Quiero decir que básicamente tienes dos maneras de hacerlo:

EDITADO por problemas al corregir el código. Sigue más abajo.

Última edición por Mikmoro; 09/04/2008 a las 08:23
  #13 (permalink)  
Antiguo 09/04/2008, 08:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: fotografía + lista con imagen de fondo

1.- Con una imagen como tipo de lista, sin fondo ni padding:

Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="es-es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#foto { border: 1px solid rgb(116, 171, 0);
margin: 0pt 10px 10px 0pt;
padding: 3px;
float: left;
}
#lista { float: left;
margin-left: 16px;
}
.circle li {
}
ul.circle { padding: 0px;
list-style-image: url(images/list.gif);
margin: 0px;
}
</style>
</head>
<body>
<div id="foto"><img src="images/foto.jpg"></div>
<div id="lista">
<ul class="circle">
<li>Direcci&oacute;n: C. San Rom&aacute;n</li>
<li>Tel&eacute;fono: 915 555 555 </li>
</ul>
</div>
</body>
</html>
2.- Con una imagen como fondo de los elementos de lista, y sin tipo de lista:

Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="es-es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#foto { border: 1px solid rgb(116, 171, 0);
margin: 0pt 10px 10px 0pt;
padding: 3px;
float: left;
}
#lista { float: left;
margin-left: 0px;
}
.circle li { background: transparent url(images/list.gif) no-repeat scroll left top;
padding-left: 13px;
}
ul.circle { padding: 0pt;
margin: 0px;
list-style-type: none;
}
</style>
</head>
<body>
<div id="foto"><img src="images/foto.jpg"></div>
<div id="lista">
<ul class="circle">
<li>Direcci&oacute;n: C. San
Rom&aacute;n</li>
<li>Tel&eacute;fono: 915 555 555 </li>
</ul>
</div>
</body>
</html>
Cualquiera de las dos maneras funciona bien, para lo que como verás, lo mejor es incluir otra caja que albergue la lista, de manera que la puedas colocar donde quieras. Si no hay imagen, la caja de la lista se pega a la izquierda.

Pruébalo y nos cuentas.

Mikel.
  #14 (permalink)  
Antiguo 09/04/2008, 09:44
 
Fecha de Ingreso: noviembre-2004
Mensajes: 123
Antigüedad: 13 años, 1 mes
Puntos: 0
Re: fotografía + lista con imagen de fondo

Muchas gracias Mikel!

He probado con la lista dentro de la capa como has dicho y sólo con ponerle float:left ya funciona.

La primero de las soluciones que has puesto no me ha funcionado y el segundo sale bien pero cuando hay más de una línea en la lista el icono se descoloca.

Muchísimas gracias de nuevo Mikel!!
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 19:16.