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í</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">
© Belén Cruz 2011 Barcelona-España <a href="mailto:[email protected]">[email protected]</a> M. +34 xxx xxx xxx
</div>
<div id="pie_der">
<a href="index.html">Castellano</a> <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