Geronimo89.dk

A blog about me, my doings and everything I think deserves attention.

CSS box, with graphic borders

box marked 295x300 CSS box, with graphic borders

First of all, we need a graphic as a basis how our css box is going to look. I’ve just chosen a box with a dropshadow. Now we use the help lines in GIMP or Photoshop to divide it into 3 pieces and save these parts into new files. 1: top.png, 2: middle.png, 3: bottom.png. Now we got our 3 different graphics, we can start the CSS work. First of all we need a basic html file.

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title>Our nice CSS box</title></head>
<body>
</body>
</html>

To this we start adding a div container for the box, right below the body tag. In the box, I added a heading <h1> and a placeholder div for the bottom graphic.

<div class=”box”><h1>heading</h1>
<p>Yourcontent
</p>
<div class=”bottom”></div>
</div>

Now we can start defining the css attributes of the different html objects. You can link an external css file, or just paste the css into the html file. For this simple project I will just insert the css directly into the head of the html file. Generally you should use external css files to keep everything tidy and clear.

So, here’s the code I use in the head tag:

<style type=”text/css”>
h1 {
background-image: url(top.png);
background-repeat: no-repeat;
height: 44px;
width: 266px;
font-family: Verdana;
font-size: 12px;
margin:0px;
padding: 0px;
}

.box p {
background-image: url(middle.png);
background-repeat: repeat-y;
min-height: 400px;
margin: 0px;
padding: 16px;
font-family: Verdana;
font-size: 10px;
max-width: 250px;
}

.box {
margin: 0px;
padding-top: 44px;
}

.bottom {
height: 39px;
width: 266px;
background-image: url(bottom.png);
background-repeat: no-repeat;
background-position: bottom;
}
</style>

If I skip some of the css code explanation here, just try it out yourself or look it up in a css reference. Noteable css code: We use padding:0; and margin:0; to force the elements to be without spacings inside and outside them. Another thing is, that we control the background image very explicit. We define exactly if and how it’s going to be repeated. In box p {} we add padding: 16px; because we need some spacing because of the graphic. As we can see below, we can’t use the full area of the graphic, because we don’t want text on the drop-shadow.

middle marked CSS box, with graphic borders
A thing you can do for optimization is, that you scale your middle.png to 1px height. It will probably look the same, but increase the loading speed of your website a little bit. By the way, Internet Explorer 6 doesn’t support transparent pngs so you should maybe add a Firefox/Opera/whateverbrowser link to your website.

Give me the first comment

Leave a Reply