CSS-Formatierung von Sitemaps, Beispiel 18

1.

Prima Sezione

1.1

Eu lenis consequat exputo illum multo vero uxor caecus.

1.1.1

Exputo ideo sino sed qui, importunus, suscipit refoveo. Fatua vulpes magna genitus eum loquor uxor, abbas turpis secundum. Exerci facilisi praesent ex usitas comis vereor reprobo dignissim ingenium, paratus volutpat importunus ludus. Importunus esca delenit oppeto ratis velit eros aliquip exerci ullamcorper wisi te metuo. Populus imputo accumsan molior ut fatua qui meus brevitas occuro. Vel nisl roto humo et interdico. Brevitas utinam autem capio adipiscing distineo feugiat volutpat antehabeo augue.

1.1.2

Letatio damnum te damnum populus usitas epulae damnum iriure, qui, abbas in antehabeo exerci, premo. Rusticus cui diam valetudo venio ventosus consectetuer fere duis et. Jugis iaceo ibidem sagaciter nonummy pertineo pagus abluo autem consequat uxor iaceo iusto verto, nostrud. Consectetuer in ut consequat quae loquor diam, genitus macto. Nutus esca, hendrerit dolor, quidne esse natu dolore, nunc vulputate, feugait consequat. Laoreet vulputate abigo singularis iusto, si.

1.2

Causa venio enim torqueo, in, enim quidem bene quae multo vero.

1.2.1

Abigo abbas, jugis dolore abluo at autem. Genitus eum neque sed consequat epulae sed. Vero antehabeo quia nisl vulputate fere elit. Plaga eligo modo torqueo qui eum. Appellatio quidem nutus quidne ideo natu modo magna vulputate wisi eum indoles sit. Commoveo facilisi iriure lobortis iaceo, ideo tation volutpat esse. Vero, quae ad incassum wisi lucidus nibh, dolor, jus qui praesent. Pertineo causa hos feugait nostrud aptent te.

1.2.2

Suscipit at occuro multo esse veniam ex os haero foras. In consequat, quadrum jumentum, quis, meus opto feugiat, ullamcorper. Odio quia consectetuer lobortis dolore facilisi illum valde abigo vicis sagaciter diam enim. Natu incassum blandit hos, delenit euismod dolus gravis validus. Adipiscing secundum iaceo in praesent utinam, vulputate, melior, quod.

1.2.3

Facilisi enim quidne ut similis, fatua, refero dolore dignissim tincidunt quibus fatua. Aliquip hendrerit neque elit exerci, iusto macto sagaciter enim vindico luctus imputo, jus. Huic fatua quis ut duis validus.

2.

Seconda Sezione

2.1

Feugiat iustum, rusticus vicis duis accumsan vel at enim epulae oppeto.

2.1.1

Lucidus quidne ea reprobo sed macto minim sino huic praemitto reprobo vero paulatim rusticus et. Te eu eum vulputate quibus, quibus ne ullamcorper, te eu ea ideo iustum ulciscor, ullamcorper. Erat, utinam nisl vindico nulla suscipere delenit commodo abdo capio adsum, vel. Nimis duis aliquip odio odio nibh typicus fatua iriure exerci. Refero quidem consequat rusticus delenit feugait iustum bis quod. Exerci illum mos et cui ludus comis capto epulae interdico qui quod nisl te.

2.1.2

Ea, nulla illum abluo laoreet dignissim augue capto decet veniam ventosus minim antehabeo nostrud. Damnum et ventosus genitus plaga in aliquip ea duis persto vulpes letalis vulputate dolus, pagus. Rusticus lobortis os in illum ludus suscipit odio in eros aptent praesent loquor. Probo esse sagaciter transverbero os in aliquip macto. Minim eu scisco lobortis olim nostrud aliquip. Praesent, nonummy blandit vel volutpat regula natu enim suscipit odio hendrerit. Virtus odio capio ille praemitto bis quia, abbas iusto populus praesent ea ludus. Suscipit illum sit aptent ex ventosus aliquip enim pala zelus in.

2.2

Eligo delenit ex secundum foras ut.

2.2.1

Quis opes in epulae voco feugait blandit. Nisl, facilisis nunc, delenit cogo, sed, neo tum demoveo. At, turpis facilisis feugait, mara letatio vulputate qui immitto praemitto, in consectetuer, proprius enim. Blandit autem rusticus duis ratis abdo macto consectetuer hendrerit modo modo suscipit cogo magna. Luptatum bis metuo ea esse nunc. Mos, torqueo caecus dignissim, populus, consequat diam, volutpat hendrerit vel, causa nisl iaceo neque.

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 class="one">1.</dt><dd class="one">Prima Sezione</dd>
<dd><dl>
    <dt class="two">1.1</dt><dd class="two">Eu ...</dd>
    <dd><dl>
        <dt>1.1.1</dt><dd>Exputo ...</dd>
        <dt>1.1.2</dt><dd>Letatio ...</dd>
        </dl></dd>
    <dt class="two">1.2</dt><dd class="two">Causa ...</dd>
    <dd><dl>
        <dt>1.2.1</dt><dd>Abigo ...</dd>
        <dt>1.2.2</dt><dd>Suscipit ...</dd>
        <dt>1.2.3</dt><dd>Facilisi ...</dd>
    </dl></dd>
</dl></dd>
<dt class="one">2.</dt><dd class="one">Seconda Sezione</dd>
<dd><dl>
    <dt class="two">2.1</dt><dd class="two">Feugiat ...</dd>
    <dd><dl>
        <dt>2.1.1</dt><dd>Lucidus ...</dd>
        <dt>2.1.2</dt><dd>Ea, ...</dd>
    </dl></dd>
    <dt class="two">2.2</dt><dd class="two">Eligo ...</dd>
    <dd><dl>
        <dt>2.2.1</dt><dd>Quis ...</dd>
    </dl></dd>
</dl></dd>
</dl>
</div>