Maquetación CSS

Para comprender estos modelos, es conveniente estar familiarizado con la especificación CSS2. A continuación unos cuantos ejemplos simples de maquetación. Son modelos que tradicionalmente se conseguían mediante tablas. Quizás en un futuro taller se aborden esquemas más complejos y acabados. Sin embargo, en este primer contacto ha primado la sencillez sobre todo lo demás.

El ya clásico problema de centrar un cuadro en horizontal y en vertical. Bajo mi punto de vista admite tres versiones más una, y por tanto hay cuatro ejemplos.

Este ejemplo es de una simplicidad aplastante. Simplemente se posiciona en absoluto la caja y se especifican sus coordenadas y dimensiones a porcentaje.

<div id="CentradaLL">... contenido de la caja... </div>

div#CentradaLL { position:absolute; top:10%; left:10%; width:80%; height:80%; }

Ejemplo: Caja centrada (margen líquido-contenido líquido).

Caja centrada (margen líquido-contenido sólido)

El truco consiste en posicionar la caja al cincuenta por ciento. El efecto de centrado se consigue dando unos márgenes negativos que sean la mitad del ancho y del alto.

<div id="CentradaLS">... contenido de la caja... </div>

div#CentradaLS { position:absolute; top:50%; left:50%; width:500px; height:300px; margin-left:-250px; margin-top:-150px; }

Ejemplo: Caja centrada (margen líquido-contenido sólido).

Caja centrada (margen sólido-contenido líquido)

La caja es absoluta, y se dibuja a partir de sus coordenadas. Internet Explorer no es capaz de calcular las dimensiones de una caja a partir de esos valores, de manera que se incluye un script que maneja el evento resize para calcular.

<div id="CentradaSL">... contenido de la caja... </div>

div#CentradaSL { position:absolute; top:64px; right:64px; bottom:64px; left:64px; }

Usuarios que han visto este tema también han visto...

- 10 errores comunes en CSS
- Colores en CSS
- Decorando el drop down menú en CSS
- Diseño de menús con CSS avanzado
- Efecto de sombra con CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento