Niquelao

Layout a tres columnas y marcado… "el justo" 4 de Junio de 2006, por Rumoroso

Cuando se pretende estructurar el contenido de un documento web, se debe evitar por todos los medios el tener presente cual va a ser el diseño visual, y en especial el layout. Esto es fundamental si se quiere conseguir un contenido estructurado de forma correcta desde el punto de vista del flujo de la información, así como un marcado semántico y un código óptimo. Para la consecución de este objetivo se ha de utilizar como premisa indiscutible el uso de los estándares del W3C, evitando el marcado extra cuya finalidad sea servir a la hoja de estilos para presentación.

Caso desarrollado.- El contenido del documento se estructura en tres áreas o grupos funcionales: contenido específico, menú de navegación principal y un área de carácter transversal al sitio (relacionada bien con el documento actual, como podrían ser noticias de la sección, bien con el sitio web o portal, como por ejemplo enlaces de interés relacionados con la temática del portal o un conjunto de banners).

La organización del contenido en el código se debe establecer en función de su nivel de especificidad y relevancia con respecto a la página actual. Así, el grupo de información específico del documento debería aparecer primero en el código, seguido del área de caracter transversal si esta se relaciona específicamente con la información anterior y varía en función del contenido. A continuación vendría el menú de navegación principal. En el caso de que la información transversal sea común a todo el sitio y no tenga caracter específico en cada sección, esta se dispondrá al final precedida por el menú. En todos los casos se deberían crear enlaces cuya finalidad sea la de poder moverse por el documento saltando entre cada uno de los tres grupos para ir al siguiente o al anterior.

Tratando de conseguir un código lo más limpio y óptimo, el planteamiento del mismo es el siguiente:

<div id="cabecera">…</div>
<div id="contenido1">Contenido principal…</div>
<div id="contenido2">…</div>
<div id="contenido3">…</div>
<div id="pie">…</div>

Se han añadido una cabecera y un pie al ser esta una de las situaciones más comunes que se puede dar. Se emplean contenedores genéricos de bloque (div) para mostrar el ejemplo. En el caso de que estos incluyesen un único bloque (por ejemplo, una lísta), no serían necesarios, pues el identificador se podría aplicar directamente sobre él. Por el afán de conseguir un código límpio y óptimo, no se emplean contenedores que agrupen a uno o más de estos.

El marcado aplicado y su organización se ha mantenido intacto entre los ejemplos. Los estilos que se han aplicado de forma genérica se han incluido en una css común. El conjunto de estilos específicos para cada uno se ha incluido dentro de la cabecera del documento para facilitar su revisión. En todos los casos se ha mantenido el bloque de contenido principal con un comportamiento fluido.

Se ha utilizado el selector universal para aplicar márgenes a los primeros descendientes del bloque llamado “contenido1″. Dado que no todos los navegadores reconocen correctamente el pseudoelemento “:first-child“, se ha recurrido a aplicar las propiedades a todos los descendientes del bloque y luego anulárselas a todos los descendientes cuyo padre sea descendiente del mismo. Se pueden emplear otros métodos, como por ejemplo el uso de el pseudoelemento anteriormente citado junto a comentarios condicionales para Internet Explorer (IE). Otra forma hubiera sido crear un bloque dentro de “contenido1 ” y aplicar los estilos necesarios sobre este. Se ha evitado este método para conseguir un marcado más límpio y sin la presencia de elementos cuya finalidad sea servir en la maquetación. En realidad, la/s propiedad/es que se podrían ver modificadas para los descendientes son los márgenes laterales, propiedades fácilmente controlables, con lo que la solución propuesta se considera la más optima para este caso.

Es importante tener en cuenta qué propiedades y atributos se han declarado de cara a la aparición de posibles efectos inesperados al aplicar estilos. Por ejemplo, en IE, cuando se incluyen listas dentro de elementos flotados y posicionados en relativo, no se muestran los estilos aplicados al fondo ni los colores aplicados a los bordes (esto se puede subsanar posicionándolas en relativo).

La idea es conseguir un layout a tres columnas con un orden determinado en función de las necesidades del sitio.

Los diferentes layouts se muestran organizados en función del orden de los bloques y de la característica fluida de los mismos. La fluidez de los bloques se consigue definiendo su ancho en porcentaje (siendo para todos los ejemplos un 20% del total de su contenedor) y la riguidez en unidades absolutas (siendo en todos los ejemplos 150px). Así mismo, en lugar de utilizar unidades absolutas, se podrían utilizar unidades relativas (em). Todo dependerá de las necesidades particulares de cada caso:

Orden en el layout 1 2 3

Orden en el layout 1 3 2

Orden en el layout 2 1 3

Orden en el layout 2 3 1

Orden en el layout 3 1 2

Orden en el layout 3 2 1

En alguno de los casos y para algún navegador (como puede ser Internet Explorer) pudiera darse un comportamiento anómalo al redimensionar la ventana. Básicamente, el comportamiento incorrecto se debe a que aunque se le indique al contenedor cuál debe ser su ancho, al rediemensionar, el texto influye empujando ligéramente los bordes del mismo. Si el conjunto de bloques han de ocupar el 100% del contenedor, podría ocurrir que uno de los que tenga dimensiones relativas, por el efecto antes mencionado, ocupase algo más de lo que debe, empujando a los demás, los cuales, al estar flotados y no caber, saltan hacia abajo. Para darle solución se puede declarar una dimensión en uno de ellos ligéramente inferior a la ideal (por ejemplo, 19.9% en lugar de 20%).

Layout a tres columnas y marcado… "el justo"

Categoría: CSS

1 comentario

Norwin Galeano 28 de Agosto de 2006: Muy bueno. Este articulo debe de ser de mucha utilidad para los que inician a maquetar sus páginas con divs y tambien para los que aún tenemos algunos problemas…