Hola amigos descubri esa página desde hace un tiempo gracias a este foro y segui este ejemplo
http://www.araudi.net/ejemplos/3_capas.html
lo he adaptado para mi pagina pero tengo un pequeño problema
tengo este codigo html
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Co</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/exaltacion.css" />
<link rel="shortcut icon" href="imagenes/favicon.ico"/>
<script type="text/javascript" src="./js/mootools-beta-1.2b2.js"></script>
<script type="text/javascript" src="./js/carrusel.js"></script>
<script type="text/javascript" src="./js/funciones.js"></script>
<script type="text/javascript">
//var car1 = new Carrusel('carrusel1',{images:['./imagenes/imagen1.jpg','./imagenes/imagen2.jpg','./imagenes/imagen4.jpg']});
window.addEvent('domready', function() {
var car = new Carrusel('carrusel');
car.addImages(['imagenes/cabecera1.jpg','imagenes/cabecera2.jpg','imagenes/cabecera3.jpg','imagenes/cabecera4.jpg','imagenes/cabecera5.jpg']);
//car.addImage('imagenes/imagen2.jpg');
//car.addImage('imagenes/imagen1.jpg');
car.start();
});
</script>
</head>
<body>
<div class="contenedor ">
<div class="cabecera">
<div style="position:relative; z-index:2;">
<a href="index.html">
<img src="imagenes/logo_transparente_completo.png" alt="logo" width="267" height="85"/>
</a>
</div>
<div style="position:absolute; float:left; left:60px; top:0px;">
<div id="carrusel" >
</div>
</div>
<div>
<ul class="menusup">
<li><a href="historia.html">Historia</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">Junta </a></li>
<li><a href="#">4</a></li>
<li><a href="#">Otros</a></li>
<li><a href="#">Contacta</a></li>
</ul>
</div>
</div>
<div class="contenido">
11111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111 111111111
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
CUerpooooooooooooooooooooooooooooooooooooooooooooo oooooooooooooooooooooooooooooooooooooooooo<br/>
22222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222
</div>
<div class="pie">
<div style="float:left; margin-top:12px; margin-left:150px;">
Pieeee
</div>
<div class="enlaces_pie">
<a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a>
<a href="http://jigsaw.w3.org/css-validator/">CSS 2.1</a>
</div>
</div>
</div>
</body>
</html>
y el css es
html, body {
height: 100%;
background-image:url(../imagenes/fondonegro.jpg);
background-color:#505050;
background-repeat:repeat-x;
}
.contenedor {
width: 960px;
background-color: #6cc;
margin: 0 auto;
position: relative;
height: auto!important;
min-height: 100%;
height: 100%;
background-color: #FFFFFF;
}
.cabecera {
background-color: #FFFFFF;
height: 90px;
position:fixed;
width:960px;
z-index:3;
}
.contenido {
position: absolute;
display: block;
padding-top:125px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
z-index:0;
background-color: #FFFFFF;
width:960px;
}
.pie {
position: fixed;
bottom: 0;
height: 35px;
background-image:url(../imagenes/fondo_menu.gif);
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
color: #fff;
text-align: center;
width: 960px;
clear: both;
}
.bordeCuerpo{
border-left-color:#A9A9A9;
border-left-style:solid;
border-left-width:1px;
border-right-color:#A9A9A9;
border-right-width:1px;
border-right-style:solid;
}
.menusup {
padding-left:32px;
margin:0;
list-style:none;
height:35px;
background:#fff url(../imagenes/fondo_menu.gif);
position:relative;
border-bottom:1px solid #444;
width:928px!important;
}
.menusup li {
float:left;
}
.menusup li a {
display:block;
float:left;
height:35px;
line-height:35px;
color:#FFFFFF;
text-decoration:none;
font-size:11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight:bold;
text-align:center;
padding:0 23px;
}
.menusup li a:hover {
color:#fff;
text-decoration:underline;
}
.enlaces_pie {
float:right;
margin-top:12px;
margin-right:15px;
}
.enlaces_pie a:link {
color:#FFFFFF;
text-decoration:none;
}
.enlaces_pie a:hover {
text-decoration:underline;
}
.capa_historia{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
}
.capa_historia p{
margin-bottom:10px;
}
.imagen_historia{
float:left;
margin-right:5px;
}
el problema es que si la capa contenido tiene mucho texto y reduzco la resolucion del navegador el contenido se me va metiendo por debajo del pie y tarda un buen rato y en aparecer el scroll y cuando aparece el scroll y lo bajo para abajo no aparece todo el texto que se habia metido.
un saludo a ver si me podeis echar una mano
gracias