HTML and CSS Reference
In-Depth Information
Figure 12-9. This side-by-side comparsion in IE shows that the background-image approach (on
the right) offers more fine-tuned control over positioning and alignment than using list-style-image
(on the left).
Right-Aligned Bullets
You can file this section under “curiosity” or “experimental.” A list item's symbol will, by default,
appear on the left. What if, for some crazy reason, you wanted the bullet to appear on the right
and have text right-aligned? Well, it's not possible to change the position of a real bullet point
symbol, but the background-image approach allows you to do that with this code:
ul li {
list-style:none;
background: url(bullet-reversed.gif) no-repeat right center;
padding-right:20px;
text-align:right;
}
The result is shown in Figure 12-10.
Figure 12-10. Right-aligned bullets? Whatever next?
Why you'd want to do this is another matter, but we put this in to emphasize that while
the list-style-image property is there for the taking, you'll probably get better mileage out of
the background approach.
Vertical Navigation Links
At the beginning of this chapter, we showed how a list containing links could be “flattened” to
make horizontal header links, but you're just as likely—if not more likely—to want to treat
a vertical list of links in a similar way. Remember in Chapter 8 when we were working through
common page elements? The fictional travel web site was almost completed, but not quite—
the links on the left and right sides in Figure 12-11 leave a bit to be desired.
Search WWH ::




Custom Search