ProInf.net

Tipos de posicionamiento CSS

Francisco 11-04-10
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

Compartir

 

Artículos relacionados:

  • Curso de diseño web 2012…

    Ejercicios de dos cursos de diseño web de 60 horas cada uno en Foment del Treball. Incluye los apuntes, los ejercicios realizados en clase y ejercicios extras.

  • Navegación con CSS…

    Experimentos de navegación mediante CSS: pestañas en varias filas, menú desplegable y seleccionar una entre varias opciones ocultas.

  • Curso de diseño web y multimedia 2010…

    Ejercicios de un curso presencial de diseño web y multimedia impartido en Foment del Treball. Incluye todos los ejercicios realizados en clase.

  • Barra de navegación horizontal CSS…

    Tutorial paso a paso de cómo realizar una barra de navegación horizontal con imágenes en CSS. Es como un menú horizontal de imágenes de sustitución.

  • Análisis de una plantilla CSS y adaptación a Dreamweaver…

    Ejemplo práctico de cómo adaptar una plantilla web descargada de Internet al sistema de plantillas de Dreamweaver. Agregar regiones editables y cambiar el CSS

  • Curso de hojas de estilo CSS 2007…

    Curso de hojas de estilo en cascada CSS. Incluye libros recomendados de CSS, enlaces sobre CSS, apuntes de CSS y los ejercicios realizados en clase con Kompozer

Ir arriba