tierra de nómadas - tallerWeb

Maquetación CSS

Preliminares

En el anterior taller hemos visto algunas técnicas de implementación de ciertas características del nivel 2 de CSS. Supongo que es un buen momento para utilizar toda esa munición. Para comprender estos modelos, amén de la lectura comprensiva del mencionado taller, 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.

Caja centrada

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.

Caja centrada (margen líquido-contenido líquido)

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

Código HTML:

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

Código CSS:

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.

Código HTML:

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

Código CSS:

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.

Código HTML:

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

Código CSS:

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

Código JavaScript (opcional, para corregir errores de representación en Internet Explorer):

var MargenH = 80; var MargenV = 64;
var ELM = (document.getElementById);
var IE5 = ((ELM) && (navigator.userAgent.toLowerCase().indexOf('msie')!=-1) && !(window.opera));
if (IE5) window.onresize=Dimensionar;
function Dimensionar () {
document.getElementById('CentradaSL').style.width = (document.body.clientWidth-2*MargenH)+'px';
document.getElementById('CentradaSL').style.height = (document.body.clientHeight-2*MargenV)+'px';
}

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

Caja centrada en horizontal (contenido sólido)

Antes de pasar a otros modelos, podemos detenernos en un caso parecido, como puede ser el de centrar sólo en horizontal una caja de ancho fijo. Es un modelo que tradicionalmente se ha venido haciendo insertando el contenido en una tabla, y esta a su vez en un div alineado y también en un obsoleto elemento center. La solución es tremendamente sencilla, con un solo elemento:

Código HTML:

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

Código CSS:

div#CentradaHS { width:400px; margin:auto; }

Sin embargo, y una vez más, Internet Explorer parece no reconocer la declaración CSS. Para conseguir lo mismo, podemos recurrir a una ligera artimaña, basada precisamente en otro error de interpretación:

Código HTML:

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

Código CSS:

div#Contenedora { width:100%; text-align:center; }
div#CentradaHS { width:400px; margin:auto; text-align:left; }

La declaración text-align:center no debería tener efecto sobre la colocación del bloque interior, sino sobre sus elementos en línea, pero este nuevo fallo de implementación nos permite simular el comportamiento correcto. Obsérvese que hay que corregir la alineación real en la segunda regla.

Ejemplo: Caja centrada en horizontal (contenido sólido).

Dos columnas

La presentación a dos columnas es una de las más repetidas, más que típica es ya un tópico. Hay varias maneras de conseguirla, y la más sencilla pasa por definir ambas columnas a porcentaje. Aquí vamos a optar por una disposición algo más arriesgada, consistente en bloquear el tamaño de la columna izquierda. El mayor peligro que se corre es que la derecha quede demasiado estrecha cuando las dimensiones de la ventana sean pequeñas, lo cual se salva utilizando la propiedad min-width. En el anterior taller se da la solución para cubrir esta última propiedad en Internet Explorer, que no la reconoce.

Código HTML:

<div id="Izquierda">... contenido de la caja izquierda... </div>
<div id="Derecha">... contenido de la caja derecha... </div>

Código CSS:

div#Izquierda { position:absolute; top:0; left:0; width:200px; height:inherit; }
div#Derecha { margin-left:200px; min-width:350px; }

Ejemplo: Dos columnas.

Tres columnas

Si la anterior es un tópico, ésta es el "Santo Grial", al menos así llaman muchos a la presentación a tres columnas. Incluso el W3C adopta este esquema en su página inicial, pero lo gestionan mediante una tabla (en casa del herrero cuchillo de palo). Aquí lo haremos a nuestra manera, y por supuesto sin tablas. Simplificando al máximo, las cajas laterales van posicionadas en absoluto y su ancho es fijo. Al estar fuera de flujo, el lugar que ocupan dentro del código HTML es lo de menos. Los márgenes de la caja central tienen que coincidir con lo que ocupan las cajas laterales.

Para evitar que los contenidos se superpongan cuando el tamaño de la ventana sea pequeño, se anidan las tres cajas en otra que hace uso de la propiedad min-width. Además del apaño para emular esto mismo en Internet Explorer, también hay que hacer unos retoques mínimos en los márgenes de las cajas centrales, debido a que las cajas tienen borde, y el citado navegador también los interpreta incorrectamente.

