Spring.Into.HTML.and.CSS [Electronic resources] نسخه متنی

Nesting Lists

Sometimes it's very helpful to have nested lists when using both unordered and ordered lists. A nested list is a list within a list. To create a correctly nested list in XHTML, the trick is to be sure the nest is contained completely within an open and closing list item element (see Example 2-6).

Example 2-6. Nesting an Ordered List Within Another Ordered List

<ol>
<li>Beat eggs, flour, butter and sugar until creamy</li>
<li>Pour into round baking pan</li>
<li>Slowly add and swirl the following ingredients in order:
<ol>
<li>Add the chocolate sauce, </li>
<li>Now, add the cinnamon crunchies, </li>
<li>Add 1 tsp nutmeg</li>
</ol>
</li>
<li>Place in oven and bake for 40 minutes</li>
</ol>

Figure 2-6 displays the results.

You can use a variety of list types in combination when nesting, as follows:

Ordered lists within ordered lists

Ordered lists within numbered lists

Numbered lists within numbered lists

Numbered lists within ordered lists

Say you have an ordered list describing your recipe, but the added ingredients are optional rather than sequential (see Example 2-7).

Example 2-7. Combining nested list types

<ol>
<li>Beat eggs, flour, butter and sugar until creamy</li>
<li>Pour into round baking pan</li>
<li>Slowly add and swirl any one or combination of the following ingredients:
<ul>
<li>chocolate sauce</li>
<li>cinnamon crunchies,</li>
<li>1 tsp nutmeg</li>
</ul>
</li>
<li>Place in oven and bake for 40 minutes</li>
</ol>

You'll notice right away that any nested unordered list has an open rather than solid bullet. This is typical default browser behavior. Using CSS, you can modify the numbered and bullet styles for your nested lists.