Bueno, finalmente me he decidido a escribir el primer tutorial sobre xhtml.  Esto no pretende ser "la solución", sino un aporte propio y muy simple, para solucionar un problema habitual en el uso de xhtml strict.

Entendiendo el Layout

En el caso problema que voy a desarrollar, contamos con los siguentes <divs>:

•  #HEADER: es el encabezado del documento, y esta a lo ancho del mismo, así que no nos molesta de momento para nuestro problema.

 
En la parte del cuerpo en si:

1.  #MENU1: Es una de las partes del problema: tiene una altura fija, y cuando lo que vamos a mostrar en #CONTENIDO es menos alto que este, el #PIE del documento nos queda inmediatamente donde termina el contenido a mostrar, quedando así el menú de la izquierda más alto que la parte central (figura 1). Esto se debe a xhtml strict usa lo mínimo necesario para mostrar el contenido, y colapsa la altura del <div> al mínimo posible.
2. #CONTENIDO: Es la segunda parte del problema, ya que si el contenido a mostrar no es suficiente para cubrir la altura del menu izquierdo, lo que va a pasar es que el #PIE se muestre muy arriba, y no queremos que eso pase.
3. #MENU2: Tiene ancho fijo y altura variable, pero no nos importa, ya que utiliza el fondo del BODY, entonces no hay problema en que sea mas o menos alto que #CONTENIDO.
4. #PIE: mediante el tag clear:both; hacemos que se ubique inmediatamente debajo de #CONTENIDO, por lo cual no nos dará mayores problemas, salvo en el caso de la Figura1.

Problema

El problema es el siguiente: cuando creamos un <div> con contenidos variables, el xthml strict tenderá a usar la menor cantidad de espacio para mostrarlo. Podríamos usar en nuestro documento css min-height: para especificar un alto minimo en un <div>, pero la realidad es que mozilla no interpreta bien dicho tag, o siempre se presta a problemas en algún navegado, ya que como tantos otros tags, no estan bien implementados en los diferentes navegadores.

Solución

Como solución simple, propongo colocar un <div> adicional, a modo de columna, con un ancho de 1 pixel, y una altura mínima que es la que nosotros deseamos para que se muestre minimamente bien nuestro sitio. Para ello deberemos ver que altura requerimos en función de las navegaciones laterales y el pie del documento.

Entonces creamos un <div> nuevo, que funcionará como una columna "de relleno": buscamos una altura ideal para ésta, en nuestro ejemplo, la altura del menú de la izquierda (ya que si la parte blanca sigue hacia abajo no nos arruina el diseño), lo flotamos hacia la derecha y con un ancho de 1 pixel.
En mi caso, voy a llamar a este <div>  #PARCHE, y el código sería este:

#parche    {
    display: block;
    width: 1px;
    height: 550px;
    float: right;
    }

Esto ha sido testeado en Internet Explorer y Mozilla Firefox, y en ambos funciona sin problema alguno, espero les haya servido el pequeño tutorial, todo feedback será apreciado.

Entry Information
Entry posted on Martes, Agosto 8th, 2006 at 2:08
Filed under Diseño Web y Usabilidad, xhtml strict + CSS
RSS for comments RSS 2.0
If you are leaving a comment here, you're greatly encourage to apply a gravatar, and within a few seconds, you'll have an icon next to the comment! Have fun!