How to Manage Multiple Level Lists in Dreamweaver – Bullets, Letters, Numbers

Every so often I come across a deep-level list that needs to be put into an HTML document.  You can make yourself nuts with tons of classes, ID’s and the like, but found that by creating classes for the styles you need, you can save yourself a lot of time.

Thus, for each list-style: that I need, I create a CSS class:

.olDecimal li {list-style: decimal;}
.olAlpha li {list-style: lower-alpha;}
.olRoman li {list-style: lower-roman;}

These three classes will make my <UL> or <OL> with a decimal, lowercase alpha, or lowercase roman list-style: . Now I simply assign the class I want to the list in question, and I’m done.

This setup is particularly useful for a list like the following:

  1. Bread Aisle
    • white bread
    • wheat bread
  2. Meat and Fish Aisle
    • Chicken
    • Beef
      1. Hamburgers
      2. Steak
    • Tuna Fish

Getting the “Hamburgers” and “Steak” entires to have a lowercase roman text style can get a little tricky — especially on deeper and larger lists. So by assigning the .olRoman class, to the <ul> under the Beef section, you can easily make this change.  Using this method  you can easily get the list-style formatting you want. And to get even more precise, you can make the white and wheat breads (as well as Chicken, Beef and Tuna Fish) with lowercase alpha text (a., b.) by assigning the class .olAlpha to the  <ul> below the Bread Aisle <li>.  Remember, the classes should be assigned to the <UL> that proceeds the <li>’s in question.

We’ll that’s my solution, I hope it helps you out.

Tagged ,

Related Posts

| More

SpiderOak Online Backup, Storage, Access, Sync, and Sharing

We are currently offering a free copy of our 16-page eBook, "How to Organize your Digital Photography Collection" to everyone who signs up for our free newsletter. This eBook will review how to organize your digital photos, discuss metadata, and give you an overview of software than can help you with your digital photography workflow. Sign up in the signup area, located in the right-side column of every page on this site, and read your copy now!