CSS-Formatierung von Sitemaps, Beispiel 17

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: 30px;
   }
DIV#sitemap DD {
   margin: -30px 0 0 70px;
   padding: 0;
   }
DIV#sitemap DD DL {
   margin-top: 30px;
   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>1.</dt>
  <dd>Abschnitt</dd>
  <dd><dl>
      <dt>1.1</dt>
      <dd>Kapitel</dd>
      <dd><dl>
          <dt>1.1.1</dt>
          <dd>Unterkapitel</dd>
          <dt>1.1.2</dt>
          <dd>Unterkapitel</dd>
          </dl>
      </dd>
      <dt>1.2</dt>
      <dd>Kapitel</dd>
      <dd><dl>
          <dt>1.2.1</dt>
          <dd>Unterkapitel</dd>
          <dt>1.2.2</dt>
          <dd>Unterkapitel</dd>
          <dt>1.2.3</dt>
          <dd>Unterkapitel</dd>
          </dl>
      </dd>
      </dl>
  </dd>
  <dt>2.</dt>
  <dd>Abschnitt</dd>
  <dd><dl>
      <dt>2.1</dt>
      <dd>Kapitel</dd>
      <dd><dl>
          <dt>2.1.1</dt>
          <dd>Unterkapitel</dd>
          <dt>2.1.2</dt>
          <dd>Unterkapitel</dd>
          </dl>
      </dd>
      <dt>2.2</dt>
      <dd>Kapitel</dd>
      <dd><dl>
          <dt>2.2.1</dt>
          <dd>Unterkapitel</dd>
          </dl>
      </dd>
      </dl>
  </dd>
</dl>
</div>