+What we can draw or print on paper is sometimes a little harder to achieve in the wonderful wobby world of web design.
Part of a client design request —handed to me as a crayon drawing on a bleached sheet of A4— were two rough and aberrant intersecting lines intended for the division of the website's structural areas.
Let's superimpose some of those ubiquitous pale grey boxes on the draft to visualise the layout:
Had the edges of the lines been consistent, we could have just put them in containing spans and juggled the values for padding and margins to line them up. Yet these lines have some keen individuality to express —as well needing to hint at the notion of impermanence as an inescapable fact of human existence (anicca).
The solution that came to me —as I sat beneath the willow that passes for a banyan tree— is to make the green horizontal line a background image of the header div (the header div encompasses the left-hand logo area in a span).
The horizontal line is then placed as a background image and positioned at the base of the header div. The red line is a transparent PNG and floats over the top of the green line.
div#header{ height: 220px;
margin-bottom: 10px;
background:#ffffff url('../greentop.png') no-repeat bottom left; }
The vertical red line is the tricky part and is placed in its own floating div. Set the z-index to something higher than 0 so it remains on top of the underlying elements. I chose z-index: 70 as it is the world's smallest weird number. Absolute positioning only works if you have specified a relative value to the element that encloses the stacked div:
#redline { position: absolute;
top: 30px;
left: 150px;
z-index: 70;
background: url('../redtop.png') no-repeat;
height: 746px;
width: 12px; }
Then adjust the placement values of top, left, right, and bottom to get the line exactly where you want it.
Two further intersecting lines are used diametrically at the bottom of the website design. But the technique can be used anywhere. It works a treat at children's parties as well.
And the sun still glitters through the leafy lances of the willow tree and I hold it to be true. It is true. You can find salvation in the smallest of details. You can also find headaches, but then that's why someone came up with C13H18O2.
