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.
and 
Of these two books, I enjoyed The Principles of Beautiful Web Design the most. It’s separated into sections on Layout and Composition, Color, Texture, Typography & Imagery. Obviously these aren’t as in depth as an entire book on each section, but it serves as a great introduction for each principle. Along with general tips and theories on each section, the book also follows along with a real life example. This really helps to see the principles in practice. With that said, the author is careful not to say that their method is the only way, but does give a lot of advice on how to organize the creation of a website. I also learned that there are a few principles that I need to work on, mainly Typography & Texture. This book is highly recommended since it’s good for a straight read thru, but also worth keeping on the shelf for reference.
