Custom Lists

I see CSS lists, they're everywhere! The horizontal navigation bar above and to the right is a list. The vertical menus to the left are special forms of lists. The next and previous links near the bottom of the page is also a list. I'm surrounded by them. No, the PebblesDoesn't anyone remember the fairy tale?

Hansel & Gretel didn't get lost until they followed the breadcrumbs. Hence, I call my interface (white) Pebbles. interface above this paragraph is not a list — but it could easily be one.

Abacus. Interestingly, the origin of our word calculate is the Latin calculi which means pebbles or limestone. The ancient Romans used a form of the abacus, or portable counting board, which predates the Chinese one most people are familiar with. The device is a frame or tablet on which beads or stones are moved up or down to hold values. The full adder in the transistors/microchips of modern computers and calculators works in much the same manner as an abacus.

But before I digress even further into etymology, let's get back on the dusty trail of lists. Computer scientists just adore lists. Linked lists, stacks, queues, trees...

But when most people think of lists they think of a scrap of paper you take to the grocery store so you don't forget something. Simple lists.

XHTML defines three basic types of lists. Unordered lists <ul>, ordered lists <ol> and definition lists <dl>. In keeping with a uniform overall look and feel of my site I'll use CSS to style the first two types, and leave it up to the reader to research the third. Tutorials on the advanced use of lists such as those mentioned above are available on the Web. Listamatic is an excellent place to visit, as is ALA.

Well, good morning. Here in the US it's Thanksgiving day so how about testing out our new list classes on a recipe? Yesterday my sister Peg asked me to find one online, which I did:

Sweet Potato Soufflé

Ingredients:

• 3 cups sweet potatoes: boiled, peeled and mashed
• 1 cup sugar
• 2 eggs, separated
• 1/3 stick butter or margarine
• 1 teaspoon vanilla extract
• 1/2 cup milk
• Topping:
  • 1 cup brown sugar
  • 1/3 cup flour
  • 1/3 stick butter or margarine, melted
  • 1 cup chopped pecans

This of course is an unordered list. After all it make no difference if you get the eggs or the milk out of the fridge first. However, there is an order to how you prepare the dish.

Directions:

1. Beat egg whites to a stiff peak
2. Combine the rest of the soufflé ingredients
3. Fold eggs whites into this mixture
4. Pour into a buttered baking dish
5. Topping:
   1. Mix topping ingredients
   2. Sprinkle mixture over soufflé
6. Bake in a preheated 350° oven for 35-40 minutes
7. Serve

In both cases I've formatted the lists in a consistent and pleasing manner. In the case of the unordered list I've replaced the browser default bullets with custom background-images that are integral with the rest of the site design. Here's a link to the stylesheet if you're interested in reading the source code. Enjoy!

PS: The soufflé was delicious and a big hit at dinner.

Didn’t find what you were looking for? Try searching drx for many other helpful CSS resources.