Se me superponen los contenidos

GG · #1 (**permalink**) 10/09/2003, 15:06

Tengo lo siguiente

Esta es la hoja de estilo:

div#pie
{
position:absolute;
left: 33px;
width: 737px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999966;
text-align: right;
}
div#p1
{
position:absolute;
left: 488px;
width: 249px;
margin: 0;
padding: 0;
text-align:left ;
vertical-align: middle;
}
div#p2
{
position:absolute;
left: 0;
text-align: center;
width: 488px;
}

Y este el código

<div id="pie">
<div id="p1">
<img alt="ceramicas_sueltas (1K)" src="img/ceramicas_sueltas.gif" style="height: 38px; width:249px" />
</div>
<div id="p2">
Dirección 2345, Comuna | Cód.Potal: 12345<br>
Casilla 12345, Santiago , Santiago, Chile <br>
Tel.: (56-2) 1234567 | Fax: (56-2)123 45 67
</div>



<p>Envienos sus sugerencias</p>
<p style="text-align:center">Desarrollado por<br><img src="img/logo.gif" alt="Nuestro Logo" border="0" WIDTH="92" HEIGHT="41"></a></p>
</div>

Como dije en el comentario... El problema es que queda sobre lo que hay en div p1 y p2, lo que sigue, y no entiendo por qué ni cómo arreglarlo...

De verdad he probado mucho....

Gracias por la ayuda.

JeJe

PascalC · #2 (**permalink**) 10/09/2003, 16:25

falta un " en <p class="sugerencias>

y falta un > en Desarrollado por<br<img

GG · #3 (**permalink**) 10/09/2003, 16:31

En realidad, pero eso se me escapó cuando copié elcódigo aquí no más.
El problema continúa.

PascalC · #4 (**permalink**) 10/09/2003, 17:02

estás utilizando posicionamiento absoluto para p1 y p2 lo que significa que el resto del contenido con posicionamiento normal (static) es el primer contenido en el fluxo y pasa abajo. Creo que te has complicado bastante las cosas, en general nunca se utiliza position:absolute para este type de cosas, se usan float y position:relative.

PascalC · #5 (**permalink**) 10/09/2003, 17:13

Tu código corregido :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Nouveau</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style type="text/css">

</style>

</head>
<body>
<div id="pie">
<address id="p2">
Dirección 2345, Comuna | Cód.Potal: 12345<br>
Casilla 12345, Santiago , Santiago, Chile <br>
Tel.: (56-2) 1234567 | Fax: (56-2)123 45 67
</address>
<img alt="ceramicas_sueltas (1K)" src="img/logo.jpg" id="p1" />

<p class="sugerencias">Envienos sus sugerencias</p>
<p class="clara">Desarrollado por<br><img src="img/logo.jpg" alt="Nuestro Logo" width="92" height="41"/></p>
</div>

</body>
</html>

GG · #6 (**permalink**) 11/09/2003, 09:44

Me funciona CASI perfecto. El único problema de

Me pareció super buena la idea pensar no sólo en div con id sino también por img y por address (que me sonó más a xml que a html)

En fin, el casi eprfecto es porque a pesar de todo me queda la dirección arriba de la imagen y no en la misma línea.

PascalC · #7 (**permalink**) 11/09/2003, 13:15

el código que puse da el resultado siguiente :
http://pascal.chevrel.free.fr/temp/test.png

¿ No es lo que querías ?

GG · #8 (**permalink**) 11/09/2003, 13:17

Bien, ya lo arreglé...

laEtiqueta address no me funcionó mucho, así que la reemplacé por un simpe parrrafito. Para que no se viera arriba o abajo de la imagen, sino que al lado, finalmente, le tuve que borrar el width y el float.

Pero te repito que MUUUUUUCHAS GRACIAS, ¡¡¡¡LOS AMO!!!!

Quedó así:
img#p1
{
float:right;
height: 38px;
width:249px
}
p#p2
{
font-size:10px;
text-align:center
}

<img alt="ceramicas_sueltas (1K)" src="img/ceramicas_sueltas.gif" id="p1" />
<p id=p2>
Dirección 2345, Comuna | Cód.Potal: 12345<br>
Casilla 12345, Santiago , Santiago, Chile <br>
Tel.: (56-2) 1234567 | Fax: (56-2)123 45 67
</p>

GG · #9 (**permalink**) 11/09/2003, 13:36

ASI se me veía a mí

www.kweb.cl/temp/resultado.htm

PascalC · #10 (**permalink**) 12/09/2003, 07:10

teoricamente deberías obtener exactamente el mismo resultado que el mio con el código que puse, puesto que tienes diferencias importantes, el tamaño y el tipo de letras por ejemplo, significa que hay otras reglas CSS que interferan con las que puse.

GG · #11 (**permalink**) 12/09/2003, 08:54

entonces, será un problema de las definiciones que tenga en las otras cosas más que un cuento del navegador o del tipo de archivo?
Voy a re revisar