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.
and definition lists
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é
- 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
- 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.
- Beat egg whites to a stiff peak
- Combine the rest of the soufflé ingredients
- Fold eggs whites into this mixture
- Pour into a buttered baking dish
- Mix topping ingredients
- Sprinkle mixture over soufflé
- Bake in a preheated 350° oven for 35-40 minutes
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
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.Last updated: Monday, October 20th, 2008 @ 4:32 PM EDT [2008-10-20T20:32:33Z]