Código HTML:

<div id="Madre">
 <div id="Izquierda">... contenido de la caja izquierda... </div>
 <div id="Central">... contenido de la caja central... </div>
 <div id="Derecha">... contenido de la caja derecha... </div>
</div>

Código CSS:

div#Madre { position:relative; min-width:620px; height:inherit; }
div#Izquierda { position:absolute; top:0; left:0; width:180px; height:100%; }
div#Central { margin-left:179px; margin-right:179px; }
html>body div#Central { margin-left:181px; margin-right:181px; }
div#Derecha { position:absolute; top:0; right:0; width:180px; height:100%; }

Ejemplo: Tres columnas.

Marcos sin marcos

La manida presentación en paneles, usual en las páginas que usan marcos (ver el debate sobre marcos), puede reproducirse sin necesidad de usarlos, al menos en las últimas versiones de Internet Explorer y en los navegadores basados en el núcleo "Gecko". Otros navegadores importantes, como Opera o Konqueror no reconocen la declaración overflow:auto; y su aplicación acarrea graves problemas de accesibilidad, al poder quedar oculta una parte del texto. De manera que para evitar esto, se parte de un modelo más sencillo (que se deja como ejercicio para el lector) para aplicar el estilo avanzado donde funcione. Por lo demás, el modelo es muy simple, tres cajas posicionadas con dimensiones porcentuales.

Código HTML:

<div id="Superior">... contenido de la caja superior... </div>
<div id="Izquierda">... contenido de la caja izquierda... </div>
<div id="Derecha">... contenido de la caja derecha... </div>

Código CSS:

body { overflow:auto; }
div#Superior { position:absolute; top:0; left:0; width:100%; height:15%; overflow:auto; }
div#Izquierda { position:absolute; top:15%; left:0; width:25%; height:85%; overflow:auto; }
div#Derecha { position:absolute; top:15%; left:25%; width:75%; height:85%; overflow:auto; }

Ejemplo: Marcos sin marcos.

Bloques en línea

A falta de una propiedad CSS más indicada para esto que sea soportada por una mínima parte de navegadores, nos tenemos que conformar con utilizar cajas flotantes. La única pega es que si no tienen todas la misma altura la colocación es impredecible, y no tiene arreglo sin utilizar el DOM (e incluso ni por esas).

Código HTML:

<div>...contenido de la caja...</div>
<div>...contenido de la caja...</div>
<div>...contenido de la caja...</div>
...

Código CSS:

div { float:left; width:190px; height:190px; margin:1px; }

Ejemplo: Bloques en línea.

Fondo elástico

Este modelo da solución al problema de incluir un fondo con ornamento en los bordes, pero que pueda cambiar de tamaño sin problemas. Es más difícil explicarlo que ponerlo en funcionamiento.

Código HTML:

<div id="Todo">
 <div id="CajaN">
  <div id="CajaNO"></div>
  <div id="CajaNE"></div>
 </div>
 <div id="CajaO">...contenido de la caja...</div>
 <div id="CajaS">
  <div id="CajaSO"></div>
  <div id="CajaSE"></div>
 </div>
</div>

Código CSS:

div#Todo { margin:48px; background:#FC9 url('fondo_e.png') right top repeat-y; }
div#CajaN { height:45px; background:url('fondo_n.png') repeat-x; }
div#CajaNO { float:left; width:45px; height:45px; background:url('fondo_no.png') no-repeat; }
div#CajaO { background:url('fondo_o.png') repeat-y; }
div#CajaNE { float:right; width:45px; background:url('fondo_ne.png') right top no-repeat; }
div#CajaS { height:45px; background:url('fondo_s.png') repeat-x; }
div#CajaSO { float:left; width:45px; height:45px; background:url('fondo_so.png') no-repeat; }
div#CajaSE { height:45px; background:url('fondo_se.png') right top no-repeat; }

Ejemplo: Fondo elástico.

Comentarios

Estás en: tierra de nómadas > tallerWeb > Maquetación CSS.