Encabezado estirable como StackExchange

¿Cómo puedo hacer con CSS un diseño de sitio como webmaster.stackexchange.com que el sitio es el centro y el encabezado y pie de página es tan largo como la resolución de la ventana del usuario, mientras que el contenido está en el centro de la imagen de verificación si no me encuentras y GRACIAS TÚ 🙂 por tu ayuda.

http://sofes.miximages.com/header//

Haga clic con el botón derecho y vea la fuente: nadie le prohíbe eso.

Pero, en resumen, una de las formas posibles (tal vez no sea la mejor), hará que el contenido se centre en:

HTML

 

CSS

 #page-wrapper {width: 980px; margin: 0 auto; text-align: left;} #page-body {position: absolute; width: 980px; top: 0;} 

Es posible que necesite utilizar un enfoque un poco diferente si desea tener imágenes de fondo en el pie de página y el encabezado para cubrir todo el ancho de la ventana.

Simplemente haga una imagen 1×200 (delgada y alta) que contenga un degradado, luego use este CSS:

 #header-bg { background: blue url(/my/stretchy/image.png) repeat-x top left; text-align: center; } #header-content { width: 800px; margin: 0 auto; text-align: left; } 
blah blah

Básicamente, solo tienes que colocarlo en mosaico horizontalmente.

 
My Epic Top Bar
All your lovely page junk goes here
html, body { margin:0; padding:0; } #page { margin: 0 auto; width:500px; margin-top:40px; background-color:blue; } #topBar { width:100%; height:40px; background-color:#ccc; position:absolute; top:0; left:0; }

El margin: 0 auto on #page establece el margen superior / inferior en 0 y el margen izquierdo / derecho en automático, centrándolo ya que tiene un ancho fijo de 500 px. Tenga en cuenta que necesita mantener el margen superior igual al alto de #topBar para que #topBar no cubra ninguna página #

La forma más común de navegador cruzado es como se ha mencionado: ajuste su contenido de encabezado de ancho fijo con un contenedor de ancho automático.

Para los navegadores que lo admiten, puede utilizar: before y: after para obtener un encabezado completo sin el div adicional: http://css-tricks.com/9443-full-browser-width-bars/