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

David W — Mon, 27 Dec 2010 06:36:33 +0000

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

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

Bread Aisle
- white bread
- wheat bread
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

. Remember, the classes should be assigned to the
- ’s in question.
  
  We’ll that’s my solution, I hope it helps you out.

Create Two Column Table with Bullet Points Without Using

David W — Thu, 15 Oct 2009 01:51:06 +0000

Recently I had the task of adding bullets to items in a pre-existing two-column HTML table. I first started to look at how to add the bullets using css to format the

tags, and then I looked at using css to make two columns of separate lists using

tags. I eventually found an easier solution: ASCII codes. This article will provide a general overview the the options for creating a two column tabled with bulleted items.

Option 1: Modify the Table Markup
I looked at how I could manipulate the formatting of the table because I already had quite a few items into the table and I didn’t feel like cutting and pasting the items into two separate CSS lists (see below). I could have wrapped the columns in list tags, and then wrapped the table items in
tags but I didn’t feel like doing all of that typing. I thus decided that this method was not the way to go for me.

Option 2: Delete the Table and Create a Two Column Layout of Individual Lists with CSS
Getting rid of the table and creating two columns, each with a css list was probably the best approach and most standards-compliant approach. This approach also would be the fastest one to update if I ever decided to change the bullet to something else in the future. The reason I didn’t choose this method is because I didn’t feel like adding the new
tags and floats I would need to setup the columns within the preexisting code. One of the problems with this approach could be with older browsers that don’t do well with css. (as always that’s a decision to make based on your website demographic). Although I do admit that this solution would only have taken around 10 minutes to implement, I chose not to use it because I found a faster way to solve the problem: ASCII characters.

Option 3: Use ASCII Characters
So for the quick and dirty solution, I used the ASCII code for the bullet and placed it in front of each item in the list in my table. The ASCII code (entity number for HTML) for a bullet is: &8226; . Some argue, however, that is it is better to use the entity name for special characters instead of the entity number. The entity name for the bullet is: •.

Here is an example (I’ve omitted the table and tr tags for brevity):

•Your Text Here

The drawback of this approach is that using ASCII codes may not be visible in browsers that are not using the standard set of English/Western European (Latin) character encoding.

It’s up to you to decide which solution is best for your specific site and audience, noting the advantages and disadvantages of each method.

HelpSpa » (X)HTML

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

Create Two Column Table with Bullet Points Without Using