Foros del Web » Creando para Internet » CSS »

Se me superponen los contenidos

Estas en el tema de Se me superponen los contenidos en el foro de CSS en Foros del Web. 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; ...
  #1 (permalink)  
Antiguo 10/09/2003, 16:06
Avatar de GG
GG
Usuario no validado
 
Fecha de Ingreso: febrero-2002
Ubicación: Santiago, Chile
Mensajes: 195
Antigüedad: 15 años, 10 meses
Puntos: 0
Se me superponen los contenidos

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>

<!-- EL PROBLEMA ES QUE ESTO SE SUPERPONE A LO QUE HAY EN P1 Y P2 Y QUIERO QUE QUEDE ABAJO-->

<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

Última edición por GG; 10/09/2003 a las 17:32
  #2 (permalink)  
Antiguo 10/09/2003, 17:25
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 14 años, 3 meses
Puntos: 1
falta un " en <p class="sugerencias>

y falta un > en Desarrollado por<br<img
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/

Última edición por PascalC; 10/09/2003 a las 17:27
  #3 (permalink)  
Antiguo 10/09/2003, 17:31
Avatar de GG
GG
Usuario no validado
 
Fecha de Ingreso: febrero-2002
Ubicación: Santiago, Chile
Mensajes: 195
Antigüedad: 15 años, 10 meses
Puntos: 0
En realidad, pero eso se me escapó cuando copié elcódigo aquí no más.
El problema continúa.
  #4 (permalink)  
Antiguo 10/09/2003, 18:02
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 14 años, 3 meses
Puntos: 1
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.
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
  #5 (permalink)  
Antiguo 10/09/2003, 18:13
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 14 años, 3 meses
Puntos: 1
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">
<!--
div#pie
{
position:absolute;
left: 33px;
width: 737px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #999966;
}

div#pie p {margin:0;}

img#p1
{
float:right;
height: 38px;
width:249px
}
address#p2
{
float:left;
text-align: center;
width: 488px;
font-style:normal;
}
p.sugerencias {clear:both; text-align:right;}
p.clara {text-align:center;}
-->
</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>
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
  #6 (permalink)  
Antiguo 11/09/2003, 10:44
Avatar de GG
GG
Usuario no validado
 
Fecha de Ingreso: febrero-2002
Ubicación: Santiago, Chile
Mensajes: 195
Antigüedad: 15 años, 10 meses
Puntos: 0
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.
  #7 (permalink)  
Antiguo 11/09/2003, 14:15
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 14 años, 3 meses
Puntos: 1
el código que puse da el resultado siguiente :
http://pascal.chevrel.free.fr/temp/test.png


¿ No es lo que querías ?
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
  #8 (permalink)  
Antiguo 11/09/2003, 14:17
Avatar de GG
GG
Usuario no validado
 
Fecha de Ingreso: febrero-2002
Ubicación: Santiago, Chile
Mensajes: 195
Antigüedad: 15 años, 10 meses
Puntos: 0
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>
  #9 (permalink)  
Antiguo 11/09/2003, 14:36
Avatar de GG
GG
Usuario no validado
 
Fecha de Ingreso: febrero-2002
Ubicación: Santiago, Chile
Mensajes: 195
Antigüedad: 15 años, 10 meses
Puntos: 0
ASI se me veía a mí

www.kweb.cl/temp/resultado.htm
  #10 (permalink)  
Antiguo 12/09/2003, 08:10
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 14 años, 3 meses
Puntos: 1
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.
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
  #11 (permalink)  
Antiguo 12/09/2003, 09:54
Avatar de GG
GG
Usuario no validado
 
Fecha de Ingreso: febrero-2002
Ubicación: Santiago, Chile
Mensajes: 195
Antigüedad: 15 años, 10 meses
Puntos: 0
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
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 17:09.