Animation


DIVs vs. Tables

Float Layouts

Inline Blocks

Block Layouts


Centering

Split Bkgrd

Graphic Borders

Horizontal Lists

CSS Colors


.htaccess

Block IPs

Down for Maintenance

Page Redirect

Custom Error Pages


Escaping query strings

PNG transparency

Google App testing

Flash Optimizing

Avoid AS Statics

SEO Optimization



DIV graphic borders

This is a very simple and clean method for making a graphic border in an HTML block element. There is no clutter of table cells and as few div blocks as necessary (just 3). The border can be changed, removed and the box resized by only changing the style sheet. In implementing this method there are 2 requirements to be met:

  • A header block, body block and a footer block are stacked
  • Each box gets a background image.
  • The 3 background images involved must also be 300px wide.
  • The header and footer should have fixed heights matching their background image sizes
  • The footer and header block widths must be same as their background images (300px).
  • Set the body left/right padding large enough such that the text does not overlap the color region of the left right borders in the background image (10px)
  • Set the body width to the width of the header minus the width of the left+right padding (=280px)
So after all those rules you get a bordered box with an adjustable height and fixed width.
Note that the background image of the body must merge cleanly with the bottom and top of the header and footer respectively. So really, you should aim for a body background image of a height of only 1px.

This method also permits heavy use of imagination to spice things up but again only requiring changes to the style sheet ... a speech balloon arrow can be added to the footer ... gradient added to the body ... thick CSS borders added for emphasis ... puffy clouds surrounding the whole block. Varying background-repeat (and other attributes) for the body block can give you very powerful affects when well planned.

See the code below...

HTML Code

<div class='cheader'></div>
<div class='cbody'>
So after all those rules you get a bordered box with an adjustable height and fixed width.
<br/>
Note that the background image of the body must merge cleanly with the bottom and top of the header and footer respectively. So really, you should aim for a body background image of a height of only 1px.
</div>
<div class='cfooter'></div>

CSS Code

div.cheader {
width: 300px;
background-image: url(images/box-top-300.png);
height: 17px;
}

div.cbody {
width: 280px;
padding-left: 10px;
padding-right: 10px;
background-image: url(images/box-bkgrd-300.png);
}

div.cfooter {
width: 300px;
background-image: url(images/box-bottom-300.png);
height: 20px;
}


Did you find this article userful for your website?
If so, why not provide a link to it? Just copy the following to your web page:

<a href='http://upwithabang.com/articles/css-graphic-borders.html'>Graphic borders on div sections</a>