Posicionamiento complejo con capas
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.
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 al Libro "CSS Profesional" (Wrox - Anaya Multimedia), 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: absolute, 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:relative (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.
Hacer una pregunta
La imagen de la empresa es crucial para la supervivencia de un negocio.
Artículo donde se explica qué es el diseño gráfico y cuáles son las funciones principales que un diseñador gráfico lleva a cabo.
En el mundo del Render de Arquitectura y de la Infografía 3D se tiene a hacer cada vez las imágenes más realistas, dejando de lado la vertiente conceptual de esta disciplina. Con este artículo pretendemos ahondar en estos dos tipos de grafismos, diferenciándolos y reflexionando sobre que puede aportar cada uno de ellos dependiendo de el uso que se les quiera dar o del público al que se destinan.
Si tenemos nuestro pequeño negocio, sin duda la imagen es nuestra primera tarjeta de presentación. Un buen logotipo ayuda a tener éxito.
Diseños de Tatuajes te ofrece la mayor selección de galardonados diseños de tatuajes. Buscar a través de nuestro sitio para encontrar miles de diseños de tatuaje!
Cada época experimenta mutaciones relacionadas con sus condiciones tecnológicas y socio-políticas. La letra, como elemento dependiente de estos aspectos, muta según las necesidades, adoptando matices en su dibujo. Vivimos en una época que se ha desplazado de la tradición alfabética a una circunstancia algo confusa. Si tal desplazamiento es cierto ¿deberíamos preguntarnos por las letras antes que por la tipografía? ¿O debiéramos pensar en un nuevo alfabeto con su nueva gramática cultural?
Conoce cuales son los principios basicos en la creacion de un cartel Publicitario, sus estrategias comunicacionales y software para su realizacion.
Si estás buscando desesperadamente algún regalo interesante para estas navidades, te proponemos un calendario digital.
Continuación de CSS semánticas. Un nuevo enfoque, y trata de dar una serie de consejos o recomendaciones a la hora del uso de hojas de estilo y escritura de código XHTML.
Existen infinidad de sitios en Internet que ofrecen miles de propuestas diferentes a la hora del uso de hojas de estilo CSS en la maquetación de portales web, como sabemos aplicables a múltiples tecnologías: XHTML, Flash, etc... Lo que es difícil de encontrar es aquella solución que se adapte perfectamente a tus desarrollos, a tu entorno concreto.
Agregue un nuevo comentario
Comments on this article
> position: absolute
me encanta: lo has explicado justo al revés de como está en el código de ejemplo, además de ser un artículo para pre-beginners: qué pasa si las capas crecen? si tienen que soportar contenido dinámico?...
Un saludo
relative con absoluto = diseño bonito