Lists; centering

Lists

Lists differ from ordinary text in two ways. Ordinarily they have space above and below; and list items can have inline markers—numbers or bullets. If you don’t specify the formatting of a list (its margins, padding, and so forth) the browser will apply defaults. These may or may not be to your liking. In the example below, the left margin, the space between the list-item numbers, and the space above and below the list have their default values. These will differ from browser to browser.

Top Three Philosophers

1. Kant
2. Hegel
3. Quine

The treatment of lists in CSS looks more complicated than it is in practice. CSS2 has provision for counters and counter-styles (see “Generated Content” in the CSS spec), but browsers don’t support it. The only “generated content” that you can expect most browsers to display is the content generated for list items (and by the :before and :after pseudo-elements).

The block-level formatting of lists is like that of other block-level tags. The only difference is that an <li> tag generates a principal box and a marker box. The marker box can contain a bullet of some sort or an index.

Position

The position of the marker box can be inside or outside the principal box; the default is outside. Example:

Top Three Philosophers

1. Kant was by far the greatest philosopher who ever lived. He makes everyone else look shallow. Not only that, but he wrote in German, and he took a walk at the same time every day. You could set your clock by him.
2. Hegel is said in his later years to have looked like “death upon the chair”. He wrote a lot of books. Some of them are called The Phenomology of spirit and The Philosophy of right.
3. Quine

Type

The “type” of a list item is the kind of bullet or the numbering system it uses.

For bullets, there are various default types, including disc, circle, and square. Browsers will generate more-or-less appropriate characters to realize these types.

Top Three Philosophers

1. Kant
2. Hegel
3. Quine

For numbers, there is a wide variety of options. The ones you are likely to use are decimal, lower-roman, upper-roman, lower-alpha and upper-alpha.

Top Three Philosophers

• Kant
• Critique of pure reason
• Dreams of a spirit-seer
• Hegel
• Phenomenology of spirit
• Lectures on the philosophy of art
• Quine
• Maimonides
• Crescas

Here’s the code for the list above:

<ul><!--ordered-->
<li style="list-style-type: lower-roman">Kant</li><!--item-->
<ul><!--xxx-->
<li style="list-style-type: lower-alpha"><i>Critique of pure reason</i></li><!--item-->
<li style="list-style-type: lower-alpha"><i>Dreams of a spirit-seer</i></li><!--item-->
</ul><!--xxx-->
<li style="list-style-type: upper-roman">Hegel</li><!--item-->
<ul><!--xxx-->
<li style="list-style-type: lower-alpha"><i>Phenomenology of spirit</i></li><!--item-->
<li style="list-style-type: lower-alpha"><i>Lectures on the philosophy of art</i></li><!--item-->
</ul><!--xxx-->
<li style="list-style-type: square">Quine</li><!--item-->
</ul><!--ordered--></div><!--indented-->

Notice that you can mix types in a single list. A list embedded within a list will be doubly indented as it would be in an outline.

Images as bullets

The “bullet” for a list item can be an image specified by the style sheet. Notice that the image has to be no taller than the line-height specified for the list items. If that is set in ems, you may have problems if the user sets the default font-size much smaller than you expect. The disadvantage of using list-style-image is that formatting is up to the browser. I found it difficult to position the bullet-image nicely. In the examples below, I’ve used background images instead to get the same effect.

• Quine
• Hegel
• Kant

li.listfig {

margin-left: -2em;
padding-left: 1.5em;
list-style-type: none;
list-style-position: inside;
background-image: url("images/listfig.png");
background-repeat: no-repeat;
background-position: 0% .625ex;
}

li.checkmed {

margin-left: -2em;
margin-bottom: .625em;
padding-left: 1.5em;
list-style-type: none;
list-style-position: inside;
background-image: url("images/checkmed.png");
background-repeat: no-repeat;
background-position: -2pt .25em;
}

Because the default in most browsers is to give an li tag a bullet (usually of disk type), if you want your default list times to be unadorned, you must specify that in your style sheet.

li {

list-style-type: none; }

Centering

Sometimes you want an image or a caption to be centered in the column it appears in. In CSS there is only one way to center anything: you put it inside a div with the attribute text-align: center.

Examples from the style-sheet for this weblog:

HTML:
<div class="imgboxcentered"><img src="http://tlonuqbar.typepad.com/djm/images/scrollsmall.png" alt="scrollsmall" title="Small scroll" /></div><!--image-->

Stylesheet:
.imgboxcentered {

padding-top:.5em;
padding-bottom:.5em;
padding-left:1em;
padding-right: 1em;
margin-top: 1em;
margin-bottom: 1em;
text-align: center;
}

Another example (a caption style):

.caption {

padding-top: .5em;
line-height: 1.25em;
text-align: center;
text-decoration: none;
font-size: .87em;
}