Probablemente al leer el título del post habrás revivido la mayor de tus pesadillas como diseñador web. El día que a alguien se le ocurrió que se debía dejar de maquetar con tablas, más de uno dejó la profesión. Accesibilidad… qué es eso?
Bromas a parte, todos sabemos ya que nuestros diseños tienen que ser accesibles por muchos motivos, incluso por posicionamiento de nuestros contenidos, así que de una manera y otra nos hemos decidido a seguir estas pautas (más información en esta web).
Hay diversas reglas a seguir, pero quizá la más tediosa es la de sustituir la maquetación de tablas, por maquetación por capas, algo que se antoja cuasi imposible cuando hay que hacer composiciones complejas de elementos.
Supongo que muchos de vosotros os habréis peleado en numerosas ocasiones con el consabido atributo float de los div. [Ejemplo de Float].
La verdad, es que tras mucho usarlo y pelearme con él, nunca me ha convencido realmente. Si bien se usa mucho sobre todo en composiciones de layouts de páginas en 2-3 columnas, empieza a ser muy complicado de usar cuando no es tan fácil lo que tienes que maquetar en XHTML.
Gracias a Dios (y a este libro, totalmente recomendado 100%), di con otra solución que creo mucho más útil y que permite que tus diseños sean total y realmente cross-browser. El uso combinado de posicionamiento relativo y absoluto.
Para muestra un botón. Me dispongo a maquetar una rejilla de 3×3 elementos, típicamente una “tabla”, pero con el uso únicamente de capas (divs) y CSS. Si bien con floats, esto se antoja cuanto menos “complicado”, vereis como con el uso de posicionamientos relativo y absoluto se simplifica en gran manera tanto la CSS como se disminuye la cantidad de capas a usar, únicamente a las 9 celdas implicadas y a una capa contenedora.
El atributo position: absolute, posiciona un elemento de manera absoluta respecto a su contenedor, que si no establecemos ninguno, sería la ventana del navegador, con los problemas entre distintas resoluciones que esto nos puede provocar.
La clave está en establecer una capa contenedora de nuestro layout y poner el atributo position: relative, pero sin fijar ni las posición vertical (top) ni izquierda (left). De esta manera conseguiremos que todos los elementos que se posicionen dentro de dicha capa, lo pueda hacer de manera relativa a ésta.
Para esto, simplemente, en las capas interiores deberemos de establecer position:absolute (a la contenedora), y fijar las coordenadas x (top) e y (left) a partir de las cuales se pintarán. Por supuesto también tendremos que fijar al menos su ancho y alto.
Para que podáis ver un ejemplo completo, os he preparado este archivo HTML con la información de estilos pertinentes, para que reviseis el código fuente y veais lo limpio que queda el código, además de lo sencillo que es posicionar los elementos. Os dejo comentada la versión líquida (ancho variable) para que podáis probarlo.
Espero que os sea de utilidad.
