Sonderzeichen und Bilder für Listen

Die feuch-kalt-trüben zwei Grad draussen und ein Lockdown sind ideal für Spielereien mit CSS drinnen 🤯.

Quelle: Der Beitrag CSS list-style-image von Mediaevent.de. Übrigens ein guter Tip zum Nachschlagen bevor man zu den dicken Schmöker wie W3Schools greift.

Listen verschönern

Egal ob Ul, Ol oder Dl (früher: Definition List) kann das Code-Beispiel leicht angepasst werden. Als Hobby-Webdesigner achte ich wie schon erwähnt auf valides Html und CSS sowie schnelle Ladezeiten und SEO. Das ist manchmal etwas mühsam – zwei Drittel dieses Beitrags habe ich im Code-Editor verbracht. Doch mangels sinnvollem Content habe ich ja sonst nichts zu tun.

Auf genannten Gründen entschied ich mich für die Resourcen schonende Variante mit Unicode Sonderzeichen. Das verwendete Sonderzeichen im Beispiel ist die Arabische Ligatur Sallallahou Alayhe Wasallam (ﷺ) . Hoffentlich habe ich nicht damit einen religiösen Frevel begangen 😰.

Als Beispiel findet ihr eine handcodierte (!) Description List in meinem Beitrag WordPress Sicherheit Check.

Code is Poetry


dl.ceck {
    list-style-type:none;
}
dl.check dt::before { 
    color:green; 
    font-size: 1em;
    content: "ﷺ "; 
               |
               +-- Leerzeichen für den Abstand
}
dl.check dt {
    font-weight: bolder;
}

Lieber doch mit Bildchen

content: url(listen-bild.png) " " 
                   ^           ^
                   |           |
   url des Bildes  +           |
ein Leerzeichen Abstand lassen +

Diesen Code habe ich im Customizer unter Benutzerdefiniertes CSS eingetragen. Im Beitrag selbst habe ich (natürlich im Code Editor) die Liste mit dl class="check" … /dl eingefügt.

Tip: Es kommt vor, dass ihr den Code Editor nicht korrekt verlassen könnt (Meldung: “zuletzt bearbeiteter Absatz kann im visuellen Editor nicht dargestellt werden”). Keine Panik! Schaltet wieder um in den Code Editor und sucht den Html-Fehler im zuletzt bearbeiteten Absatz – Wetten ihr findet zumindest einen?

Würde mich freuen, wenn jemand etwas von meinem Geschwafel brauchen kann.

Also bis bald und Bleibts gsund!

Schreibe einen Kommentar