A c t i o n f o r L i b r a r i e s — A p r i l 2 0 0 4

The Internet Connection

By Michael Sauers

Rethinking Lists: Coding in CSS (Part I)
With the use of cascading style sheets (CSS) becoming the standard in Web page creation, I've been thinking a lot about lists and how best to code them. I have come to the realization that the creation of a list and the use of bullets may actually be completely unrelated to each other.

Many library Web sites make use of lists as menus, frequently on the home page, if not elsewhere. Most often, bullets are not the desired format for a menu, so many Web designers code their menus like this:

XHTML Code


  <p>

  Item #1 <br />

  Item #2 <br />

  Item #3 <br />

  Item #4 <br />

  </p>

Resulting Menu
Item #1
Item #2
Item #3
Item #4

But if you look at this menu, it is actually a list. (Whether it is an unordered or ordered list may be a matter for debate, which I'll ignore here.) But if we set up this menu as a list (below) using standard XHTML coding, bullets result.

XHTML Code


  <ul>

  <li>Item #1 </li>

  <li>Item #2 </li>

  <li>Item #3 </li>

  <li>Item #4 </li>

  </ul>

Resulting Bulleted List

Item #1
Item #2
Item #3
Item #4

However, with a little bit of CSS, a Web designer can make the bullets disappear. We'll create a list that looks exactly the same as the first, paragraph-based sample list above, but this list will be coded using proper CSS:

CSS Code


  ul   {margin: 0; padding: 0; list-style-type: none;}

  li   {margin: 0; padding: 0; list-style-type: none;}

The "margin" and "padding" properties have been set to zero to eliminate both the margins and padding that the browser automatically adds to list items. (Feel free to change these settings as required by your Web page design.) The "list-style-type" property replaces the "type" property that HTML designers use to change the bullet style. In this case, setting the property to "none" turns the bullets off. (Something you can't do in markup.)

Next month in "Rethinking Lists: Coding in CSS (Part II)," we'll add hyperlinks and create rollover effects without using any JavaScript.

Next Article | Previous Article | Table of Contents | BCR Publications