Tengo que hacer un template, el contenido tendrá 950px centrado, pero a la vez el fondo de la cabecera y del footer deben tener 100% y con un color de fondo, de manera que se vea algo así[img]http://www.isshared.com/view/022012127540190003.html[/img]
cuando intento hacer el header de 100% se me corta y solo muestra los 950px.
más o menos este es el código base que tengo
Código HTML :
<body> <div id="fondoh"> <div id="total"> <div id="header"><h1>título de la página</h1> </div> </div> <div id="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget mauris massa. Fusce tincidunt rhoncus bibendum. Curabitur faucibus ultrices molestie. Mauris eget velit eros. Integer ullamcorper odio non metus iaculis facilisis. Maecenas sit amet dui lacus. Morbi sit amet velit nisi, vel interdum felis. Suspendisse id scelerisque dui. Ut ullamcorper mauris vitae justo tincidunt ut tempor nisl viverra. Donec porttitor, nibh at ullamcorper bibendum, odio sem porta risus, vel eleifend ante sem eu mi. In dictum erat sed ipsum feugiat tincidunt. Donec ut porttitor ipsum. Cras feugiat bibendum accumsan.</p> <p>Mauris nisi nisi, suscipit eu varius eget, mollis eget ligula. Pellentesque auctor, enim eget pretium venenatis, arcu sapien dapibus neque, sed scelerisque dui justo eu purus. Sed at quam et ante volutpat imperdiet. Nam eu sapien magna, egestas congue purus. Nam elementum cursus eros nec blandit. Ut ut augue et tortor interdum mattis. Fusce pellentesque nunc eu purus dapibus auctor. Etiam risus leo, congue et placerat at, bibendum facilisis orci. Vestibulum a erat a odio facilisis dapibus. Etiam laoreet pellentesque lacinia. Maecenas tincidunt adipiscing blandit. Suspendisse aliquet ornare sem, sit amet luctus magna sodales quis.</p> </div> <div id="fondof"> <div id="footer"><p>pie de página</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget mauris massa. Fusce tincidunt rhoncus bibendum. Curabitur faucibus ultrices molestie. Mauris eget velit eros. Integer ullamcorper odio non metus iaculis facilisis. Maecenas sit amet dui lacus. Morbi sit amet velit nisi, vel interdum felis. Suspendisse id scelerisque dui. Ut ullamcorper mauris vitae justo tincidunt ut tempor nisl viverra. Donec porttitor, nibh at ullamcorper bibendum, odio sem porta risus, vel eleifend ante sem eu mi. In dictum erat sed ipsum feugiat tincidunt. Donec ut porttitor ipsum. Cras feugiat bibendum accumsan.</p> <p>Mauris nisi nisi, suscipit eu varius eget, mollis eget ligula. Pellentesque auctor, enim eget pretium venenatis, arcu sapien dapibus neque, sed scelerisque dui justo eu purus. Sed at quam et ante volutpat imperdiet. Nam eu sapien magna, egestas congue purus. Nam elementum cursus eros nec blandit. Ut ut augue et tortor interdum mattis. Fusce pellentesque nunc eu purus dapibus auctor. Etiam risus leo, congue et placerat at, bibendum facilisis orci. Vestibulum a erat a odio facilisis dapibus. Etiam laoreet pellentesque lacinia. Maecenas tincidunt adipiscing blandit. Suspendisse aliquet ornare sem, sit amet luctus magna sodales quis.</p> </div> </div> </div> </body>
y el css
Código HTML :
#total{
display: block;
margin: auto;
width: 950px;
}
#header{
background-color: #036;
display: block;
margin: auto;
width: 930px;
padding:10px;
}
#content{
background-color: #CCC;
display: block;
margin: auto;
width: 930px;
padding:10px;
}
#footer{background-color: #036;
display: block;
margin: auto;
width: 930px;
padding:10px;}
#fondoh{
background-color: #036;
display: block;
width: 100%;
height:100px;
}
#fondof{
background-color: #036;
display: block;
width: 100%;
height:100px;
}Agradezco la ayuda.
