Columnas CSS

test — Sun, 29 Mar 2009 14:13:46 +0000

Crear una estructura de columnas con css y html sin usar tablas Desde que comencé en este mundo del marcado con etiquetas de hipertexto, muchas veces tuve la necesidad de construir una estructura de 2 o 3 columnas. El problema llegó cuando me inicié en estructuras semánticas y vi que quizás el uso de tablas no era el más propicio puesto que me restaba flexibilidad estilística y accesibilidad. Fue entonces cuando comencé a buscar soluciones ajenas sin encontrar ninguna que me satisficiera y no pude evitar embarcarme en la búsqueda de las mías propias.
Lo primero que hice fue plantear la estructura e intentar partir de la solución parcial que todos usábamos ya para construir columnas. Tenemos una caja principal con dos elementos embebidos que queremos se comporten como columnas…

crosbrowsing fase inicial

Normalmente usaríamos un float en la primera columna para flotar el contenido de la segunda pero eso no nos daría dos culumnas del mismo tamaño sino algo así:

crosbrowsing pimer paso

Vemos dos problemas, el primero es el ya clásico problema de los floats. Para solucionarlo podríamos usar las múltiples opciones que nos han proporcionado los gurus, sin embargo para este ejercicio aplicaremos un display-table al contenedor y de ese modo el contenido no desbordará la caja. Para solucionar el segundo de ellos necesitamos ir a la raíz del problema: estamos usando un atributo cuyo fin es flotar contenido en linea al rededor del elemento al cual se le ha aplicado. No parece que sea el mismo que el nuestro, que es crear una estructura de columnas o celdas paralela. Os propongo dos soluciones.

La solución con display table y height inherit(FF)/100%(IE)
Compatibilidad:
- Gecko (FF): 95%
- Webkit (Safari, Chrome): 80%
- Presto (Opera):30%
- Trident (IE): 60%
Bugs:
1. En WebKit, Presto y Trident, al depender de la altura heredada de la ventana por medio del tag una vez superada esa altura por alguna de las columnas, las otras no seguirán creciendo a pesar de que lo haga su contenedor, e incluso pueden llegar a perder la herencia por completo.
2. IE necesitará una excepción para sustituir height: inherit por height: 100%
3. Los navegadores basados en Webkit pueden sufrir conflictos cuando la caja contenedora esté alojada dentro de otras
4. Opera se comporta como IE pero puesto que no podemos hacer excepciones para ella, su compatibildad con el método es nula.
5. En WebKit al usar padding o border en modo tabla aparecen diferencias en el modelo de caja. Sin embargo se pueden aplicar a los elementos interiores sin problemas
Comentarios: aunque algo compleja, es la única solución mínimamente compatible con IE7 o inferiores.
Solución mediante la replica de una tabla
Compatibilidad:
- Gecko (FF): 100%
- Webkit (Safari, Chrome): 100%
- Presto (Opera): 100%
- Trident (IE): 0%
- IE8: próximanente
Bugs: al igual que el float el método display: table-cell puede no renderizarse en FF ante cargas extremadamente lentas.
Comentarios: Rápido y sencillo de implementar. No tiene secretos y es soportado por todos los navegadores excepto IE7 o inferiores ya que no reconocen display: table.

La solución con display table y height inherit(FF)/100%(IE)

En esta solución aprovechamos los floats, y digo floats porque nos hará falta flotar ambas columnas y además proporcionarle el ancho a ambas tambien.
Probrar solución para FF y cia. en directo

Lo primero que hacemos es aplicar nuestro display table al elemento contenedor para que los elementos flotados no desborden.
```
  float: left; width: 250px; background-color: #666;">Columna 1
  float: left; width: 150px; background-color: #f40;">Columna 2
 
```
crossbrowsing segundo paso
Vemos que la altura de ambas columnas no se equipara, de modo que racionalicemos el problema. Necesitamos que, haya las columnas que haya, todas igualen su altura a la de la más alta de ellas. ¿Cual es el elemento que siempre tendrá la altura máxima? Si cualquiera de las columnas puede crecer en función de su contenido, sólo hay un elemento que ahora se está acomodando a la altura de la mayor de las columnas: el contenedor. Es pues su altura la que nos importa, y los estándares nos permiten trasmitirle esta altura a sus elementos hijo mediante la herencia. Pero como no iba a ser tan fácil, primero tendremos que declarale una altura al contenedor por CSS para que sus hijos la puedan heredar. Y he aquí el dilema. Veamos primero el resultado con una medida fija.
```
height:60px; padding: 2px 0px 2px 2px;">
  Columna 1
  Columna 2
```
crossbrosing tercer paso
Lo ideal sería que no tuviésemos que proporcionarle un alto al contenedor sino que éste creciese y automáticamente tomase un valor. Como esto no es así y proporcionarle un alto fijo nos sirve de poco, la única solución posible es dotarlo de un alto porcentual. Aunque no sea tampoco lo ideal pues nos obliga a tener un álto mínimo esta solución tiene truco. En principio podemos creer que nuestros cubre el 100% de la ventana, pero eso no es así. No lo puede ser porque su elemento padre no lo hace tampoco. Irónicamente, este comportamiento aparentemente extraño, nos permite que la altura del contenedor sea siempre la de su columna mayor que va forzando su tamaño y a su vez él fuerza la del body. Sin embargo por alguna razón las columnas como elemento de bloque no heredan bien el alto de su contenedor. Tendremos que aplicarles pues también a ellas el atributo display:table.
Hasta aquí tendríamos la solución perfecta para Firefox. Para que WebKit y Presto reaccionen y no tienen un height: 100% y aún así al superar el contenido la altura de la ventana la magia se rompe. IE directamente no comprende los estándares display:table ni el valor inherit. Pero para él aún hay alguna posibilidad.
```
height: 100%; padding: 2px 0 2px 2px">
  Columna 1
  Columna 2
 
```
Probrar solución para FF y cia. en directo

