Diseño, Tutoriales | 14 de octubre de 2014

Cómo crear una cabecera fija con HTML y CSS

Hay una versión actualizada de este tutorial en formato video y haciendo la cabecera responsive, puedes encontrarlo en Cómo crear una cabecera fija responsive con HTML y CSS.

En el artículo de hoy quiero mostrarte de qué manera puedes crear una cabecera fija para tu sitio, tal como la que puedes ver en este mismo sitio. Me refiero a una cabecera que se queda pegada e la parte superior de la ventana, incluso aunque hagas scroll hacia abajo.

Para comprender este tutorial por completo necesitarás un entendimiento básico de HTML y CSS, si aún no conoces de estos lenguajes, te recomiendo mi curso «Diseño web: HTML y CSS desde cero«.

Bueno, basta de introducción, vamos al tutorial 😉

HTML Base

Lo primero, por supuesto será maquetar el HTML que compondrá nuestra página. Para efectos de este ejemplo crearemos una cabecera, que contendrá el nombre del sitio y el menú de navegación. Luego tendremos el contenido, que tendrá un título, una imagen y varios párrafos de texto, para finalizar con el pie de página.

El código para esto sería el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<title>Cabecera fija</title>

        <link rel="stylesheet" href="style.css">
</head>

<body>
	
	<header id="main-header">
		
		<a id="logo-header" href="#">
			<span class="site-name">FranciscoAMK</span>
			<span class="site-desc">Diseño web / WordPress / Tutoriales</span>
		</a> <!-- / #logo-header -->

		<nav>
			<ul>
				<li><a href="#">Inicio</a></li>
				<li><a href="#">Acerca de</a></li>
				<li><a href="#">Contacto</a></li>
			</ul>
		</nav><!-- / nav -->

	</header><!-- / #main-header -->

	
	<section id="main-content">
	
		<article>
			<header>
				<h1>Esta es una página con cabecera fija</h1>
			</header>
			
			<img src="http://placekitten.com/800/250" alt="Gatito" />
			
			<div class="content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

			</div>
			
		</article> <!-- /article -->
	
	</section> <!-- / #main-content -->

	
	
	<footer id="main-footer">
		<p>&copy; 2014 <a href="http://FranciscoAMK.com">FranciscoAMK.com</a></p>
	</footer> <!-- / #main-footer -->

	
</body>
</html>

Con esto estaríamos obteniendo algo más o menos como esto:

html-plano

Estilos generales

Ahora es momento de aplicar algunos estilos generales para que la página tenga algo de diseño. Usaremos CSS en el archivo style.css. Este es el código que usaremos para definir los estilos generales:

body {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	color: #666;
	background: #f2f2f2; 
	font-size: 1em;
	line-height: 1.5em;
}

h1 {
	font-size: 2.3em;
	line-height: 1.3em;
	margin: 15px 0;
	text-align: center;
	font-weight: 300;
}

p {
	margin: 0 0 1.5em 0;
}

img {
	max-width: 100%;
	height: auto;
}

Estas líneas de CSS las usaremos para dar estilo a la cabecera:

#main-header {
	background: #333;
	color: white;
	height: 80px;
}	
	#main-header a {
		color: white;
	}

/*
 * Logo
 */
#logo-header {
	float: left;
	padding: 15px 0 0 20px;
	text-decoration: none;
}
	#logo-header:hover {
		color: #0b76a6;
	}
	
	#logo-header .site-name {
		display: block;
		font-weight: 700;
		font-size: 1.2em;
	}
	
	#logo-header .site-desc {
		display: block;
		font-weight: 300;
		font-size: 0.8em;
		color: #999;
	}
	

/*
 * Navegación
 */
nav {
	float: right;
}
	nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
		padding-right: 20px;
	}
	
		nav ul li {
			display: inline-block;
			line-height: 80px;
		}
			
			nav ul li a {
				display: block;
				padding: 0 10px;
				text-decoration: none;
			}
			
				nav ul li a:hover {
					background: #0b76a6;
				}

Con estos estilos aplicaremos diseño al contenido:

#main-content {
	background: white;
	width: 90%;
	max-width: 800px;
	margin: 20px auto;
	box-shadow: 0 0 10px rgba(0,0,0,.1);
}

	#main-content header,
	#main-content .content {
		padding: 40px;
	}

Y por último, con esto estilizaremos el pie de página:

#main-footer {
	background: #333;
	color: white;
	text-align: center;
	padding: 20px;
	margin-top: 40px;
}
	#main-footer p {
		margin: 0;
	}
	
	#main-footer a {
		color: white;
	}

Hasta ahora la página se ve bastante bien, pero aún no hacemos que la cabecera sea estática, pero tranquilo ya llegaremos a ello, recuerda que soy diseñador y me gusta que las cosas se vean bien 😉

Así está la página actualmente:

html-con-estilos

Fijando la cabecera

Ok, llegó el momento de fijar la cabecera, para ello, agregaremos algunas propiedades al selector #main-header:

#main-header {
	background: #333;
	color: white;
	height: 80px;
	
	width: 100%; /* hacemos que la cabecera ocupe el ancho completo de la página */
	left: 0; /* Posicionamos la cabecera al lado izquierdo */
	top: 0; /* Posicionamos la cabecera pegada arriba */
	position: fixed; /* Hacemos que la cabecera tenga una posición fija */
}

Con esto ya conseguimos que la cabecera se fije en la parte superior, aunque lamentablemente queda cubriendo el contenido.

Esto ocurre ya que cuando usamos la propiedad «position» con el valor «fixed» el elemento al cual aplicamos este estilo se sale del flujo natural del contenido y se posiciona de manera fija de acuerdo a las coordenadas «left«, «top«, «right» y «bottom» por encima del resto de los elementos.

Así está quedando actualmente:

cabecera-fija

Solucionar esto es bien sencillo, solo debemos añadir al elemento  body, un padding o relleno superior igual a la altura de la cabecera. Entonces quedaría así:

body {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif;
	color: #666;
	background: #f2f2f2; 
	font-size: 1em;
	line-height: 1.5em;
	
	padding-top: 80px; /* Relleno superior igual a la altura de la cabecera*/
}

Con esto conseguimos que la cabecera siga fija, pero que no cubra el contenido 🙂

Mira un ejemplo completamente funcional a continuación. Puedes mirar el código fuente, crear una copia y editarlo a tu antojo.

See the Pen nmBog by Francisco Aguilera G. (@FranciscoAMK) on CodePen.9272

El código que vimos en este tutorial debería funcionar bien para todos los navegadores modernos. Está probado en las últimas versiones de Chrome, Safari, Firefox y Ópera en mac.

Cuéntame en los comentarios si te resulta interesante este tema para seguir publicando más material de este tipo.

Un abrazo,
@FranciscoAMK

::

Crédito de las imágenes de gatitos.