Cabecera líquida - CSS

A la hora de maquetar nuestra página web, tenemos dos opciones con respecto al header o cabecera. Una es la cabecera líquida y la otra es la cabecera fija.

La líquida, a diferencia de la fija, se adaptará a la resolución de la pantalla del usuario que está visualizando nuestro sitio.

(Blogger.com utiliza cabecera líquida)

Maquetación con Cabecera Fija

Tenemos un div mayor como contenedor de todo, allí dentro estará la cabecera, el menú, el contenido, el pie de página y las cajas que querramos meterle.

Código XHTML

Maquetación con Cabecera Líquida

A diferencia del anterior, aquí el contenedor mayor no contendrá a la cabecera (incluso puede no contener el menú). La cabecera estará fuera.

Código XHTML

Nombre del Sitio


Slogan del Sitio



Inicio
Quiénes Somos
Servicios





Bienvenido

Párrafo ... 


Pie de pagina

Código CSS

* 
{
 margin:0;padding:0;
}

body 
{
 font-family: Arial, Helvetica, sans-serif;
}
h1,h3
{
 margin-left:10px;
}

#cabecera 
{
 height:75px;color:#fff;background:#036;
}

#contenido 
{
 width:770px;
 margin:0 auto;
 text-align:justify;
}
#pie 
{
 text-align:center;
 border-top:1px solid #eee;
 margin-top:20px;
}