Recipe 5.7. Making a List Presentation Rich with Imagery

Problem

You want to create added attention to a list with rich imagery.

Solution

Integrate the background images for both the ul and li element.

First, create a background image for the unordered list set and an image for the list marker (see Figure 5-11):

Figure 5-11. The two images used for our custom list presentation

Next, set up the unordered list element to bring in the background image. Also, include the width property set to the same width as the background image (see Figure 5-12):

ul {     background: url(list-bkgd.gif) bottom;     width: 298px;     list-style: none;     padding: 0 0 12px;     margin: 0; }

Figure 5-12. Background image for the entire list is set

Next, include the list marker through the list item. Also, place borders at the bottom to act as dividers between the list items (see Figure 5-13):

ul {     background: url(list-bkgd.gif) bottom;     width: 298px;     list-style: none;     padding: 0 0 12px;     margin: 0; } li {     color: #eee;     font-family: Verdana, Arial, Verdana, sans-serif;     padding: 7px 7px 7px 20px;     border-bottom: 1px solid #888;     background: url(list-marker.gif) no-repeat 5px .8em; }

Figure 5-13. The styled list items complete the presentation

Discussion

A number of different techniques come together to achieve this solution. The first part of the solution deals with placing a background image into the ul element. Since the image has a set width and height, make sure to set the width through CSS.

For the height, there are many issues that keep web developers from setting that property. A user might increase the size of the default text making the text larger or smaller. Also, the style for the list may be used for lists with a high or a low number of items.

In order to compensate for almost any situation, the background image needs to have a large height. In this solution, the background image is set to 465 pixels, which is more than enough space for normal view of a handful of items. However, in case someone's browser has set the fonts to a large size, the design solution is still intact, as shown in Figure 5-14.

Figure 5-14. The design holds together as text size increases

Since the background image has curved edges on the bottom, padding of 12 pixels was applied to the bottom so that the list items would not cover it up. Also, the positioning of the background image was set to bottom. This allowed the background image to always display the curves even if the text size expands or the number of list items increases.

Next, the list items involve a couple of techniques. First, dividers are placed between the list items. Unlike in Recipe 5.3, a divider isn't needed on the bottom of the ul element. Second, the list markers are inserted by using the technique from Recipe 5.6.