Problema urgente con superposición de pie de página a div.

marcosr · #1 (**permalink**) 06/07/2007, 08:44

Hola, tengo en mi página un div que tiene el siguiente código:

Código HTML:

#publicidad { position:absolute; left:800px; top:86px; width:200px; }

Se ubica al costado derecho del sitio y normalmente es más alto que las otras partes del sitio.

El problema es que quiero agregar un pie de página ahora, es un simple div es decir para que se ubique al fondo basta con hacer <div></div> pero el problema es que se superpone dependiendo del código a la capa anteriormente mensionada.

Alguna ayuda?

Muchas gracias !

padapapoulos · #2 (**permalink**) 06/07/2007, 12:29

Seguro que no usas bien el posicionamiento absoluto, seria interesante que pegaras algo mas de codigo o dieras un enlace para verlo.
Un saludo

marcosr · #3 (**permalink**) 06/07/2007, 13:08

Muchas gracias por la respuesta,

aquí te dejo todo el código que tengo para esas dos capas.

Código HTML:

/* Publicidad */

#publicidad { position:absolute; left:800px; top:86px; width:200px; }
#publicidad .bloque_grande { float:left; width:180px; height:415px; margin-right:10px; margin-bottom:10px; border:1px solid black; }
#publicidad .bloque_mediano { float:left; width:180px; height:215px; margin-right:10px; margin-bottom:10px; border:1px solid black; }
#publicidad .bloque_chico { float:left; width:180px; height:115px; margin-right:10px; margin-bottom:10px; border:1px solid black; }
#publicidad .aviso_texto { float:left; width:160px; height:14px; background:black; text-align:right; color:white; font-family:Arial, Helvetica, sans-serif; font-size:60%; }
#publicidad .aviso_img { float:right; width:20px; height:14px; background:url(../../img/fondos/publicidad_flecha.png) no-repeat black; }

/* Pie de página */

#pie { clear:both; }
#pie .superior { background:white; height:5px; }
#pie .contenido { background:#F0F0F0; padding:10px; font-family:Verdana, Arial, Helvetica, sans-serif; }
#pie .contenido #conectados { width:300px; height:100px; background:white; font-size:70%; overflow-y:scroll; }
#pie .contenido #conectados .superior { height:15px; padding:2px; }
#pie .contenido #conectados .conectados { padding:2px; }

Y en la página están ubicados así:

Código HTML:

<div id="pie">
		<div class="superior"></div>
		<div class="contenido">
			<div id="conectados">
			<div class="superior">Usuarios conectados: (codigo php)</div>
			<div class="conectados">
			codigo php
			</div>
			</div>
		</div>
	</div>
	
	<div id="publicidad">
		<div class="bloque_grande">
			<div class="aviso_texto">Publicidad</div>	
			<div class="aviso_img"></div>
		</div>
		<div class="bloque_mediano">
			<div class="aviso_texto">Publicidad</div>
			<div class="aviso_img"></div>
		</div>
		<div class="bloque_chico">
			<div class="aviso_texto">Publicidad</div>
			<div class="aviso_img"></div>
		</div>
	</div>

No te coloco un link ya que el sitio lo estoy desarrollando, todavía no está en internet.

Muchas gracias !

padapapoulos · #4 (**permalink**) 06/07/2007, 14:00

Si entendi bien, lo primero que veo es que tienes el pie antes que el resto en el html, lo quieres asi? osea, esta hecho a proposito?
Es ese tu problema?

marcosr · #5 (**permalink**) 06/07/2007, 14:16

No, de hecho eso lo hice en una de mis pruebas por solucionar mi problema y no lo volví a modificar pero no cambia el resultado, me ha seguido quedando igual, la diferencia es que se superpone o queda abajo pero nunca quedan separadas (publicidad y pie).

padapapoulos · #6 (**permalink**) 06/07/2007, 14:17

Pues toma:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/* Publicidad */

#publicidad {width:200px; float: right;}
#publicidad .bloque_grande { float:left; width:180px; height:415px; margin-right:10px; margin-bottom:10px; border:1px solid black; }
#publicidad .bloque_mediano { float:left; width:180px; height:215px; margin-right:10px; margin-bottom:10px; border:1px solid black; }
#publicidad .bloque_chico { float:left; width:180px; height:115px; margin-right:10px; margin-bottom:10px; border:1px solid black; }
#publicidad .aviso_texto { float:left; width:160px; height:14px; background:black; text-align:right; color:white; font-family:Arial, Helvetica, sans-serif; font-size:60%; }
#publicidad .aviso_img { float:right; width:20px; height:14px; background:url(../../img/fondos/publicidad_flecha.png) no-repeat black; }

/* Pie de página */

#pie { clear:both; }
#pie .superior { background:white; height:5px; }
#pie .contenido { background:#F0F0F0; padding:10px; font-family:Verdana, Arial, Helvetica, sans-serif; }
#pie .contenido #conectados { width:300px; height:100px; background:white; font-size:70%; overflow-y:scroll; }
#pie .contenido #conectados .superior { height:15px; padding:2px; }
#pie .contenido #conectados .conectados { padding:2px; }
</style>
<title></title>

</head>
<body>

<div id="publicidad">
<div class="bloque_grande">
<div class="aviso_texto">Publicidad</div>
<div class="aviso_img"></div>
</div>
<div class="bloque_mediano">
<div class="aviso_texto">Publicidad</div>
<div class="aviso_img"></div>
</div>
<div class="bloque_chico">
<div class="aviso_texto">Publicidad</div>
<div class="aviso_img"></div>
</div>
</div><div id="pie">
<div class="superior"></div>
<div class="contenido">
<div id="conectados">
<div class="superior">Usuarios conectados: (codigo php)</div>
<div class="conectados">
codigo php
</div>
</div>
</div>
</div>
</body>
</html>

marcosr · #7 (**permalink**) 06/07/2007, 15:49

Muchas gracias por tu ayuda !

MauXXI · #8 (**permalink**) 14/02/2009, 12:49

"Pues toma."

Así de facil no?

¿Y para los que no entienden lo que hiciste?

JavierB · #9 (**permalink**) 14/02/2009, 13:00

El mensaje original es de hace más de 1 año. Por favor, no reviváis temas tan antiguos.

Saludos,