Videos eBook Forum Kontakt

jetzt Videos kaufen
damit HTML lernen ...
...
nicht für die Katz ist

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

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.

gewünschtes Aussehen der Steuerung links
gewünschtes Aussehen der Steuerung links

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:

Steuerung mit Abstand nach links
Steuerung mit Abstand nach links

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.

Zuviel Aufzählungszeichen ausgeblendet
Zuviel Aufzählungszeichen ausgeblendet

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.

Design der linken Steuerung wie gewünscht per CSS
Design der linken Steuerung wie gewünscht per CSS

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.