CSS für Anfänger: Liste mit automatischer Nummerierung

Wie Sie mit CSS eine elegante nummerierte Liste erstellen

In meinem heutigen Artikel möchte ich Ihnen zeigen, wie Sie eine einfache HTML-Liste (<ol> = mit automatischer Nummerierung) mit einigen wenigen CSS-Anweisungen in eine raffinierte und optisch ansprechende Liste verwandeln können.

Grundlagen

Mit dem HTML-tag <ol> leiten Sie eine nummerierte Liste ein (ol = ordered list = nummerierte Liste). Mit <li> beginnt ein neuer Punkt innerhalb der Liste (li = list item = Listeneintrag). Mit dem Befehl </li> beenden Sie den Listeneintrag. Und der HTML-tag </ol> beendet dann die Liste. <ol> steht für englische "ordered list" = sortierte Liste.

Ich verwende für die optische Verbesserung der Nummerierung den HTML-Befehl <span>. Dieser ist ein HTML-Element, das Text und andere Inline-Elemente enthalten kann, selbst aber keinerlei Eigenschaften hat und nichts bewirkt. Es ist dazu gedacht, um mit Hilfe von CSS formatiert zu werden.

<span> leitet einen allgemeinen Inline-Bereich ein. </span> beendet diesen Bereich. In meinem Beispiel sind jeweils die Ziffern 1, 2 und 3 in ein span-Element eingeschlossen und bei jedem span-Element wird mit Hilfe von CSS der Nummerierung eine spezielle Formatierung zugewiesen.

Nummerierte Liste mit CSS verschönern

Fertiges Beispiel ansehen: hier anklicken! | Fertiges Beispiel herunterladen: hier anklicken!

Wie Sie aus der Grafik ersehen können, genügen einige kleine CSS-Befehle, um eine normale nummerierte Liste in eine elegante umzuwandeln.

CSS-Formatierung:

div {
  width: 400px;
  margin: 10px auto;
}

ol {
  color: #ccc;
  list-style-type: none;
}

ol li {
  position: relative;
  font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
  margin-bottom: 20px;
}

li p {
  font: 12px/1.5 Helvetica, sans-serif;
  padding-left: 60px;
  color: #555;
}

span {
  position: absolute;
}

HTML-Code:

<div>
  <ol>
    <li>
    <span>1.</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.
    Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit
    amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis.
    Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt.
    Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem.
    Vivamus varius condimentum dolor, quis ultricies ipsum porta quis.</p>
    </li>

    <li>
    <span>2.</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.
    Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet
    est posuere consectetur.</p>
    </li>

    <li>
    <span>3.</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam
    quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est
    posuere consectetur.</p>
    </li>
  </ol>
</div>

Fertiges Beispiel ansehen: hier anklicken! | Fertiges Beispiel herunterladen: hier anklicken!

Genaueres über die HTML-Listenformatierung finden Sie hier: Grundlagen zur Textformatierung | Elemente für Textbereiche

Quelle: Codepen

Tweet about this on TwitterShare on Google+0Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *