Tipos de posicionamiento CSS

Miniatura de una web

Distintas formas de posicionar las divisiones de una página web utilizando estilos CSS: (1) con falsa columna, (2) con posicionamiento absoluto, (3) como si fuesen tablas y (4) uno mixto mezclando varios conceptos.

Se trata de ejemplo práctico de una página HTML que utiliza un encabezado, un menú, un contenido y un pie

Objetivo

Colocar arriba del todo un encabezado, abajo del todo un pie y en medio que haya a la izquierda un menú y a la derecha un contenido.

Divisiones HTML

El documento HTML consta de las siguientes divisiones:

  • global
    • encabezado
    • cuerpo
      • menu
      • contenido
    • pie

Estilos en común

Hay una serie de estilos en común que se aplican en todos los casos. Los cambios que realiza son:

  • Tipo de letra para todo el documento
  • Eliminar márgenes de los párrafos, encabezados y listas
  • Colores de fondo de las divisiones
  • Pequeños ajustes cosméticos

Los distintos posicionamientos

1) Falsa columna

  • El menú flota a la izquierda. Este hace que todo el texto que viene a continuación se coloque a la derecha o debajo del menú. float:left;
  • El pie baja debajo del menú eliminando los elementos flotantes que pudiese tener a su lado. clear:both;
  • El contenido se coloca a la derecha haciendo que su margen izquierdo sea del mismo ancho que el menú. margin-left:200px;
  • Para colorear la columna del menú se utiliza una imagen de fondo del mismo ancho que el menú. Es una imagen de fondo para el cuerpo o para global. La imagen de fondo se ha de repetir en vertical y alineada a la izquierda. background:#fff url(imgs/menu.png) repeat-y left;
  • El menú, se coloque a la izquierda o derecha, ha de estar antes que el contenido. El orden ha de ser encabezado, menu, contenido y pie.
  • El cuerpo no es necesario

Hoja de estilos: falsa_columna.css

2) Posicionamiento absoluto

  • La división global se posiciona de forma absoluta a la página. No habrá la barra de desplazamiento vertical de la página. position:absolute;
  • El resto de divisiones se colocan de forma absoluta respecto a la división global.
  • Cada división se coloca utilizando 4 de uno de estos 6 estilos: arriba, derecha, abajo, izquierda, ancho y alto.
  • El contenido tiene barra de desplazamiento vertical porque su desbordamiento de texto es automático. overflow:auto;
  • El orden de los elementos no tiene ninguna importancia. Sólo se requiere que estén dentro de global
  • El cuerpo no es necesario

Hoja de estilos: absoluto.css

3) Como una tabla

  • La división global se muestra como si fuese una tabla. display:table;
  • El encabezado y el pie se muestran como si fuesen las filas de una tabla. display:table-row;
  • El menú y el contenido se muestran como si fuesen las celdas de una tabla. display:table-cell;
  • Si queremos el menú a la izquierda el orden debe ser: encabezado, menu, contenido y pie; si queremos el menú a la derecha entonces el orden sería: encabezado, contenido, menu y pie.

  • El cuerpo es necesario para que el menu se coloque al lado del contenido

Hoja de estilos: como_tabla.css

4) Mixto

  • El cuerpo se posiciona de forma relativa para que pueda tener dentro suyo elementos de posicionamiento absoluto. position:relative;
  • El menú se coloca de forma absoluta respecto al cuerpo.
  • El contenido tiene margen izquierdo del mismo ancho que el menú
  • El orden de los elementos debe ser encabezado, cuerpo y pie. Dentro del cuerpo no importa el orden del menú y el contenido

Hoja de estilos: mixto.css

Ejemplo práctico

Se trata de una página HTML con un menú para cambiar la hoja de estilos que utiliza. El código HTML siempre es el mismo. El resultado visual cambia según la hoja de estilos que se esté aplicando en un momento dado.

Nota: Ha sido probado con Mozilla Firefox 3.5 y Chromium 5.0

Proinf.net, ©2003-2017 ci 3.1.6 (CC) Esta obra está bajo una licencia de Creative Commons Este software está sujeto a la CC-GNU GPL