CSS-Formatierung von Sitemaps, Beispiel 16

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;
   }

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>