La típica distribución de una página web
Desarrollo de software, Web October 13th, 2008
Distribución típica de una página web
Esta es la distribución típica de una página web. Esta compuesta por los siguientes elementos.
- Cabecera.
- Columna izquierda.
- Contenido central.
- Columna derecha.
- Pies.
De acuerdo con los estándares actuales, es preferible utilizar divs en lugar de tables (donde sea humanamente posible) ya que el documento HTML debería encargarse de definir el contenido mientras que a través de la definición de estilos (CSS) se debería establecer la presentación, es decir, como se ordena y distribuye el contenido a lo largo y ancho de la página web.
Como lo he mencionado en otras ocasiones para mi CSS es todavía una ciencia oculta, hay muchas cosas que frecuentemente se me enrredan cuando utilizo CSS. Sin embargo ultimamente lo he estado utilizando un poco mas y he adquirido mas práctica y cada vez me siento mas a gusto con utilizándolo.
Ahora implementar este diseño es algo sencillo para mi ... bueno, casi.
Parto de la siguiente estructura de contenido.
<div id='pagina'>
<div id='cabecera'>
Cabecera <br />
</div>
<div id='colizq'>
Columna Izquierda <br />
</div>
<div id='contenido'>
Contenido <br />
</div>
<div id='colder'>
Columna Derecha <br />
</div>
<div id='pies'>
Pies
</div>
</div>
El resultado inicial es claramente inaceptable.
Resultado #1
Agregamos un poco de estilo para enrriquecer a la presentación.
#pagina
{
width: 1024px;
margin: auto;
background-color: pink;
}
Con esto le damos un ancho suficiente para visualizar correctamente el contenido del sitio y lo centramos para que se vea bonito en monitores mas anchos.
#cabecera
{
padding: 5px;
background-color: orange;
}
#colizq
{
padding: 5px;
background-color: yellow;
width: 300px;
}
#contenido
{
padding: 5px;
background-color: blue;
width: 394px;
}
#colder
{
padding: 5px;
background-color: red;
width: 300px;
}
#pies
{
padding: 5px;
background-color: green;
}
Les damos colores diferentes a cada una de las partes para diferenciarlas, un padding para separar un poco el borde del contenido de cada uno de los divs y en el caso de la parte central, el ancho específico que se requiera.
Resultado #2
Ya tiene cara de algo, pero no necesariamente lo que estamos buscando. Es necesario ordenar las columnas izquirda, centro y derecha para que se ubiquen de la forma como sus mismos nombres lo indican.
En CSS esto equivale a decirle a los divs que floten (float) en la dirección que queramos.
#colizq
{
float: left;
padding: 5px;
background-color: yellow;
width: 300px;
}
#contenido
{
float: left;
padding: 5px;
background-color: blue;
width: 394px;
}
#colder
{
float: left;
padding: 5px;
background-color: red;
width: 300px;
}
El atributo adicionado les indica a los divs que vayan flotando y arreglándose a la izquierda cada vez que son agregados a la presentación.
Resultado #3
En algunos casos, cuando continúan mas divs y necesitamos que se alineen en una la siguiente fila, es necesario indicarle a un div específico que no permita que otros divs floten a uno/ninguno de sus lados. Para esto se utiliza el atributo clear (left, right, none, both).
Para el caso de la sección de los pies se complementaría de la siguiente manera.
#pies
{
padding: 5px;
background-color: green;
clear: left;
}
Hasta ahí todo es muy fácil: un pequeño paso para el lector, pero hace un año fue un gran paso para mi. Pero aún me queda una duda por solucionar.
Qué pasa cuando las columnas -patriotas- tienen altos de diferente longitud ?
Resultado #4.
Se nota ese sobrante rosado bajo las columnas izquierda y derecha ?
Si revisamos las clases CSS, la rosada es la #pagina, esto significa que #colizq y #colder no están ocupando el mismo espacio vertical que #contenido hasta #pies y está dejando ver la capa inmediatamente inferior.
Para los "diseños" que comúnmente utilizo esto no es un problema ya que me gustan los diseños minimalistas y el blanco es mi fondo preferido. Pero que va a pasar el día en que necesite que una columna sea de un fondo diferente del resto ?
Mi pregunta es: cómo hago para que las columnas ocupen la totalidad del espacio vertical disponible entre #cabecera y #pies ? La duda persiste.
Enlace: código de demostración.
Loading ...
