fotografía + lista con imagen de fondo

[seterek]

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

[Mikmoro]

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.

[seterek]

muchas gracias pero no funciona, es que el icono de la lista lo tengo como background, no como imagen de lista.

[webosiris]

Iniciado por Mikmoro

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

recalco esto... yo no entendí muy bien como tenes el html...

[seterek]

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.

[Mikmoro]

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.

[seterek]

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

[Mikmoro]

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

Mikel.

[Mikmoro]

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.

[seterek]

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.

[Mikmoro]

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.

[Mikmoro]

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.

[Mikmoro]

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

<!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:

<!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.

[seterek]

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!!