Graphics Programs Reference
In-Depth Information
h at color “shines through” the transparent portions of the background images, and all is well.
In cases where you don't want to i ll in column backgrounds, but just want liquid-friendly
separators, you can use the same CSS and replace the images. All you need is the vertically
repeating separator images with no extra; thus, they can be two pixels or i ve pixels or
however many pixels wide to contain just the separator. h en you repeat them vertically with
the same CSS as before.
.inner { background : url(sep01.png) 25% 0 repeat-y ; overflow : auto ;}
.contain { background : url(sep02.png) 75% 0 repeat-y ; overflow : auto ;}
h at's all it takes. If you i nd the separators are of by a pixel or two horizontally, just add a
pixel or two of transparency to the separator images.
h e name of this layout technique is more than a bit tongue-in-cheek, but its usefulness is
beyond question. Popularized by Alex Robinson in late 2005 (see http://positionis ), the core message is this: You can have
l oated columns laid out in an order independent from the document source order. h is is a
signii cant improvement on simple l oated columns (see previous sections), whose layout is
tied to source order.
To make this work, you need only your columns in div s and some CSS. No extra container
elements are necessary, as was the case with previous attempts to permit source-independent
l oat layout.
We start, as usual, with a set of three columns. In this case, the page's “main content” is in the
i rst column, and the “secondary” content and navigation links go into the next two columns.
< div class ="column one " > ... </ div >
< div class ="column two " > ... </ div >
< div class ="column three " > ... </ div >
To start things out, we'll l oat them all let and set some widths (see Figure 4-25). To keep
things simple, we'll use pixel widths, but please note that this works just as well with ems or
percentages. (h e only restriction is that all the columns use the same units for their width,
and even that is bendable.)
.column { float : left ; padding : 0 20px ; margin : 0 20px ;}
.two , .three { width : 200px ;}
.one { width : 300px ;}
Search WWH ::

Custom Search