Nos han preguntado en alguna ocasión cómo hacer para que la cabecera o pie de página se expanda para ocupar todo el ancho de la pantalla, tal como tenemos en el diseño actual de DesarrolloWeb.com, trabajando con el framework CSS Blueprint. En este artículo vamos a realuzar una práctica de diseño de un layout con esas características.

Para ello, tal como nos solicitan, vamos a utilizar el Framework CSS Blueprint, que nos ofrece una serie de clases muy útiles para maquetar con CSS utilizando una rejilla de 24 columnas, que nos ayuda a posicionar los elementos en la página. Para el que le interese, tenemos a disposición de los lectores un completo Manual de Blueprint CSS, que deberíamos leer si no estamos familiarizados con este interesante e útil framework para la maquetación web.

Antes de ponernos manos a la obra, dejamos un enlace para ver el objetivo que pretendemos realizar en este ejercicio.

Layout fluido en Blueprint

Queremos empezar explicando qué es un layout fluido. No es más que uno que adapta su anchura a aquella que tenga la ventana del navegador en cada momento. Generalmente con Blueprint diseñamos plantillas con una anchura predeterminada de 950 píxeles, por lo que todos los contenidos se adaptan a ese espacio disponible. En las páginas fluidas no ocurre esto. Por el contrario, la anchura de página será variable y corresponderá con aquella que tenga el usuario en su ventana del navegador.

Existen complementos para el framework Blueprint para permitir hacer páginas fluidas, como el plugin que podemos encontrar en Blueprint Liquid. Ahora bien, nosotros en este caso no queremos hacer justamente una página fluida, sino sólo una de las partes de la página, como la cabecera o pie. Y además, ni siquiera queremos hacer esa parte de la página realmente fluída, sino que simplemente deseamos que el fondo de la misma se adapte a toda la anchura disponible en la ventana, pero los contenidos colocados en la anchura disponible en Blueprint.

Por ello, vamos a utilizar simplemente una sencilla técnica que nos sirva para hacer que el fondo de la cabecera o el pie se adapte a la ventana del navegador.

Varios "containers", para cada uno de los elementos

Como debemos saber, si hemos seguido el Manual de Blueprint, en este framework colocamos un contenedor principal y luego dentro de él, colocamos todas las capas que queremos situar en la rejilla, con diversas clases para definir sus dimensiones y colocación. La técnica que vamos a contar ahora trata simplemente de crear varios contenedores en lugar de uno solo.

Una capa que hace de contenedor en Blueprint (a la que le hemos colocado la clase CSS "container") tiene definida una anchura, que son los 950 píxeles disponibles en los layouts predeterminados de Blueprint. Si para definir un elemento con todo el ancho disponible lo colocamos dentro de un contenedor, no podrá tener más que 950 píxeles de anchura. Por tanto, tenemos que hacer que ese contenedor esté incluido dentro de otra capa. Esa capa podrá ser fluida (para ello simplemente no le vamos a indicar ninguna anchura) y podremos asignarle un color de fondo como queramos, que se adaptará a las dimensiones de la ventana. Luego colocaremos dentro un container para que los elementos que maquetemos dentro puedan utilizar las clases de Blueprint.

El esquema en capas sería más o menos como este:

<div id="cabecera">
   <div class="container">
      <div class="span-10 append-3">
         Logotipo!!
      </div>
      <div class="span-11 last">
         Buscador...................................
      </div>
   </div>
</div>

Como vemos, tenemos un DIV con id="cabecera" y dentro un container. A continuación en el código vemos, dentro del contaniner, que se pueden colocar todas las clases de Blueprint que necesitemos para definir y posicionar los elementos que irían dentro.

Ahora, esa capa con id="cabecera" está fuera de un container (contiene un container, pero no está afectada por la anchura de la class container), por lo que se adaptará a las dimensiones de la ventana del navegador. Para que se note esto, podremos asignarle a la cabecera un color de fondo, o cualquier otro estilo CSS que deseemos.

#cabecera{
   background-color: #333;
   color: #fff;
}

Para continuar, después de la cabecera, colocaremos el cuerpo de la página. El cuerpo sí deseamos que se acople todo a los 950 píxeles, y que no tenga el mismo fondo de la cabecera. Por lo que tendremos que cerrar el container de la cabecera y la capa a la que habíamos colocado id="cabecera". Por ello, nos veremos obligados a colocar el cuerpo en un nuevo contenedor.

<div class="container">
   <div class="span-5">
      Columna de contenidos 1
   </div>
   <div class="span-12">
      Cuerpo principal
   </div>
   <div class="span-7 last">
      Lateral
   </div>
</div>

Al final del todo, si deseamos hacer un pie con también un fondo fluido, tendremos que colocarlo en otro contenedor independiente del cuerpo y hacer como lo que hicimos en la cabecera, que hacemos una capa más general que el propio container para aplicarle un fondo y que sea fluido.

<div id="pie">
   <div class="container">
      <div class="span-21">
         Enlaces del pie..
      </div>
      <div class="span-3 last">
         logo en pequeño
      </div>
   </div>
</div>

En los estilos CSS de la capa con id="pie", colocaremos el fondo para nuestro pie, que se adaptará a todo el ancho disponible.

#pie{
   background-color: #300;
   color: #fff;
}

Todo el código completo para hacer cabecera y pie fluidos en Blueprint

Podemos ver a continuación todo el código HTML y CSS necesario para crear este esquema de página con cabecera y pie fluidos.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Ejemplo de Blueprint con Cabecera y pie fluidos</title>
   <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
   <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">   
   <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
   <style type="text/css">
      #cabecera{
         background-color: #333;
         color: #fff;
      }
      #pie{
         background-color: #300;
         color: #fff;
      }
   </style>
</head>
<body>
   <div id="cabecera">
      <div class="container">
         <div class="span-10 append-3">
            Logotipo!!
         </div>
         <div class="span-11 last">
            Buscador...................................
         </div>
      </div>
   </div>
   <div class="container">
      <div class="span-5">
         Columna de contenidos 1
      </div>
      <div class="span-12">
         Cuerpo principal
      </div>
      <div class="span-7 last">
         Lateral
      </div>
   </div>
   <div id="pie">
      <div class="container">
         <div class="span-21">
            Enlaces del pie..
         </div>
         <div class="span-3 last">
            logo en pequeño
         </div>
      </div>
   </div>
</body>
</html>

Si lo deseamos, podemos ver este ejemplo en marcha en una página aparte.

Además, hemos preparado una página adicional, basada en este mismo layout, pero a la que le hemos incluido algo de estilos CSS para las cajas, algo más de texto y un poco de color. Podemos ver el ejemplo en marcha con texto y color.