Der eigene Onlineshop für Fotografen

Workshop HTML5 & CSS3 - Stephan Heller

Der Beitrag "HTML Listen - Darstellungsvarianten per CSS" besteht aus zwei Seiten

HTML Listen - Darstellungsvarianten per CSS - ungeordnete Listen

Unterschiedlichen Listenzeichen

Neben geordneten Listen ol bietet HTML auch ungeordnete Listen ul. Grundlage für die folgenden Varianten stellt folgender Quellcode dar.

HTML:

<ul >
    <li>Lawrence Bender</li>
    <li>Michael Jacobs</li>
    <li>Duncan Kenworthy</li>
    <li>Niki Marvin</li>
</ul>

Für dieses Bespiel werden zwei Regeln definiert, damit die Liste etwas anschaulicher ist.

CSS:

ul li {
    padding: 4px;
}
ul li:nth-of-type(2n-1) {
    background-color: antiquewhite;
}

Ohne weitere Angaben werden ungeordnete Listen mit einem vorangestellten Bullet angezeigt. Dies entspricht dem Schlüsselwort disc.

Hier stehen Alternativen zur Verfügung wie beispielsweise square für eine Quadrat oder circle. Alle möglichen Parameter sind unter www.css-wiki.com -> list-style-type zu finden.

  • Lawrence Bender
  • Michael Jacobs
  • Duncan Kenworthy
  • Niki Marvin

Listenzeichen ändern

Über die gleiche Eigenschaft list-style-type beziehungsweise über die Kurzschreibweise list-style können auch bei ul-Listen die Listenzeichen verändert werden.

In der Tat kann man über ein Schlüsselwort für ein Zählzeichen eine ungeordnete Liste ul wie eine geordnete ol aussehen lassen und umgekehrt. Allerdings würde ich das als schlechten Stil bewerten, ein HTML-Listenelement im Inhalt einer Seite sollte auch nur mit sinnvollen Werten im CSS gestaltet werden.

CSS:

ul {
    list-style-type: circle;
}
ul li {
    color: red;
}
ul li:nth-child(3) {
    list-style-type: square;
}
 

Über list-style-type: circle; wird aus dem Bullet ein Kreis als Listenpunkt definiert. Da diese Regel an das ul-Element gekoppelt ist, wirkt diese auf die ganze Liste.

Aber auch die Steuerung eines einzelnen Listenpunktes ist möglich. Da über die letzte Regel der Selektor ul li:nth-child(3) an das li-Element gekoppelt ist, und der Strukturselektor :nth-child(3) eingesetzt ist, wird hier der 3. Listeneintrag mit einem anderen Listenzeichen angezeigt.

  • Lawrence Bender
  • Michael Jacobs
  • Duncan Kenworthy
  • Niki Marvin

Farbe des Listenpunktes ändern

Wie im letzen Beispiel zu sehen ist, wird die Farbe des Listenzeichens über die Textfarbe des Listenpunktes bestimmt. Die Farbe des Listenpunktes kann man nicht einzeln steuern. Ein kleiner Trick ist notwendig, um Farben von Listenpunkt und Listeneintrag unterschiedlich erscheinen zu lassen.

<li><span>Lawrence Bender</span></li>

Im HTML werden die Listeneinträge mit einem zusätzlichen span versehen. Darüber hat man dann die Möglichkeit, über das li eine Farbdefinition zu vergeben, damit wird die Farbe des Listenpunktes bestimmt. Über das span kann dann eine andere Farbe für den Text vergeben werden.

ul li {
    color: red;
}
ul li span {
    color: blue;
}

Über diese CSS-Regeln werden die unterschiedlichen Farben definiert. Das Ergebnis dieses CSS-Codes sieht dann wie folgt aus:

  • Lawrence Bender
  • Michael Jacobs
  • Duncan Kenworthy
  • Niki Marvin

Eigene Listenzeichen definieren / Grafiken als Listenzeichen

CSS3 bietet zwar einige Varianten für Zählzeichen und Listenzeichen, allerdings reicht das manchmal nicht aus, um eine Liste zu gestalten.

Zu diesem Zweck sieht CSS die Möglichkeit vor, ein eigenes Listenzeichen zu definieren, und zwar als Grafik, vergleichbar mit einer Hintergrundgrafik.

ul li {
    list-style-image: url('../_img/pfeil.png');
}

Über list-style-image kann eine Grafik definiert werden. Der Pfad bezieht sich dabei auf die CSS-Datei. Eine individuelle Positionierung dieser Grafik nach oben oder unten ist allerdings nicht möglich, hier muss die Grafik bzw. das Listenzeichen innerhalb der Grafik angepasst werden, wenn das Listenzeichen nicht auf der gewünschten Höhe ist.

  • Lawrence Bender
  • Michael Jacobs
  • Duncan Kenworthy
  • Niki Marvin

Weiterführende Links

Alle Details zu CSS-Eigenschaften rund um Listen sind unter folgenden Links zu finden. Wem diese Möglichkeiten nicht reichen, sollte eine Blick auf die Eigenschaften content, counter-increment und counter-reset werfen. Damit können die Zählschritte beeinflusst werden oder auch negative Zählzeichen definiert werden. Allerdings sind diese Eigenschaften recht komplex und werden von älteren Browsern nicht unbedingt unterstützt.


Der Beitrag "HTML Listen - Darstellungsvarianten per CSS" besteht aus zwei Seiten

© 2013 - Stephan Heller [daik.de]

Buchempfehlungen