martes, 1 de septiembre de 2009

CSS: Hoja estilo para maquetación básica.

Este es el CSS para maquetar una página con encabezado, tres columnas y un pie de página.

*
{
border: 0;
margin: 0;
}

body
{
font-family: Georgia,Arial, Helvetica, sans-serif;
font-size: medium;
}

/* Si el ancho cambia, hay que reajustar los porcentajes de
la columna central. */
.container
{
width: 800px;
margin: 0 auto;
border:0.01em dotted blue;
}

.header
{
width: 100%;
height: 120px;
background-color: Aqua;
border:0.01em dotted blue;
clear:both;
}

.leftColumn
{
width: 24%;
min-height: 400px;
border:0.01em dotted blue;
float:left;
}

.mainColumn
{
width: 51.2%; /* Ajustar si ancho de Container cambia. */
border:0.01em dotted blue;
min-height: 400px;
float:left;
}

.rightColumn
{
width: 24%;
border:0.01em dotted blue;
min-height: 400px;
float:right;
}

.footer
{
width:100%;
height:50px;
}

#separador
{
clear:both;
}

La estructura básica sería:

<div class="container">
<div class="header">
</div>
<div class="leftColumn">
</div>
<div class="mainColumn">
</div>
<div class="rightColumn">
</div>
<div id="separador">
</div>
<div class="footer">
</div>
</div>

No hay comentarios: