Design für die Steuerung auf der linken Seite

Wir wollen als Design für die Steuerung links, Abstände zwischen den Aufzählungspunkten. Die Links in der ersten Ebene (Startseite, über diese Website) haben keine Aufzählungspunkte. Die Unterpunkte von „über diese Website“ bekommen als Aufzählungspunkte Quadrate.

Um das Design für die Steuerung zu machen, benötigen wir das Element, das wir über CSS ansprechen können. Die Steuerung steckt in dem Element <nav> mit der Bezeichnung von der ID steuerunglinks.

<nav id="steuerunglinks">
  <ul>
    <li><a href="index.htm">Startseite</a></li>
    <li><a href="ueber-die-website.htm">über diese Website</a>
      <ul>
        <li><a href="einzelteile.htm">Einzelteile</a></li>
        <li><a href="design-verwenden.htm">Design verwenden</a></li>
      </ul>
    </li>
  </ul>
</nav>

Darauf können wir dann bequem mit CSS zugreifen.

Im ersten Schritt kommen die Abstände. Wir geben der Liste <ul> einen Abstand nach links mit.

#steuerunglinks ul {
    padding-left: 2em;
}

Wir bekommen dadurch nun folgendes Aussehen im Browser:

Beachtenswert ist, dass die ersten Aufzählungspunkte, wie erwartet den 2em Abstand nach links halten. Die Unterpunkte halten noch mehr Abstand. Klar wird, wenn wir uns den HTML-Code oben ansehen. Die Unterpunkte stecken im Bereich #steuerungslinks zwei Mal in einem ul! Somit summiert sich das auf und wir erhalten einen Abstand für die Unterpunkte von 4em, was praktisch ist und für uns passt. Wollten wir das beeinflussen, würde der Selektor in CSS wie folgt aussehen:

#steuerunglinks ul ul {
    ...

Die Aufzählung soll noch einen Abstand nach oben von 20 Pixeln erhalten (wie bereits in der Spalte bei den Bildern angegeben).

#steuerunglinks ul {
    padding-left: 2em;
    padding-top: 20px;
}

Die einzelnen Punkte sollen auch Abstand zueinander halten.

#steuerunglinks li {
    padding-bottom: 0.5em;
}

Aufzählungszeichen der Liste je nach Ebene

Wir wollen nun für die erste Ebene keine Aufzählungszeichen. Auch für die Art der Aufzählungszeichen gibt es eine CSS-Anweisung mit der Bezeichnung list-style-type.

#steuerunglinks ul {
    padding-left: 2em;
    padding-top: 20px;
    list-style-type: none;
}

Auch bei den Unterpunkten wird das Aufzählungszeichen gekillt.

Ab der zweiten Ebene sollen doch Aufzählungszeichen in Form von Quadraten kommen. Dazu müssen wir nur alle ab der zweiten Ebene ansprechen:

#steuerunglinks ul {
    padding-left: 2em;
    padding-top: 20px;
    list-style-type: none;
}

#steuerunglinks ul ul {
    list-style-type: square;
}

Zum Vergleich ist oben im CSS-Code auch noch die erste Ebene aufgeführt.

Diese Art der Steuerung, mit blau unterstrichenen Links, hat durchaus auch seinen Zweck. Jeder wird das sofort als Link identifizieren und diese nutzen. Hat man als Zielgruppe Menschen, die wenig Zugang zum Internet haben, sind diese über Standards froh. Macht man zu viel Design um Links, können diese unter Umständen nicht einmal mehr als Links erkannt werden. Dafür gibt es zahlreiche schlechte Beispiele im Netz. Besonders hässlich, wenn es Links im Inhalt sind.