Complex Positioning With Layers

Posted February 15th, 2014 by Bryan

Probably to read the title of the post you’ve revived the greater of your nightmares as a web designer. The day that it occurred to someone that should leave layout with tables, more than one left the profession. Accessibility what is it? Jokes aside, we all know that our designs have to be accessible for many reasons, including positioning of our content, so one way and another we decided to follow these guidelines (more information on this website). There are several rules to follow, but perhaps the most tedious is the replace the layout of tables for layout of layers, something that seems almost impossible when it comes to making complex compositions of elements. I guess that many of you you have fought repeatedly with the proverbial float the div attribute.

The truth is that after much use it and fight with him, never convinced me really. Although much used mostly compositions by pages in 2-3 columns layout, begins to be very complicated to use when it is not so easy you have to layout in XHTML. Thanks to God and the professional CSS book (Wrox Anaya Multimedia), totally recommended 100%, di another solution which I think much more useful, allowing that your designs are total and truly cross-browser. The combined use of relative and absolute positioning. For a sample button. I have to lay out a 3 3 grid elements, typically a table, but with the use of layers (divs) and CSS only. While with floats, this seems far less complicated, you will see how with the use of relative and absolute positioning it simplifies greatly both the CSS as the number of layers is decreased to use, only 9 cells involved and a container layer.

The attribute position: absolute, positioning an element absolutely on its container, that if we do not establish any, would be the browser window, with problems between various resolutions that we may result. The key is to establish a container layer of our layout and put the attribute position: absolute, but not fix the vertical position (top) or left (left). This way will manage all elements that are positioned within such a layer, you can do relative to this. To do this, simply, in the inner layers must establish position:relative (a container), and set the coordinates (top) x (left) from which to be painted. Of course also have to fix at least its width and height. You can see a complete example, I’ve prepared this HTML file with information from relevant styles, so reviseis the code source and you see clean it that the code, as well as how easy that is to position the elements is. I leave commented out (variable width) liquid version so you can try it. I hope that you find it useful. Original author and source of the article.

Comments are closed.