With the popularity of widgets and grid styles in web design, there is a need for appealing content boxes. Here is the HTML and CSS on how to recreate the content boxes we used on the State Bar of Wisconsin home page.
Sample Box
- List Item 1
- List Item 2
- List Item 3
First, the HTML:
<div class="homeBox">
<h2>Sample Box</h2>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
<img alt="" class="homeBoxBottom" src="/demos/homeToolsBackgroundBottom.png">
</div>
The image at the bottom is the one problem to this method. The image is purely aesthetic and probably shouldn’t be in the content. The rest is nice, since it’s simply a div and an h2. I used an image at the bottom since the box would have a variable height. There are other methods around this, but they would have also used extra mark up.
Next, the CSS.
.homeBox {
padding-top: 30px;
position: relative;
background-image: url(demos/homeToolsBackground.png);
background-repeat: repeat-y;
width: 230px;
}
.homeBox h2 {
background-image: url(/demos/homeToolsHeader.png);
width: 230px;
background-repeat: no-repeat;
color: white;
display: block;
font-size: 16px;
font-weight: normal;
height: 26px;
padding: 2px 0 0 20px;
position: absolute;
top: -2px;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-size: 16px;
}
.homeBox .homeBoxBottom {
bottom: -2px;
position: absolute;
}
There isn’t anything too complicated here. The h2 includes the black & red image and it uses the full width of the div. It’s positioned absolutely and pushed 2 pixels out of the base div. It’s nice that the h2 is completely semantic and flexible, but still highly stylized.
The div has a 1px high image that gets repeated. This is what creates the impression of the header of the box being wider than the actual content of the box. If you don’t care to have that aesthetic, you could remove the images and just use a border. This would also solve the img issue in the HTML above.
This stylized content box is a good example of decisions that you sometimes have to make between style and semantics.
