jueves, 6 de diciembre de 2007

Vote Lista de Definición DD

Como desarrolladora/programadora web, se me ha hecho la costumbre de utilizar UL para modular todo lo que sea contenido en listas o bloques similares, horizontales o verticales. Hace poco leí un artículo en CSS-Tricks en el que hablaba de las bondades de las Definition list (DD) o Lista de Definiciones, de las cuales sólo había visto funcionar en dos o tres ocasiones y nunca entendí bien cuál era la onda, hasta ahora. Digamos que es casi casi como la famosa UL, pero con una estructura más sencilla, y permite configurar un Header y un Footer con estilos diferentes al resto de las líneas. Un ejemplo puede ser el siguiente:

Los DD se desplazan automáticamente unos píxeles hacia la derecha para crear una jerarquía entre éstos y los DT. Me animé hace poco a utilizar una DL para configurar un DIV en el que tenía un título, dos líneas arriba y dos abajo con combos y un input, y me funcionó bien, salvo por un problema que encontramos en IE6 (cuándo no...), en este le agregaba un margen al pie del recuadro que durante una hora no supimos de dónde venía. Utilizando la conocida técnica de agregar backgrounds de colores estridentes a cada elemento para ver cómo se comporta, nos dimos cuenta que IE6 produce un bug que te agrega una línea adicional al final de la lista, como un footer. No me pregunten por qué hace esto, pero lo resolvimos agregando un DD adicional con un estilo así:

... y santo remedio. La lista se quedó con sus cuatro ítems en su lugar, el código resultó exquisitamente válido y yo aprendí algo nuevo. Busqué referencias a esto pero no encontré nada por ningún lado, ni en inglés ni español ni esperanto.

Si buscan en Google van a encontrar muchos ejemplos de DL, desde los más sencillos hasta algunos más elaborados. Si lo prueban a simple vista tal vez no dicen mucho, pero con un buen uso de CSS se obtiene algo bonito, válido, y útil para no amontonar tantos UL dentro de un mismo DIV.

Y ahora me voy a seguir generando código, sean felices y vayan por la sombra que hoy sí que hace calorrrrr.

-·*’°§ PörTeña §°’*·-.

2 comentarios:

Pablo dijo...

Es verdad lo que dices.... es muy raro ver usar DD ... me viene bien el post :)

Porteña dijo...

Me alegro que te haya servido el dato ;-)