Index by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

Making a List Presentation Rich with Imagery

Problem

You want to add attention to a list by complementing it with rich imagery.

Solution

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

First, create a background image for the unordered list set and an image for the list marker, as shown in Figure 6-12.

The two images used for our custom list presentation

Figure 6-12. 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, setting it to the same width as the background image, as shown in Figure 6-13:

ul {
    background: url(list-bkgd.gif) bottom;
    width: 298px;
    list-style: none;
    padding: 0 0 12px;
    margin: 0;
}
Background image for the entire list, set

Figure 6-13. Background image for the entire list, set

Next, include the list marker through the list item. Also, place borders at the bottom to act as dividers between the list items, as shown in Figure 6-14:

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;
}
Completing the presentation with the styled list items

Figure 6-14. Completing the presentation ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required