Ver Mensaje Individual
  #1 (permalink)  
Antiguo 19/08/2011, 10:48
belencruzp
 
Fecha de Ingreso: agosto-2011
Mensajes: 7
Antigüedad: 12 años, 8 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