Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.


Listen in CSS

Fürs Gestalten von HTML-Listen gibts eigentlich ein paar gut gemeinte CSS-Eigenschaften. Allerdings sind diese mangelhaft wenns um pixelperfekte Gestaltung geht, denn der Abstand zwischen Bulletpoint und Text kann nicht definiert werden. Einfach der Vollständigkeit halber hier die vier Varianten von «Bulletpoints»:

0

Präziser mit Hintergrundbild

Deaktiviert den Listenstil und platziert innerhalb der <li> ein Hintergrundbild. Damit dieses nicht vom jeweiligen Text verdeckt wird, brauchen die List-Items links etwas Padding. Mit Background-Position lässt sich das Bild pixelgenau positionieren.

0

Flexibler mit Pseudo-Elementen

Meistens verwende ich CSS-Pseudo-Elemente, denn damit kann ich meine «Bulletpoints» absolut frei positionieren. Anders als die Hintergrundbilder dürfen Pseudo-Elemente die Grenzen des <li> sogar sprengen. Hier ein Beispiel mit extra grossen Zeichen. Das Thema Pseudo-Elemente selbst werde ich andern Orts erklären. (Soviel vorab: Es können auch Bilder, Hintergrundbilder und Zähler in Pseudo-Elemente integriert werden.)

0

Wie ihr seht, wurde das Zeichen », für den Einsatz innerhalb von content:" " irgendwie seltsam codiert: \00BB. Das ist die CSS-Schreibweise für Hexadezimalwerte von Zeichen. Hiermit geht man auf Nummer sicher, dass das Zeichen browserübergreifend richtig gerendert wird. Mit diesem Entity-Converter könnt ihr sämtliche Zeichen konvertieren. Wie gesagt, braucht ihr hier den 

Satzkante

Listen kommen von Haus aus mit einem Innenabstand links. Die Bearbeitung dieses Paddings ist eigentlich immer nötig. Im Normalfall möchte man die Satzkante der Liste bündig mit der Textkante des restlichen Textes. Das Padding soll also auf Null (erstes Beispiel, div «A»). Mischt man verschiedene Schriftgrössen, müssen auch die entsprechenden Padding- oder Margin-Werte individuell angepasst werden (zweites Beispiel, div «B»). Aber das kennen wir ja grundsätzlich vom Arbeiten mit verschiedenen Schriftgrössen und unabhängig vom Web. Wenn nicht klar ist, was ich meine, ändert mal den Wert auf Zeile 6 von 2.8 em auf 3 em.

0

Ordered Lists mit Buchstaben oder römischen Zahlen

0

Nicht-arabische Nummerierung für rare Situationen

Wenn eine Schrift griechische, georgische und/oder armenische Zeichen enthält, kann per CSS auch eine entsprechende Nummerierung für ordered Lists verwendet werden. Gut zu wissen.

0

Ordered Lists mit Pseudo-Elementen

Beim Gestalten von nummerierten Listen will man eigentlich selten nichts an den Nummern verändern. Sobald man an der Position oder an der Schrift was ändern möchte oder beispielsweise Doppelpunkte statt der Punkte haben möchte, benötigt man Pseudoelemente mit einem Counter. Das sieht dann so aus.

0

counter-reset: klaus setzt den genannten Zähler an Ort und Stelle zurück. Will man den Zähler nicht zurückstellen, weil die darauf folgende Liste fortlaufend nummeriert werden soll, setzt man den counter-reset auf den Body oder sonst ein übergeordnetes Element. content: counter(klaus) platziert den genannten Zähler als Pseudo-Element und counter-increment: klaus; erhöht ihn jedes mal um 1. Bei Bedarf lässt sich das Pseude-Element mit Text ergänzen – vor oder nach dem Counter: content: "Nummer: " counter(klaus)


Verantwortlich:
Jürgen Wössner
E-Mail

Schwarzcode

Nachschlagewerk zur Ergänzung des Unterrichts in Frontend Development – und für mich. Sehr subjektiv gefärbt und ohne Anspruch auf Vollständigkeit.

Aber mit so einem kleinen Bildschirm hier ist das ganze echt nutzlos. Geh mal rüber an einen grösseren Bildschirm.