The most common mistake is placing the nested list outside
any list items, as shown in the following incorrect example:
- List item one
- Nested list item one
- Nested list item two
- List item two
- List item 'n'
Nested lists must be placed inside a list item, after the relevant item that leads into the
nested list. Here??™s an example:
- List item one
- Nested list item one
- Nested list item two
- List item two
- List item 'n'
Always ensure that the list element that contains the nested list is closed with an end tag.
Not doing so is another common mistake, and although it??™s not likely to cause as many
problems as the incorrect positioning of the list, it can still affect your layout.
Styling lists with CSS
Lists can be styled with CSS, making it easy to amend item spacing or create custom bullet
points. I tend to think bullet points work well for lists. They??™re simple and??”pardon the
pun??”to the point. However, I know plenty of people would rather have something more
visually interesting, which is where the list-style-image property comes in.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
108
list-style-image property
The list-style-image property replaces the standard bullet or number from an
unordered or ordered list with whatever image you choose. If you set the following in your
CSS, the resulting list will look like that shown to the right.
Pages:
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185