CSS Snippet – Listenpunkte mit Überschrift

Bei der Erstellung meiner Equipment-Seite stieß ich auf das Problem, einer HTML-Liste (in diesem Fall <ol>, eine geordnete Liste) für jeden Listenpunkt eine Überschrift hinzufügen zu können. Hiermit ist keine Überschrift im semantischen Sinne gemeint, sondern im visuellen. Die erste Zeile der Liste sollte immer Fett sein und eine andere Farbe haben. Früher hätte ich um jede erste Zeile ein <span> mit entsprechender CSS Formatierung gelegt. Viel zu kompliziert und zuviel Aufwand!

Lösung:
Völlig vergessen hatte ich, dass es doch eine schöne CSS Pseudoklasse gibt, namens :first-line. Also frisch ans Werk und eine Klasse für die Liste geschrieben, die jedem Listenpunkt eine fette, andersfarbige erste Zeile zuweist. Die Klasse wird dem <ol> (oder auch <ul> Element folgendermaßen zugewiesen:

<ol class="liste">
<li>Inhalt, der fett sein soll <br/>
Inhalt, der nicht extra formatiert wird </li>
</ol>

Der CSS Code der dafür Notwendig ist ist eine CSS Klasse die mit li:first-line immer die erste Zeile der Liste anspricht.

.liste li:first-line {
font-weight:bold;
color:#deba1e;
}

Ein Beispiel wie das aussehen kann gibt es hier.

Update (17.03.2008)
Leider sind sich die verschiedenen Browser noch nicht darüber einig, wie das dann in der Darstellung aussehen sollte. Unterschiede ergeben sich in der Darstellung der Zahl bei einer geordneten Liste. Diese wird entweder genauso formatiert wie die erste Zeile (IE 7, Opera 9), oder so formatiert wie der übrige Text (Firefox 2, Safari). Wäre mal eine Diskussion wert, ob der Listenpunkt zur ersten Zeile gehört, oder nicht.

« Studio / Internet     WordPress 2.5 Release verschoben »

2 Kommentare

  1. Gravatar von JCG   JCG
      schrieb am 27. Juni 2008

    Zwei weitere Möglichkeiten:

    1.) Die fett zu schreibende Zeile entweder als definieren (sofern das optische „fett“ auch inhaltlich bedeutender ist als der normal geschriebene Rest; em dann im Stylesheet Fettschrift zuweisen)

    oder

    2.) mit

  2. Gravatar von JCG   JCG
      schrieb am 27. Juni 2008

    Die Tags werden nicht angezeigt…

    1.) em

    2.) span

Some rights reserved 2005-2017  Moritz Gießmann
Die Inhalte (Texte / Fotos) des Weblogs werden, sofern nicht anders angegeben, unter der Creative Commons Lizenz veröffentlicht.
http://www.dead-pixel.de läuft mit WordPress