Styling the li Element

Styling the <li> Element

The list must be displayed across the screen rather than down. This is achieved by setting the <li> to display: inline.

Next, a graphic bullet needs to be added to the <li>. The best way to do this is by using a background image set with background: url(header-bullet.gif) no-repeat 0 50%;. This will place one image vertically centered beside each list item.

Padding will need to be added to move the text away from the background image. In this case, padding: 0 10px 0 8px; will be used as shown in Listing 18.8. This will apply 10px of padding to the right and 8px to the left of each list item. The results can be seen in Figure 18.6.

Listing 18.8. CSS Code for Styling the <li> Element

body {     margin: 0;     padding: 0;     text-align: center;     font: 85% arial, helvetica, sans-serif;     background: #B0BFC2;     color: #444; } #container {     text-align: left;     margin: 0 auto;     width: 700px;     background: #FFF; } h1 {     margin: 0;     padding: 0;     border-bottom: 1px solid #fff; } h1 img {     display: block;     border: 0; } ul#topnav {     margin: 0;     padding: 5px 10px;     list-style-type: none;     background: #387A9B; } ul#topnav li {     display: inline;     background: url(header-bullet.gif) no-repeat 0 50%;     padding: 0 10px 0 8px; } 

Figure 18.6. Screenshot of styled <li> element.