Design Techniques
CSS: Cascading Style Sheets
Graphical Borders Using a 3 Column Approach
In this tutorial we're going to build up a panel exactly like the one this is written on. This panel is essentially 3 columns that expand vertically based on the content of the centre, a technique that is easy to do in a tables layout but requires a bit of thinking for CSS. I'm assuming a fair understanding of CSS and how to link one to a HTML file.
In this design the two outer panels will contain vertically tiling images to create the edges of the panel. We'll also be applying a top and bottom to the panel to complete the look.
Setting Up
I've included all the files you'll need to build this site in a zip file (9k). This includes the HTML and CSS files for reference and an image directory with the graphical elements we'll use.
The Top of the Panel
We'll start at the top because it's nice and easy. The top consists of image at the topright and topleft and a horizontal tile running between them. I've also included a body style as the panel looks a bit weird without it.
The CSS for the body and top look like this:
body { margin: 0 0 0 0; padding: 0 0 0 0; background-color:#003366; background-image: url(images/backdrop.gif); background-repeat:repeat; font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size:0.8em; } div.paneltopleft { position:absolute; top:50px; left:0px; background-image: url(images/tb2-topleft.gif); background-repeat: no-repeat; width:136px; height:69px; z-index:2 } div.paneltopright { position:absolute; top:50px; right:0px; background-image: url(images/tb2-topright.gif); background-repeat: no-repeat; width:87px; height:69px; z-index:2 } div.paneltoptile { margin:50px 87px 0 136px; background-image: url(images/tb2-toptile.gif); background-repeat: repeat-x; height:69px; }Nothing too tricky so far. The topleft and topright images are positioned absolutely and the tile is positioned with the margins.
The HTML looks like this:
<div class="paneltoptile"> </div> <div class="paneltopleft"> </div> <div class="paneltopright"> </div>You should be seeing something in the browser that looks like the top of a panel
Next we'll build up the columns for the content and edge images.
- The Top
- The Centre
- The Base
