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;
}

Padding o margin

Algo con lo que solía confundir eran el empleo de los atributos padding y margin. Una imagen vale más que mil palabras, así que la siguiente imagen muestra qué es cuál.

Como podés ver, los márgenes son el espacio que hay entre la capa y cualquier objeto adyacente. El (o padding) es el espacio entre el borde de la capa y el contenido. (El borde es la línea que delimita la capa)

MARGIN

Para establecer los márgenes mediante código CSS, exisiten distintas formas y es importante conocerlas todas para poder leer fácilmente el código css e interpretarlo. Por defecto, cada capa tiene 4 márgenes que vienen con un valor 0.

/*Aplicando los 4 márgenes de la forma natural*/
#capa    {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
/*Aplicando los 4 márgenes de forma simplificada*/
#capa    {
margin: 10px;
}
/*Cuando el márgen de arriba es igual al márgen de abajo, y el márgen de la derecha es igual al márgen de la izquierda, se puede usar el siguiente formato, tomando en cuenta que el primer valor corresponde a los de arriba y abajo y el segundo valor a los de la derecha e izquierda*/
#capa   {
margin: 10px 5px;
}
/*Cuando los valores de la derecha e izquierda son los mismos y únicamente varían el de arriba con el de abajo, se procede con el siguiente formato, tomando en cuenta que el primer valor corresponde al márgen de arriba, el segundo a los de la derecha e izquierda y el tercero al de abajo*/
#capa    {
margin: 5px 15px 2px;
}
/*Cuando todos los márgenes son distintos uno del otro, entonces se procede a colocar cada valor, tomando en cuenta que el primer valor corresponde al de arriba, segundo: derecha, tercero: abajo y cuarto: izquierda (tal como las manecillas del reloj) */
#capa    {
margin: 3px 10px 6px 8px;
}

PADDING

Al igual que el MARGIN, se tiene 4 rellenos y por defecto vienen en valor 0. El código css se establece de la misma manera.

IMPORTANTE

El ancho real y el alto real de una capa se ve directamente afectado con los valores (de width y height) de sus márgenes, rellenos y bordes.

Ancho de una capa con todos sus atributos:

Ancho + margen izq. + margen der. + relleno izq. + relleno der. + borde izq. + borde der.

Esto es importante tomar en cuenta ya que afectará directamente al diseño de la página, habrá un desbordamiento.

HaPPy CoDiNg =)