Get Down With Markup - Extra credit
(Page 6 of 9 )
For extra credit, let’s look at a few different ways we can take advantage of our marked-up grocery list, using CSS to style it several different ways. We’ll throw away defaults, add custom bullets, and then turn it horizontal for a few navigation bar ideas.
Bite the bullet “But I hate the way the bullets look on my grocery list, so I should just keep using those <br /> tags.”
No need to revert to old habits—we can continue to use our structured unordered list and let CSS turn off the bullets and indenting (if that sort of thing floats your boat). The key here is to keep our list structured, and then let CSS handle presentation details.
First add a CSS rule that will turn off the bullets:
ul {
list-style: none;
}
the results of which can be seen in Figure 1-4.
Figure 1-4. A list with bullets turned off
Now, we’ll turn off indenting. By default, there is a certain amount of padding added to the left side of any unordered list. But don’t worry, we can just chop it off if we’d like:
ul {
list-style: none;
padding-left: 0;
}
The results are seen in Figure 1-5.
Figure 1-5. A list with bullets and indenting turned off
While the example in Figure 1-5 looks like we’ve just marked it up with a few <br /> tags, it’s still the same structured, valid, unordered list—ready to be viewed in any browser or device and styled differently with the update of a few CSS rules, if so desired.
 This chapter is from Web Standards Solutions: The Markup and Style Handbook by Dan Cederhold (Apress, 2004, ISBN: 1590593812). Check it out at your favorite bookstore today. Buy this book now.
|
Next: Getting fancier with custom bullets >>
More Web Standards Articles
More By Apress Publishing
