WEB STANDARDS CREATIVITY

98
While floats and image replacement are still fresh in your mind, let’s give the list of worry topics and its heading some
stylish treatment. Once again, use the Phark method to replace the heading text.
div[id="content_sub"] h4 {
height : 35px;
width : 300px;
padding : 0;
background : url(../images/h4.png) no-repeat;
text-indent : -9999px; }
The list of topics that the site’s team of experts can worry about on your behalf will be transformed into a three-column
design. You can achieve this by floating each of the list items and by using a background-image to provide a decorative bullet
to complete the effect.
div[id="content_sub"] ul {
float : left;
padding-bottom : 80px; }
div[id="content_sub"] li {
display : block;
float : left;
width : 190px;
padding-left : 20px;
background : url(../images/li.png) no-repeat 0 50%; }
The result is shown in Figure 4-8.
Figure 4-8. Floating list items: an effective way of creating column designs with simple lists
Styling the footer
Footers can sometimes be neglected parts of a design. Often, their minimal treatment can make your eyes simply wander off
the bottom of the page.
The WorrySome.net footer features a smaller version of the main logo and one of those ever so useful top links, so that the
site’s visitors won’t need to worry about getting out of breath by scrolling all that distance up to the top of the page.