Estructura y maquetacion con css
1.Introducción
Durante años los diseñadores Web recurrieron al uso de tablas para la colocación de los diferentes elementos de una página. Esta fue una buena solución que permitió maquetar páginas que en apariencia estaban formadas por varias columnas y otros montajes complejos, este sistema utilizaba tablas anidadas que a muchos se les atragantaban y no conseguían entenderlas, además su estructura no era clara y hacía que los robots de los buscadores no las analizarán correctamente.
Algunos utilizábamos las capas para colocar los elementos de la página con mayor precisión y en combinación con las tablas realizábamos nuestros diseños. También las utilizábamos para mostrar o ocultar elementos y otras cuestiones. Esto generaba páginas de estructura compleja dificiles de entender para cualquiera que viera el código y estuviera aprendiendo.
Con las nuevas directrices de accesibilidad Web este tipo de maquetación esta desaprobado y se recomienda el uso de capas (etiqueta div) para componer o maquetar una página Web creando una estructura lógica de la página de fácil seguimiento por cualquiera incluidos los robots. Este “nuevo” sistema hizo que cada diseñador se las apañara como mejor le pareció para conseguir los resultados deseados y eso dió lugar a que para lograr el mismo resultado hubiera varias soluciones que se encuentran por doquier en Internet. Pero a la hora de enseñar a alguien sin conocimientos previos de capas y CSS como hacer esto no se pueden usar varios métodos (liaría más que aclarar nada), además los diferentes códigos que aparecen van solucionando los problemas de compatibilidad CSS de los diferentes navegadores sobre la marcha creando mucho código confuso que no es aplicable en todas las circunstancias o aún siéndolo es dificil discernir lo fundamental de lo accesorio.
Sin haber descubierto nada nuevo ni inventado nada lo que voy a tratar de hacer aquí es exponer un método universal (que funcione en todos los navegadores más utilizados ) que utilice el menos y más simple código posible y explicar el proceso de la manera más sencilla para mi y espero que para todos los que lean estos apuntes.
2 Las capas con CSS.
Capa fue el nombre que se empezó a utilizar para denominar a los elementos creados con la etiqueta <div> usados para colocar en la página Web cualquier otro elemento (imagen,tabla,párrafo,lista…), existía también la etiqueta <layer> para el navegador Netscape de donde supongo vendrá la denominación de capas (layers en Inglés) ya que div es la abreviatura de “division”.
Bueno vamos al grano, para colocar los elementos de una página (imágenes, textos, listas, tablas, formularios, etc ) utilizaremos unos “contenedores” que además nos van a ayudar a dar estructura a nuestra página, estos “contenedores” son las capas que crearemos con la etiqueta <div>. Para HTML los elementos <div> son elementos de bloque y tienen todas las propiedades de estos pero como los utilizamos para colocar (posicionar) los elementos de la página las propiedades más específicas son las de posicionamiento:
- Propiedad position con los valores posibles de relative, absolute , fixed o inherit y cuyo uso es obligatorio en Ie7 y Firefox cuando queramo utilizar las propiedades siguientes de la lista.
- Propiedades top, left, bottom, right que definen las distancias al elemento desde el borde superior, izquierdo, inferior y derecho de la ventana del navegador.
- Propiedad z-index con un valor numérico (1,2,3….) que indica el orden de apilamiento es decir que capa está encima de otra un valor 3 indica que estará encima de las capas con un valor 1 o 2, por ejemplo.
Utilizar este sistema cuando se crea la estructura de la página da más problemas que ventajas, por lo menos es lo que me dice la experiencia, a la hora de explicarselo a alguien. De hecho vamos a ver que para crear la estructura de la página es mejor recurrir a otras propiedades diferentes a las de posicionamiento.
El código explicado es válido para IE6,IE7,Firefox 2 y navegadores que se adapten a las recomendaciones del w3. Se ha mantenido la compatibilidad con IE6 debido al elevado porcentaje de usarios de esta mala versión de Internet Explorer.
2.1 Crear una capa
Una capa se crea utilizando la etiqueta div se les suele dar un nombre utilizando el atributo id (el nombre ha de ser único para cada capa de la misma página) y les aplicamos propiedades mediante hojas de estilo utilizando el selector #nombre_capa.
01. <div id=”capa1″>aqui va el contenido de la capa</div>
El código anterior se sitúa en el body o dentro de otro div es decir las capas se pueden anidar. Para fijarle propiedades escribiremos el siguiente código en la cabecera del documento html (es decir entre las etiquetas <head> y </head>).
01. <style type=”text/css”>
02 #capa1 { position:absolute;
03. top:0px;
04. left:80px;
05. width:200px;
06. height:90px;
07. background:red;
08. z-index:2;
09. }
10. </style>
Como el nombre de la capa ha de ser único, si queremos aplicar las mismas propiedades a dos o más capas utilizaremos clases es decir a la etiqueta div le aplicaríamos el atributo y en los estilos se definiría dicha clase.
3. Crear la estructura de una página con varias columnas.
Empezamos con la estructura básica de las columnas sin más y veremos como a partir de esta llegamos a crear cualquier combinación.
Supongamos que deseamos tres columnas, dos laterales del mismo tamaño y una central más grande que utilizaremos para colocar nuestros contendios.
1.- Empezaremos creando las tres capas mediante etiquetas div, como dos de ellas serán iguales usaremos una clase para definir sus propiedades mientras que para la otra utilizaremos el atributo id (si todas son diferentes utilizaríamos el atributo id para todas ). En el cuerpo del documento ponemos:
01. <div>Columna Izquierda</div>
02. <div id=”central”>Columna central</div>
03. <div>Columna Derecha</div>
El resultado será el siguiente:
Columna Izquierda
Columna Central
Columna Derecha
Los contenidos se disponen unos encima de otros según el orden en el que se escribieron en el cuerpo del documento, además ocuparán el ancho total de la página ya que son elementos de bloque para verlo vamos a ponerles color de fondo.
01. <style type=”text/css”>
02. .lateral { background:red;}
03. #central {background:blue;}
04. </style>
Columna Izquierda
Columna Central
Columna Derecha
Esto me recordó bastante el aspecto de una lista de elementos y cómo para ponerlos en fila utilizamos la propiedad float pues pensé hacer lo mismo. Así que vamos a utilizar la propiedad float con el valor left para poner las capas en fila y también debemo darles el tamaño que necesitemos, normalmente sólo el ancho ya que el alto solemos dejarlo sin definir para que vayan creciendo en función del contenido, pero en este caso al ser un ejemplo lo vamos a fijar. En cuanto al ancho puede darse en porcentaje de la página y de esa manera siempre ocuparán el mismo área de la ventana del navegador.
01. <style type=”text/css”>
02. .lateral { background:red;
03. float:left;
04. width:24%;
05. height:80px;
06. }
07. #central { background:blue;
08. float:left;
09. width:50%;
10. height:80px;
11. }
12. </style>
Columna Izquierda Columna Central Columna Derecha
Observad que el ancho total no suma el 100%, esto es debido a que curiosamente en Internet Explorer cuando el ancho es 100% no entran y este a de ser algo menor, en este caso la suma de los tres anchos es 98%. De lo anterior me convencí cuando comprobé que la propia Web del w3 utilizaba este ancho inferior al 100%.
Ya tenemos la estructura de tres de columnas que se adapta al tamaño del navegador y recordad que dentro de cada div puede haber cualquier cosa incluso otros div con una estructura similar.
Creo que el código es mínimo y fácil de entender, nos inspiramos en las listas. float:left hace que los elementos se coloquen a la izquierda del que los sigue, esta propiedad hay que ponerla a todas las columnas (divs), por culpa de IE6 sino se pondría en todas menos en la última, ya que ésta no tiene que ir a la izquierda de la siguiente. En cuanto a los anchos, se pueden poner en pixeles si queremos que tengan unas medidas exactas independientemente del tamaño de la ventana del navegado. Además este último sistema es más recomendable si no queremos que el aspecto de nuestro diseño varíe mucho o se estropee del todo al variar el tamaño de la ventana del navegador.
Si queremos 4 o 2 columnas lo único que hay que hacer es definir más o menos capas (div) en el cuerpo del documento y definir sus propiedades con estilos. Veamos un ejemplo con 2 columnas.
01. <div id=”lateral”>Columna Lateral</div>
02. <div id=”contenido”>Columna principal</div>
El código anterior es el que colocaríamos en el cuerpo del documento, mientras que en los estilos pondríamos lo siguiente:
01. <style type=”text/css”>
02. #lateral { background:red;
03. float:left;
04. width:24%;
05. height:80px;
06. }
07. #central { background:blue;
08. float:left;
09. width:74%;
10. height:80px;
11. }
12. </style>
Añadir un encabezado y un pie de página.
Hemos visto que realizar estructuras de páginas de varias columnas es sencillo ahora vamos a añadir un encabezado y un pie a nuestra página y veremos que no es nada complicado.
Como necesitamos una capa para el encabezado y otra para el pie empezaremos añadiendo estas a nuestro código como se muestra a continuación, como vamos a poner distintas propiedades a cada una de las capas vamos a utilizar el atributo id y no clases para asignarles las propiedades.
01. <div id=”cabecera”>Cabecera</div>
02. <div id=”lateral”>Columna Lateral</div>
03. <div id=”contenido”>Columna principal</div>
04. <div id=”pie”>Pie</div>
Como se observa, el orden en el que creamos las capas es el mismo que tendrán cuando se vean en la página lo que simplifica el entendimiento. Creamos la capas con el mismo orden que se van a ver ( de izquierda a derecha y de arriba a abajo ).
En cuanto a las propiedades de estas nuevas capas ( las de las capas lateral y contenido no cambian ) decir que la primera, es decir la llamada cabecera, no tiene nada especial en cuanto a posicionamiento sólo lo que queramos darle de color de fondo, tamaño etc. Como estaba trabajando con porcentajes le pondremos de ancho el total de la página en este caso y al trabajar con porcentajes 100% (bueno realmente 99%, no tengo muy claro por qué, es algo dificil de entender es como lo anterior de no poder poner columnas cuyo ancho sume 100%, si la medida es en píxeles no hay problema pero en porcentaje no podemos poner 100% porque no encaja, si alguien sabe por qué, que nos lo diga) y de alto 80px; en cuanto a la capa pie lo mismo sólo diferirá en que para que esta capa se coloque debajo de las columnas deberemos contrarrestrar el efecto de la propiedad float de la capa precedente y esto se consigue con la propiedad clear (este es el truco que no es tal). En todo caso las propiedades serán las necesarias para nuestro diseño.
01. <style type=”text/css”>
02. #cabecera { background:olive;
03. width:99%;
04. height:80px;
05. }
06. #pie { background:olive;
07. width:99%;
08. height:40px;
09. clear:left;
10. }
11. #lateral { background:red;
12. float:left;
13. width:24%;
14. height:180px;
15. }
16. #central { background:blue;
17. float:left;
18. width:74%;
19. height:180px;
20. }
21. </style>
4 Estructura definitiva de la página.
Para que la página tenga una estructura lógica deberíamos englobar las capas anteriores en otra llamada, por ejemplo, “pagina” o “contenedor”, nombre este último muy utilizado pero a mi me gusta más “pagina” porque da una idea más clara de la estructura, me explico:
* Dentro del cuerpo del documento está la página y dentro de esta la cabecera las columnas y el pie y los demás elementos que necesitemos.
Además de para tener una estructura nos servirá para evitar que una reducción del tamaño de la ventana del navegador descoloque nuestra estructura (esto sólo ocurre cuando damos unas medidas a nuestras columnas en px y no en porcentaje, compruébalo) y para en su caso centrar el diseño en la página.
Vamos a realizar una estructura como la anterior de 780px de ancho centrada siempre en la pantalla del navegador (la imagen que se verá en esta página será sensiblemente menor para entrar en su diseño), la columna izquierda será de 150px, y por lo tanto la principal será de 650px. En el cuerpo del documento escribimos el código necesario para crear las capas tal y como se muestra a continuación.
01. <div id=”pagina”>
02. <div id=”cabecera”>Cabecera</div>
03. <div id=”lateral”>Columna lateral</div>
04. <div id=”contenido”>Contenido principal</div>
05. <div id=”pie”>Pie</div>
06. </div>
En cuanto a los estilos sólo tendremos que cambiar lo referente a los anchos de las capas y como queremos centrar el diseño en la ventana del navegador deberemos poner el valor auto a la propiedad margin de la capa “pagina” esto es suficiente para centra cualquier elemento de bloque, pero esto no funciona en Internet Explorer 6 (puede funcionar con DTD XHTML strict y dependiendo de la revisión de la versión 6 que tenga instalada) para resolver esto deberemos establecer la propiedad text-align en center en el elemento contenedor del que queremos centrar en este caso en el cuerpo (body) del documento, ahora deberemos reponer la alineación del texto en “pagina” mediante text-align:left;. Otra posible y muy buena forma de centrar la página es utilizar el posicionamiento del siguiente modo:
1. Establecemos el poscionamiento de la capa “pagina” en absolute mediante la propiedad position con el valor absolute.
2. Situamos la capa en el medio de la ventana del explorador mediante la propiedad left con el valor 50%.
3. Como lo anterior coloca la esquina izquierda en el medio, debemos desplazar la capa hacia la izquierda hasta que el medio de esta quede en el medio de la pantalla. Esto lo conseguimos mediante la propiedad margin-left dándole un valor negativo igual a la mitad del ancho de la capa .
Con el sistema anterior podemos también centrar una capa en la vertical de la pantalla y no sólo en la horizontal usando las propiedades top y margin-top de forma análoga a la expuesta para el centrado horizontal.
Opción de centrado 1.
01. <style type=”text/css”>
02. body {text-align:center;} /*Para centrar con IE6*/
03. #pagina { width:780px;margin:auto;text-align:left;}
04. #cabecera { background:olive;
05. width:780px;
06. height:80px;
07. }
08. #pie { background:olive;
09. width:780px;
10. height:40px;
11. clear:left;
12. }
13. #lateral { background:red;
14. float:left;
15. width:150px;
16. height:180px;
17. }
18. #central { background:blue;
19. float:left;
20. width:630px;
21. height:180px;
22. }
23. </style>
Opción de centrado 2.
01. <style type=”text/css”>
02. #pagina { width:780px;margin-left:-390;left:50%;
03. position:absolute;
04. }
05. #cabecera { background:olive;
06. width:780px;
07. height:80px;
08. }
09. #pie { background:olive;
10. width:780px;
11. height:40px;
12. clear:left;
13. }
14. #lateral { background:red;
15. float:left;
16. width:150px;
17. height:180px;
18. }
19. #central { background:blue;
20. float:left;
21. width:630px;
22. height:180px;
23. }
24. </style>
Este método de establecer la estructura de la página me parece simple, fácil de entender y aplicable en todos los casos. No obstante existen otros igual de válidos pero a mi entender más dificiles de explicar y a veces de entender.
Resumiendo:
1. Creamos las capas en el orden que aparecen en la página.
2. Las capas que tienen que ir unas al lado de otras (columnas) tienen que tener la propiedad float con el valor left.
3. Las capas que vayan después de estas deben tener la propiedad clear con el valor left o both.
4. Todas las capas las englobamos dentro de otra.
Las demás propiedades las que queramos, teniendo precaución con las medidas si ponemos padding o margin.
A continuación teneis una serie de enlaces a ejemplos de páginas maquetadas con este método, algunas más complejas que las explicadas pero sólo por el uso de alguna propiedad adicional ya conocida, por ejemplo hacer que la capa pie esté en el fondo de la página independientemente del alto de las otras capas etc…De momento dos demostraciones, en la segunda para que funcione en IE6 lo de situar el pie en la parte inferior de la ventana en cualquier caso, tenemos que utilizar para centrar las capas el método 2 además tenemos que establecer en 100% la propiedad height de <body> en el resto de navegadores basta con hacerlo en la capa “pagina” mientras que en IE6 es necesario en los dos sitios. Observad también como para situar la capa pie en el fondo utilizamos la propiedad bottom con valor 0px y position en absolute.
fuente:www.grafikas.es/
