- Impact
- 3
Recently I had to jazz up my default templates and thought hard about how to make graphic borders easy for anyone to implement. Here is the solution I came up with. It is the easiest method I can think of but I wonder what other techniques people are using.
For example, imagine a comment box and you want a pretty shadowed border around it. There are 2 conditions on this:
1) the verticle size is variable since you don't know how large a comment someone wants to leave.
2) The horizontal size is fixed. The page designer decides that.
Solution:
3 div blocks: header, body, footer.
The left and right borders are comprised of the background of the body where left/right padding is used so text doesn't cover the border.
<div class='header'></div>
<div class='body'>comment here</div>
<div class='footer'></div>
div.header { width: 100px; background-image: url(h.png); height: 10px; }
div.body { width: 80px; padding: 10px; background-image: url(b.png); }
div.footer { width: 100px; background-image: url(f.png); height: 10px; }
The key to this method is that the left and right borders are actually shown through the left and right padding of the body div, not in their own divs. Notice the width and padding of the body div compensates for this.
This solution leaves things pretty easy to allow css to completely control whether or not the block has a border at all, and what it will look like.
For example, imagine a comment box and you want a pretty shadowed border around it. There are 2 conditions on this:
1) the verticle size is variable since you don't know how large a comment someone wants to leave.
2) The horizontal size is fixed. The page designer decides that.
Solution:
3 div blocks: header, body, footer.
The left and right borders are comprised of the background of the body where left/right padding is used so text doesn't cover the border.
<div class='header'></div>
<div class='body'>comment here</div>
<div class='footer'></div>
div.header { width: 100px; background-image: url(h.png); height: 10px; }
div.body { width: 80px; padding: 10px; background-image: url(b.png); }
div.footer { width: 100px; background-image: url(f.png); height: 10px; }
The key to this method is that the left and right borders are actually shown through the left and right padding of the body div, not in their own divs. Notice the width and padding of the body div compensates for this.
This solution leaves things pretty easy to allow css to completely control whether or not the block has a border at all, and what it will look like.
