Adición de imágenes de fondo tiene 2 inconvenientes:
cada vez que quiera cambiar el color de su cabecera tiene que abrir el Photoshop y cambiar el color de allí y luego cambiar de nuevo en su CSS.
Ahora quiere que el color de fondo del encabezado se extienda por la página, pero ¿y si también quiere hacer eso con el pie de página?
La solución más sencilla es la siguiente:
(que no sólo crean una forma fácil de estirar el color a través de la página, pudiendo utilizar diferentes colores en todos los contenidos de encabezado y pie de página, sino también salva a sí mismo desde el problema de doble margen de IE (cuando se utiliza el ancho y el margen en los mismos elementos)
index.html:.
<html>
<body id="body">
<div id="header">
<div class="container">
<!-- header's content here -->
</div><!-- .container -->
</div><!-- #header -->
<div id="content">
<div class="container">
<!-- main content here -->
<div id="footer">
<div class="container">
<!-- footer's content here -->
</div><!-- .container -->
</div><!-- #footer -->
</body>
</html>
style.css:
.container {
margin: 0 auto;
overflow: hidden;
padding: 0 15px;
width: 960px;
}
#header {
background: #EEE;
}
#content {
background-color: #F9F9F9;
}
#footer {
background-color: #333;
color: #BBB;
clear: both;
}
En este ejemplo, el div.container centros de los elementos y también les da un ancho y el color de fondo puede extenderse a través de la página porque # header, #content y #footer no tienen el ancho . Y en el futuro simplemente aplique margen y relleno a los divs dentro de .container, y ahorrará muchos problemas con IE en el futuro.
Esta es una gran respuesta. Sin embargo, aquí hay un truco que puede atrapar a algunas personas, ¡sin duda me atrapó! Un colega mío estaba haciendo algunas depuraciones y necesitaba averiguar qué diseño se estaba utilizando en varias partes de nuestra aplicación web. La forma más simple de resolver esto fue poner un comentario en la parte superior del archivo de plantilla ... antes de la declaración DOCTYPE. Lo adivinaste: el sitio se procesaba perfectamente en Firefox y la única diferencia notable en IE era que la barra superior no se estiraba del todo en toda la página. La solución era asegurarse de que no había nada antes del DOCTYPE. – JamesG