CHAPTER 13 ■ BLOCKSLists
Problem You want to lay out a block as a bulleted or numbered list.^
Solution You can embed content in list items (
(bulleted) lists (
- ) or ordered (numbered) lists (
- ). You can increase the left margin to make more room for markers, as I did
in the example.
You can create a faux marker by wrapping any content you want in a span. This allows you
to use any text as a marker, and you can style it in any way! You can use float:left to float
the span to the left. You can use margin-left:-WIDTH to move it into the left margin the
same distance as its width and its parent’s left margin. You can also align its content to
center.
Patterns
- CONTENT
or <ol><li> CONTENT </li></ol>
or <ul><li> <span class="faux-marker"> MARKER </span> </li></ul>
or <ELEMENT class="listed"> CONTENT </ELEMENT>
or <PARENT class="list">
<CHILD class="marker"> MARKER </CHILD> CONTENT </PARENT>
HTML
CSS ul { margin-left:0; padding-left:0; }^
ul li { margin-left:WIDTH; }
.listed { margin-left:WIDTH; display:list-item; list-style:disc; }
.list { margin-left:WIDTH; }
.marker { float:left; margin-left:-WIDTH; width:WIDTH; }
Related to Structural Meaning, Visual Structure, Background Bulleted, Inlined; Structural Block
Elements, Multi-purpose Block Elements (Chapter 2); Display, Block Box (Chapter 4);
Margin, Padding (Chapter 6); Float and Clear, Relative Float (Chapter 7); Offset Float
(Chapter 8); Rollup, Tab Menu, Tabs, Flyout Menu, Layout Links (Chapter 17)
- ).
You can use the list-style-type property to assign the type of marker displayed to the
left of a list item. The bullet markers include disc (the default), circle, and square. The
numbered markers that work in all major browsers include decimal (the default), lower-
alpha, upper-alpha, lower-roman, and upper-roman. Using list-style-type, you can even
force numbered list items to display bullets and vice versa! You can hide the marker using
list-style-type:none.
You can use list-style-image to display an image in place of the marker. In the example,
the marker-custom class uses the rule list-style-image:url("check.gif") to display a
check-mark image as the marker.
You can use list-style-position:inside to place the marker inside the list’s margin,
which allows subsequent lines to wrap under the marker.
You can use display:list-item to render any block or inline element as a list item, and a
browser will display a marker in its left margin. You can apply any list-style rule to the
element to style the marker. This can be useful when you have inline elements in
MicroFormats that you want to style as lists (see http://microformats.org for more
information on using MicroFormats).
All major browsers indent lists by 40 pixels, but they differ in how they do it. Some set
margins to 40 pixels, and others set padding. For consistent results, you can assign margin-
left:0; and padding-left:0; to
- and
- , and you can assign margin-left:WIDTH to
list items (