Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

Verschachtelte Listen

Listen können ineinander verschachtelt werden. Achten Sie im folgenden ToDo darauf, dass das <li> am Anfang des zweiten Listenelements, »Wichtige HTML-Elemente«, erst einige Zeilen tiefer nach Beendigung der verschachtelten Liste geschlossen wird.

ToDo: Erstellen Sie eine verschachtelte Liste
  1. Ergänzen Sie die Liste auf der Beispielseite um den hervorgehobenen Quelltext:

    <ul>
      <li>So funktioniert HTML</li>
      <li>Wichtige HTML-Elemente
        <ul>
          <li>Überschriften</li>
          <li>Absätze und Listen</li>
          <li>Links und Grafiken</li>
        </ul>

      </li><!-- beginnt VOR "Wichtige HTML-Elemente" -->
      <li>Gestalten mit CSS</li>
    </ul>

  2. Speichern Sie die Webseite und betrachten Sie sie im Browser.

Die verschachtelte Liste sieht im Browser so aus:

Abbildung 3.7: Eine verschachtelte ungeordnete Liste im Browserfenster
Abb. 3.7: Eine verschachtelte ungeordnete Liste im Browserfenster

Schematische Darstellung der verschachtelten Liste

Zum besseren Verständnis hier ein Schema der Listenkisten aus dem Beispiel:

Abbildung 3.8: Listenkisten – schematische Darstellung der verschachtelten Liste
Abbildung 3.8: Listenkisten – schematische Darstellung der verschachtelten Liste

Bei der Gestaltung mit CSS ist die korrekte Verschachtelung der Kisten im HTML-Quelltext wichtig, um später einzelne Listenkisten gezielt gestalten zu können.

Verschachtelte Listen und visuelle Editoren

Falls Sie einen visuellen Editor wie Dreamweaver benutzen, sollten Sie nach der Erstellung einer verschachtelten Liste den Quelltext überprüfen, denn viele visuelle Editoren schreiben bei  verschachtelten Listen falschen Quelltext.

Im Browser sieht zunächst alles okay aus, aber beim Gestalten mit CSS kann es wichtig werden, dass die Listen korrekt verschachtelt sind.