CSSRule: The Café Tutorial 10

Monday, May 11, 2009

The Café Tutorial 10 - Lists

There are three types of lists in XHTML. The ordered list, or ol, is used for data that is strictly sequential in content such as the step by step instructions for installing a home filtration system, or an itinerary of sites to be visited by a tour bus. Unordered list, or ul element, is for itemizing data that have a common thread but no particular sequence. Listing the landmarks to visit in a city is an examples of an unordered list. After you mark up a whole list as either an ol or a ul, each list item has to be marked up with the list item element li.

For ordered lists, the browser automatically assigns a number for every li.

<p>My itinerary in L.A. :</p>

<ol>
<li>Disney Concert Hall</li>
<li>MOCA - Modern Art Museum</li>
<li>The Getty Museum</li>
<li>Universal City</li>
<li>Venice Boardwalk</li>
<li>Disneyland</li>
</ol>

My itinerary in L.A.:

Disney Concert Hall

MOCA - Modern Art Museum

The Getty Museum

Universal City

Venice Boardwalk

Disneyland

You get several different options for markers in unordered lists, from the default filled-in disc or a bullet as it more commonly known to Roman numerals. You can also print your own graphic in place of the default disc because CSS gives us the ability to change the marker through the "list-style-type" property which specifies the appearance of the list item marker. The value 'none' specifies no marker, otherwise there are three types of markers: glyphs, numbering systems, and alphabetic systems.

<p>Places to visit in L.A.:</p>

<ul>
<li>Disneyland</li>
<li>Disney Concert Hall</li>
<li>MOCA - Modern Art Museum</li>
<li>Venice Boardwalk</li>
<li>The Getty Museum</li>
<li>Universal City</li>
</ul>

Places to visit in L.A:

Disneyland

Disney Concert Hall

MOCA - Modern Art Museum

Venice Boardwalk

The Getty Museum

Universal City

Glyphs are specified with disc, circle, and square. Their exact rendering depends on the user agent. Most common numbering systems are decimal, numbers beginning with 1, lower-roman or upper-roman. We can also make our own markers through the list-style-image property which lets us change the appearance of the default marker.

This rule changes the marker from the default disc to a checkmark:

ul {
   list-style-image: url(/pics/check.gif);
}

Places to visit in L.A:

Disneyland

Disney Concert Hall

MOCA - Modern Art Museum

Venice Boardwalk

The Getty Museum

Universal City

Or, if you want no markers,

ul {
   list-style-type: none;
}

Places to visit in L.A:

Disneyland

Disney Concert Hall

MOCA - Modern Art Museum

Venice Boardwalk

The Getty Museum

Universal City

The markers completely disappear and you get a list with indentation. We can look at the automatic margins/paddings assigned to a generic ul by the browser and adjust spacing. Here's a snapshot from Firebug tool. The layout window shows that left-padding is set to 40 pixels:

We can shrink the padding with a CSS rule:

ul { padding-left: 18px; margin-bottom:5px; margin-top: 5px;
}

Places to visit in L.A:

Disneyland
Disney Concert Hall
MOCA - Modern Art Museum
Venice Boardwalk
The Getty Museum
Universal City

Same list using a gif image for the markers:

Places to visit in L.A:

Disneyland
Disney Concert Hall
MOCA - Modern Art Museum
Venice Boardwalk
The Getty Museum
Universal City

Finally we have the Definition List in XHTML which is used for a list of terms and corresponding definitions. Definition lists are marked up by the dl element and each list item is identified by the dt and dd element pair. While dt stands for definition term, dd is for the definition itself. Definition lists are not very commonly used but since I want to give an example, I will turn my coffee subdivision from a paragraph based mark-up to a definition list since the content fits the list element well.

<dl>
<dt>Jamaica Blue Mountain</dt>
<dd>One of the world’s finest coffees is grown below the rich rain..</dd>

<dt>Nepal Everest</dt>
<dd>From the magestic Himalayans, Nepal Everest coffee has a spicy.....</dd>

<dt>Viennese Blend</dt>
<dd>Vienna-style roasting creates a deep brown, medium dark roast.....</dd>
</dl>

For CSS rules I added the following to style the font for the definition term and also zero out the indentation for definitions.

dt {
  display:block;
  font-size:1.17em;
  font-weight:bold;
  margin:1em 0;
}
dd { margin:0; padding: 0; }

When you look at our Cafe menu, two sections look like they are good candidates for unordered lists.

<h3>Cookies</h3>
<p>Each $2.00</p>
<ul>
<li>Peanut Mice</li>
<li>Chocolate Chip</li>
<li>Chocolate Nib Medallions</li>
</ul>

<h3>Macarons</h3>
<p>Each $3.50</p>
<ul>
<li>Red Ketchup with Relish</li>
<li>Double Chocolate</li>
<li>Pistachio Cream</li>
<li>Hazelnut Herme</li>
</ul>

Since I do not want markers, I set the list type to none in my CSS:

ul  {  list-style-type: none;  }

Our cookie unordered list with disc styled default list markers and when list-style-type is set to none in the CSS.

Finally a new feature I developed for our tutorial sessions that'll allow readers follow different sections easily. I will discuss "The Related Posts" feature next. Here's a sneak preview: