¿Estás buscando la manera de mejorar la presentación de tu sitio web y lograr que tu contenido destaque? Centrar el contenido con un encabezado y pie de página de ancho completo es una excelente opción para lograrlo. En este artículo te explicaremos cómo puedes lograrlo de manera sencilla y efectiva.¡Sigue leyendo y descubre cómo darle un toque de profesionalismo y elegancia a tu sitio web!
En este tutorial, vamos a cubrir cómo crear un encabezado y pie de página de ancho completo para sus páginas web. También vamos a repasar cómo hacer esto manteniendo su contenido centrado en la página. Si bien hay algunas formas de lograr esto, creo que esta es una de las formas más simples de implementar esta solución.
¡Dame el código!
Sorprendentemente, solo hay unas pocas líneas de CSS que deben aplicarse al encabezado y al pie de página. Como mínimo, debemos establecer el ancho mínimo al 100 % y hacer flotar los elementos hacia la izquierda.
Si bien el flotante no es obligatorio, será necesario si planea contener elementos en su encabezado o pie de página que también tendrán aplicada la propiedad flotante, ya que la propiedad flotante saca los elementos de su flujo normal.
#header, #footer {
float:left;
padding:15px;
min-width:100%;
}Estas tres líneas de código esencialmente preparan el encabezado y el pie de página para abarcar el ancho de la página. Sin embargo, en este tutorial, también le mostraremos cómo centrar su contenido dentro del encabezado, la sección de contenido y el pie de página. El código completo que se muestra en la parte inferior de este tutorial producirá una página similar a la siguiente imagen.
Ejemplo completo
En este ejemplo, estamos utilizando algunas técnicas para centrar el contenido dentro del encabezado, la sección de contenido principal y el pie de página. Lo primero que notará es que dentro del encabezado y el pie de página, tenemos un headerContent y footerContent par de elementos div.
Estas secciones contendrán las imágenes, el texto y otros elementos que normalmente se encuentran en la sección de encabezado y pie de página de una página web. Para centrar esos elementos en la página, todo lo que tenemos que hacer es asignar un ancho y un estilo de margen.
Por ejemplo… #element {width:940px;margin:0 auto;}. Una vez que agregue ancho al elemento y establezca el margen izquierdo y derecho en automático, el navegador centrará el elemento en la página. Además de centrar el contenido, también estamos utilizando una técnica para empujar el pie de página hacia abajo hasta el final de la página.
Si no desea empujar el pie de página hacia abajo, elimine la configuración de altura del elemento HTML y del cuerpo, así como la altura mínima del div con una identificación de wrapper. Este enfoque puede no funcionar bien con IE6, así que tenga cuidado. El resto del código que se muestra a continuación debe explicarse por sí mismo.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {height: 100%;font-size:1.25em;margin: 0;background:#efefef;}
#wrapper {min-height:100%;margin: 0 auto -75px;}
#header {background-color:#104ba9;min-width:100%;height:100px;float:left}
#headerContent {width:940px;margin:0 auto;padding:15px;font-size:1.5em;color:white;}
#separator {height:60px;}
#content {margin:0 auto;width:940px;padding:15px;}
#footer {background:#6a93d4;min-width:100%;height:75px;float:left}
#footerContent {margin: 0 auto;width:940px;padding:15px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="headerContent">Amazing Header!</div>
</div>
<div id="content">
<p>Your cool website content here!</p>
</div>
<div id="separator"></div>
</div>
<div id="footer">
<div id="footerContent">Footer Area</div>
</div>
</body>
</html>