Maquetación usando CSS

Imprimir

La maquetación es la distribución espacial de los elementos que componen una página web. El elemento más utilizado para esta tarea son las cajas o divisiones (etiqueta <div>), definiendo su tamaño, posición y características mediante propiedades CSS.

El tamaño de los elementos de bloque se regulan con las propiedades: width (ancho) y height (alto). Por defecto, los elementos de bloque ocupan todo el ancho del elemento que los contiene, y el alto se ajusta a su contenido en cada momento.

Para centrar un elemento respecto a su contenedor debemos usar la propiedad margin: auto;.

En ocasiones al establecer el tamaño de un elemento (sobre todo el alto) puede ocurrir que no quepa su contenido, esto se denomina desbordamiento y se controla con la propiedad overflow.

El posicionamiento es la forma en la que el navegador coloca los distintos elementos de la página. Lo normal es el posicionamiento estático, pero también existe el fijo, el absoluto y el relativo. Al cambiar el posicionamiento de un elemento podemos hacer que varios elementos se solapen, para controlar esto utilizamos la propiedad z-index que indica el orden de apilamiento (los valores más altos están más arriba).

  • El posicionamiento relativo ( position: relative; ) mueve el elemento desde su posición original, el resto de los elementos se comportan como si aún estuviera en su sitio.
  • El posicionamiento absoluto ( position: absolute; ) mueve el elemento a una determinada posición y el resto de los elementos lo ignoran, es decir, sale del flujo normal de la página. Podemos variar su posición con las propiedades top, right, bottom o left. Y su tamaño con height o width.
  • El posicionamiento flotante float: left; o float: right; ) mueve el elemento todo lo posible hacia el lado indicado permitiendo que el resto de los elementos fluyan a su alrededor. Para impedir que un elemento fluya al rededor de un elemento flotante utilizamos la propidad clear: both;.
  • Ancho de página: Fijo (utilizando como unidad el pixel) o Elástico/Líquido (utilizando como unidad el %). Depende de lo que pretendamos con un determinado diseño utilizaremos uno u otro. Cada uno tiene sus ventajas e inconvenientes.

maqueta_pprop_cajas_p

Las distintas divisiones o capas se indican en CSS, normalmente con selectores de identificador precedido del caracter almoadilla ( # ) y se referencian en la hoja web dentro de la etiqueta <div id="nombre_caja">, aunque también podemos maquetar con selectores de clase precedidos por el punto ( . ) simple y se referencian en la hoja web dentro de la etiqueta <div class="nombre_caja">. Utilizar unos u otros depende de si los vamos a emplear una sola vez (selectores id) o varias veces (selectores class).

Centrar la página en los distintos navegadores:

Conforme vamos trabajando en el desarrollo web nos vamos dando cuenta el trabajo "extra" que supone que algún navegador no soporte los estándares Web, evidentemente hablo de IE, que en muchas ocasiones interpreta las reglas CSS como le parece, provocando que tengamos que programar numerosas cosas sólo para él.

Para centrar nuestra web en todos los navegadores, excepto en IE, sólo es necesario añadir estas dos declaraciones CSS en el contenedor principal de la página:

#contenedor_ppal {
    width: 800px;
    margin: 0 auto; }

Y para que la página web quede centrada en IE debemos añadir una declaración más en el selector body y otra en el contenedor principal, quedando todo como véis para que en cualquier navegador se vea centrada nuestra web:

body { text-align: center; }

#contenedor_ppal {
    width: 800px;
    margin: 0 auto;
text-align: left }

Es decir, tenemos que centrar el texto en <body> para luego volverlo a dejar a la izquierda en el contenedor principal. Ya sé lo que estais pensando, pero... son las cosas de IE.

 

aula_virtual_3con14

Utilidades

imprescindibles FireFox Google Chrome Opera Safari Acrobat Reader 7zip Flash Player Java FileHippo

Visitas...

TOTAL189860