Foros del Web » Creando para Internet » CSS »

quiero colocar un div debajo de otro div que tiene position:absolute, height:auto

Estas en el tema de quiero colocar un div debajo de otro div que tiene position:absolute, height:auto en el foro de CSS en Foros del Web. Hola a todos! Soy nueva con esto del HTML y del CSS y tengo un problema con un div que es el pie de la ...
  #1 (permalink)  
Antiguo 19/08/2011, 10:48
 
Fecha de Ingreso: agosto-2011
Mensajes: 7
Antigüedad: 12 años, 7 meses
Puntos: 0
Exclamación quiero colocar un div debajo de otro div que tiene position:absolute, height:auto

Hola a todos!
Soy nueva con esto del HTML y del CSS y tengo un problema con un div que es el pie de la página. Tengo 4 div: cabecera, menu, contenido y pie.
La cabecera y el menu tienen position:fixed para que se queden fijos y el contenido tiene height:auto, position:absolute y z-index:-1 para que se vaya detrás de la cabecera y el menu, no importa cuán largo sea su contenido. La verdad es que no sé qué estoy haciendo mal con el pie, el tema es que el contenido se lo come. el pie no quiere salir dentro del contenido por más que los div están por separados.
Copio y pego el HTML y el CSS. Espero que me puedan ayudar!!!

HTML
<div id="contenedor">

<div id="cabecera">
<a href="index.html"><img src="img/belencruz.png" /></a>
</div>

<div id="menu" align="center">
<ul>
<li class="celda"><a href="#">cv</a></li>
<li class="celda"><a href="sobre_mi.html">sobre m&iacute;</a></li>
<li class="celda"><a href="#">mis proyectos</a></li>
<li class="celda" style="margin-right:0px;"><a href="#">portafolio</a></li>
</ul>
</div>

<div id="contenido_ppal">

<div id="bienvenido">
<img src="img/bienvenido.jpg" class="bienvenido" />
</div>

</div>

<div id="pie">
<div id="pie_izq">
&copy; Bel&eacute;n Cruz 2011&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Barcelona-Espa&ntilde;a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="mailto:[email protected]">[email protected]</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;M. +34 xxx xxx xxx
</div>
<div id="pie_der">
<a href="index.html">Castellano</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="en/index.html">English</a>
</div>
</div>
</div>


CSS
#cabecera {
background:url(../img/bgfondo.jpg) repeat-x fixed;
width:900px;
height:115px;
text-align:center;
background-color:#cccccc;
position:fixed; /*cambio*/
z-index:10000; /*cambio*/
}

#menu {
width:900px;
height:28px;/*cambio*/
background-color:#cccccc;
padding-top:10px; /*cambio*/
top:115px;
position:fixed; /*cambio*/
z-index:10001; /*cambio*/
}

#contenido_ppal {
width:860px;
height:auto;
background-color:white;
position:absolute; /*cambio*/
top:153px; /*cambio*/
z-index:-1; /*cambio*/
padding:10px 20px 10px 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

}

#pie {
width:900px;
height:20px;
padding-top:3px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:8pt;
color:white;
margin-top:10px;
background:url(../img/bgpie.png) no-repeat;
}


Muchas gracias por adelantado!
Belén

Última edición por belencruzp; 19/08/2011 a las 11:06
  #2 (permalink)  
Antiguo 19/08/2011, 11:40
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 16 años
Puntos: 21
Respuesta: quiero colocar un div debajo de otro div que tiene position:absolute, heig

El pie de pagina esta dentro del contenedor.
__________________
_
  #3 (permalink)  
Antiguo 20/08/2011, 05:53
 
Fecha de Ingreso: agosto-2011
Mensajes: 7
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: quiero colocar un div debajo de otro div que tiene position:absolute, heig

Hola Opzina!
Gracias por tu respuesta. La verdad es que tenía varios detalles (o muchos) y no era precisamente el tener el div del pie dentro del contenedor porque siempre lo he hecho así.
La solución estaba en cambiar el position en el #contenido_ppal y el z-index (estaba en -1 y lo coloqué en 1):

#contenido_ppal {
width:860px;
overflow:auto;
background-color:white;
position:relative;
top:153px;
z-index:1;
padding:10px 20px 10px 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Y darle al #pie un position también con el mismo top del #contenido_ppal:

#pie {
width:900px;
height:20px;
padding-top:3px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:8pt;
color:white;
margin:10px auto 0 auto;
background:url(../img/bgpie.png) no-repeat;
position:relative;
top:153px;
}

El HTML quedó igual, con el div del #pie dentro del #contenedor. Mis problemas además de que el #contenido_ppal se tragaba el #pie, era que el #contenido_ppal con el z-index:-1 no me dejaba seleccionar lo que estaba adentro una vez veías el preview y era símplemente cambiar el -1 a 1. Ahora todo me funciona.
Espero este post le sirva de ayuda a alguien que tenga problemas con los position, pues era lo que me estaba dañando el funcionamiento de la web.
Saludos!!!
b

Etiquetas: contenido, debajo, fondo, html, quiero
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 07:18.