Home arrow Web Standards arrow Page 6 - Get Down With Markup

Get Down With Markup

Lists may seem to be mundane items, but many pages on the Web include at least one. The way you choose to mark up these lists can make a big difference. This article explores several the advantages and disadvantages of several common markup methods. It is taken from chapter one of Dan Cederholm's book Web Standards Solutions: The Markup and Style Handbook (Apress, 2004; ISBN: 1590593812).

Author Info:
By: Apress Publishing
Rating: 3 stars3 stars3 stars3 stars3 stars / 11
February 15, 2005
  1. · Get Down With Markup
  2. · Quiz time
  3. · Method B: The bullet that bites
  4. · Method C: Getting closer
  5. · Method D: Wrapper’s delight
  6. · Extra credit
  7. · Getting fancier with custom bullets
  8. · Lists that navigate
  9. · Mini-tab shapes

print this article

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.


blog comments powered by Disqus

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials