CSS-Formatierung von Sitemaps, Beispiel 13

1.

Abschnitt

1.1

Kapitel

1.1.1

Unterkapitel

1.1.2

Unterkapitel

1.2

Kapitel

1.2.1

Unterkapitel

1.2.2

Unterkapitel

1.2.3

Unterkapitel

2.

Abschnitt

2.1

Kapitel

2.1.1

Unterkapitel

2.1.2

Unterkapitel

2.2

Kapitel

2.2.1

Unterkapitel

Das Style-Sheet dieser Seite:

body {
   font: 15px sans-serif;
   background-color: #fff;
   color: #000;
   padding: 0;
   margin: 0;
   }
DIV#sitemap {
   padding: 1em 1.5em;
   line-height: 25px;
   }
DIV#sitemap DD {
   margin: -25px 0 0 100px;
   padding: 0;
   }
DIV#sitemap DD.one {
   font-size: 1.25em;
   font-weight: bold;
   }
DIV#sitemap DD.two {
   font-weight: bold;
   }
DIV#sitemap DT.one {
   font-size: 1.25em;
   font-weight: bold;
   margin-top: 10px;
   }
DIV#sitemap DT.two {
   font-weight: bold;
   }

Das HTML für die Sitemap:

<div id="sitemap">
<dl>
<dt class="one">1.</dt><dd class="one">Abschnitt</dd>
<dt class="two">1.1</dt><dd class="two">Kapitel</dd>
<dt>1.1.1</dt><dd>Unterkapitel</dd>
<dt>1.1.2</dt><dd>Unterkapitel</dd>
<dt class="two">1.2</dt><dd class="two">Kapitel</dd>
<dt>1.2.1</dt><dd>Unterkapitel</dd>
<dt>1.2.2</dt><dd>Unterkapitel</dd>
<dt>1.2.3</dt><dd>Unterkapitel</dd>
<dt class="one">2.</dt><dd class="one">Abschnitt</dd>
<dt class="two">2.1</dt><dd class="two">Kapitel</dd>
<dt>2.1.1</dt><dd>Unterkapitel</dd>
<dt>2.1.2</dt><dd>Unterkapitel</dd>
<dt class="two">2.2</dt><dd class="two">Kapitel</dd>
<dt>2.2.1</dt><dd>Unterkapitel</dd>
</dl>
</div>