crossbrowsing último paso
Corregimos para IE. En el ejercicio aplicamos los CSS sobre los elementos, pero para que la solución nos sirva en la práctica para varios navegadores tendremos que aplicar las excepciones para IE mediante un comentario condicional.
```
  height: 100%;">columna 1
  height: 100%;">Columna2
 
```
Probrar solución para IE en directo
Este es el código insertado dentro de otros elementos que limitan su altura.

Titulo columna 1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet orci nec enim malesuada sollicitudin. Fusce mattis velit a diam. Nunc interdum.Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Titulo columna 2Morbi auctor. In mi neque, volutpat quis, rutrum at, vehicula et, felis.

Solución mediante la replica de una tabla

Para los puristas de los estándares y detractores de IE la solución perfecta para montar una estructura de columnas sin tablas y mediante un método consistente y sencillo.

Aplicamos al elemento contenedor el atributo display:table
Añadimos un elemento extra con un display: table-row para dar estabilidad*
A cada columna le ponemos un display: table-cell
Dimensionamos por CSS el contenedor y los columnas.

Sí, ya está, no hay más. Aquí tenéis un ejemplo del método embebido y un link al método como contenedor principal.

display: table; width: 400px;">
  
    display: table-cell; width: 250px; background-color: #999999;">Columna 1
    display: table-cell; width:150px background-color: #ff9900;">Columna 2

Titulo columna 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet orci nec enim malesuada sollicitudin. Fusce mattis velit a diam. Nunc interdum.

Titulo columna 2 Morbi auctor. In mi neque, volutpat quis, rutrum at, vehicula et, felis.

Puesto que IE no entiende de herencias, obviamente esta es una solución exclusiva para motores de renderizado de verdad. Pero siempre podemos recurrir a la primer solución y aplicarla mediante un comentario condicional.

*Este elemento en principio no es necesario, pero resuelve el problema de firefox con las cargas lentas

Estructura y semántica I: el “Código estructural”

admin — Sun, 22 Jun 2008 12:12:15 +0000

Seguramente muchos ya habréis oído hablar de estos términos, pero si habéis llegado hasta aquí quizás estéis buscando respuestas a cómo construir una buena estructura HTML, o lo que es lo mismo, escribir código estructural. Para ello, si no os importa usaré el símil del ingeniero y el escultor e intentar así definir la idea de estructura.

Pensemos en el escultor, concentrado en la forma, en la belleza, en los detalles de su magnífica obra de 30MB de peso, orgulloso de su creación, una creación que nunca podrá sacar del taller porque no le cabe por la puerta. Bien, pues no pensemos más en ello, porque es una imagen bastante deprimente, pensemos cómo evitar eso.

Qué haría el ingeniero para evitarlo?

Pues lo primero separar estructura de estilo en la producción.
Contratar especialistas para cada una de las tareas, nada de chapuzillas multiusos (frontpage, fireworks…).
Contratar a un buen capataz para que dirija la construcción de la pieza.
Conseguir los mejores materiales y si los que hay en mercado no se adaptan, diseñarlos para ésta y próximas piezas.

Aclaremos esto un poco. Si nuestra obra fuese una gran escultura de dimensiones desproporcionadas, no es que no nos sirva el escultor, él nos hará el boceto, una reproducción en miniatura de lo que debe ser la obra una vez finalizada. En Web ese sería el trabajo del diseñador.

Ahora ya tenemos el diseño. Si fuésemos una empresa es posible que tuviésemos un diseñador, un maquetador y un programador. Pero como es muy posible que nosotros mismos tengamos que hacer todo, dividamos nuestras conciencias. Ya hemos terminado el diseño, bien dejemos nuestro lado artístico que descanse y se tome unas piñas coladas. Y saquemos nuestro capataz para que dirija la obra, extraigamos el maquetador que hay en nosotros, que es quien conseguirá que la obra sea tal como la concebimos al mismo tiempo que sigue los planos del ingeniero y dirige a los trabajadores. Cuales serán nuestros albañiles y alicatadores? bien aquí es donde entran XHTML y CSS. Obreros especializados cada uno en su disciplina.

Cómo crear código estructural?

Para crear código estructural deberemos olvidarnos del aspecto final de la obra. Sí, habéis oído bien. Olvidar los colores, los tamaños de los marcos de las puertas e incluso del tamaño de nuestras estancias. Porque nuestra estructura tiene que ser flexible para poder ser no una sino muchas obras artísticas. Os acordáis del cubo de Rubik y la serpiente que convertíamos en una esfera, en una cobra, en un perro… Bien pues más o menos esa es la idea, que podamos girar nuestras piezas y cambiarles el color y la disposición en el espacio para que el año que viene podamos modificarla y siga las tendencias del momento sin que eso implique hacer una obra nueva.

XHTML es un gran albañil, dispone de las mejores herramientas para crear los cimientos y el esqueleto de nuestra Estatua de la Libertad. A diferencia de HTML4, que permite mezclar ambas cosas, XHTML sólo crea estructura dejando a CSS que termine la obra una vez él ha finalizado su parte.

Os preguntaréis a qué corresponden los materiales en maquetación. La respuesta a esto está en la semántica y las clases css. La combinación de elementos y atributos CSS, así como las nuevas técnicas serán nuestros materiales y herramientas.

Después de tanto símil, metáfora y comparación, imagino que todos estaréis pensando y quién o qué es el ingeniero en Web, qué hace? cuales son los planos? La respuesta a esto os la daré en un próximo artículo.

En próximos artículos también definiremos prácticas y metodologías del código estructural y entraremos en el concepto de semántica.