Navegando me topé con una <a href=“http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/” title=“Enlace externo a “New clearing method needed for IE7?”">reescritura del código de .clearfix para que éste sea interpretado por IE7 correctamente. Y bueno, como no me gustaba la interfaz del <a href=“http://www.csslab.cl/2007/03/09/clearfix-el-widget/" title=“Enlace en CSSLab a “.clearfix: el widget”">widget Clearfix que hice anteriormente, aproveché de rediseñarlo y lanzarlo con este nuevo código que se ve mejor. Nuevamente, lo dejo para libre descarga. [Download Clearfix v2.

Siendo un poco justo con , se ha diezmado bastante su personalidad en estos años de incesante impulso semántico. Esta fiel etiqueta ha sido degradado a no más poder por mucho tiempo, y vengo a su rescate. Como he escrito muchas veces ya a lo largo de este sitio, las tablas son para contener datos tabulados. Sólo para eso, esa información desagradable que suelen acompañar a los gráficos, esos nombres y números que a nadie le gusta.

Este reseter ha sido actualizado, visita la nueva versión. Tercer artículo influenciado directamente del [videocast][1]. En esta ocasión, les presento una hoja de estilos que utilizo para proyectos de gran envergadura (cuando con más de 40 páginas y no son alimentadas a mano, sino mediante un CMS). Se trata de un CSS Reseter, una serie de propiedades CSS que resetean las propiedades a su estado original. Conocido por todos es que por defecto los browsers tienen algunas diferencias de estilos en ciertas etiquetas HTML, principalmente , , , ….

Segunda entrega causa directa del [videocast 1][1]. Esta vez, una muy pero muy buena y útil técnica para lograr altos de columnas de 100% respecto del contenedor. Con esto, se puede lograr que el fondo de una o ambas columnas crezcan de acuerdo a la mayor. Este problema de diseño tenía variadas soluciones anteriormente: que el contenedor tuviera el fondo a modo de una imagen, o a través de Javascript también se podían lograr altos de 100%.

Primer aporte procedente del [videocast][1]. Como prometido, este artículo será un corto pero efectivo método para obtener la propiedad min-height en todos los browsers, especialmente para IE6 que no lo aplica para nada. Esta propiedad lo que hace es aplicar un alto mínimo a un elemento. Por ejemplo, queremos que una caja tenga un alto de 200px. Como sabemos, los elementos que estén dentro de esta caja se mostrarán hasta que alcancen esos 200 pixeles, y pasado eso si se agregan más elementos la caja no va a crecer, sino que permanecerá fija.

En un proyecto en que estoy involucrado actualmente, me tocó participar en la arquitectura y construir el sitio completamente, desde cero. Lo bueno es que lo estoy haciendo solo, por lo que propongo y aplico mis propios métodos, y lo mantengo bastante ordenado (con un código limpio y ordenado), tanto el HTML como las hojas de estilo. A medida en que lo voy desarrollando, aplico algunos métodos bastante simples pero efectivos para determinados problemas que van surgiendo, los que compartiré en este sitio en su momento.

Recontra conocidas ya son los [menúes construídos con listas de ítems][1]. Los hay verticales, y muy fácil es transformarlas a horizontales. Gráficamente, existen necesidades que a través de la habilidad del diseñador/desarrollador se pueden solucionar elegantemente con unos trucos de CSS. En este caso, mostraré una manera de crear menúes tipo árboles, utilizando algunos GIF para lograr esos enlaces y nodos. Bueno, lo primero es el código HTML. Básicamente se compone de una lista con y algunos tienen sublistas, como verán en el ejemplo a continuación:

Son excepciones, pero suceden momentos en que tienes tu layout bien ordenado y estructurado, y por esas cosas de la vida ingresas un texto muy largo (una URL de esas extensas) o en el comentario alguien lo hace, y toda la armonía que tenías en tu diseño se quiebra. No te quita el sueño, pero sí molesta. Las columnas se van a la cresta, enfin. Felizmente para esto existe una solución, y un hack.

Viejos tiempos esos de la etiqueta . Aunque me he deparado más de alguna vez en el presente siglo con sitios donde ponen un GIF y luego lo mapean creando links de navegación. Pésimo. Con Flickr se le dió un nuevo uso al método de agregar zonas sensibles dentro de imágenes con información anexa, lo cual se vió con muy buenos ojos cuando se necesita mostrar detalles de ciertas zonas dentro de las imágenes.

Últimamente me he puesto a escribir más artículos teóricos que prácticos. Siento desilucionar a algunos quienes entran a CSSLab por soluciones a sus problemas diarios en sus proyectos web, pero me interesa bastante difundir conocimiento, para así prevenir futuros problemas. Siempre es mejor prevenir que remediar. Bueno en este caso, volveré a tocar el tema de las queridas listas en HTML. Son bastante útiles, ya que sus propiedades intrínsecas (el que sean elemento bloque y contengan bastante rígido su contenido) las hace muy maleables al momento de estructurar menús, por ejemplo. Pero como ando semántico por estos días, quiero aclarar qué son y cómo utilizar las listas. Comencemos por lo básico. Una lista no es lo mismo que una secuencia. Una regla mental básica puede ayudarte a delucidar cuándo una lista es una lista: Si creamos una lista y le quitamos sus marcadores (bullets o números) con CSS, entonces probablemente no es una lista Esto hace ver que nuestro menú con listas no son semánticos. Los elementos de este menú son secuenciales, pero no necesariamente pertenecen a una lista. Les damos estilos, les ponemos fondos, cambiamos su color con :hover, pero si le quitamos los estilos, vuelve a ser una lista (ordenada o no) de elementos. No una secuencia. Entonces sí tiene sentido que sea una lista. En HTML existen 3 tipos de listas: