• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Styling the <li> Element

The list items will now have a background image applied to them to act as a bullet. You will use background: url(header-bullet.gif) no-repeat 100% .4em; to place the background image against the right edge of the <li> element, and .4em from the top. The image is also set to no-repeat, so it does not repeat across the entire <li> element.

Padding can then be applied to the right edge and bottom of the <li>. The right padding will move the list content away from the edge so that it does not appear over the top of the background image. The bottom padding is used to provide some space between list items as shown in Listing 19.8. The results can be seen in Figure 19.7.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint