Archive for the ‘CSS’ Category

Problema float

Thursday, July 9th, 2009

La solución definitiva al problema de los float que desbordan su contenedor.

Muchos de vosotros conoceréis este probelema y las viejas soluciones, como añadir un elemento con clear: both o aplicar un attributo overflow, y habréis sufrido la contrariedad del primero y las inconsistencias del segundo.


Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ir directo a la solución

(more…)

Columnas CSS

Sunday, March 29th, 2009

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…

fase0

crosbrowsing fase inicial

(more…)

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

Sunday, June 22nd, 2008

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. (more…)