Lesefortschritt:

Übersichtliche Listen mit Führungslinien gestalten

8. November 2023 | CSS-Stylesheet, Divi-Theme, HTML, Word­Press

Trick # 290 | Dieser Beitrag beinhaltet 731 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.

Besonders Preislisten oder andere Tabellen werden schnell mal unübersichtlich: User können die Zeile «verlieren». Sie können helfen und das Auge beim Lesen «führen». Das geht ganz einfach.

Das Beste: Dieser Trick funktioniert im Divi-Theme, unter Word­Press generell aber auch da, wo immer Sie HTML einsetzen. Um ihn umzusetzen, benötigen Sie zunächst eine Liste wie nebenan:

  • Artikel #1CHF 7.80
  • Artikel #2CHF 9.50
  • Artikel #3CHF 2.30
  • Artikel #4CHF 4.10
  • Artikel #5CHF 8.90

Fügen Sie dafür den folgenden Code in der HTML-Ansicht Ihres Editors ein. Im Divi-Theme können Sie anstelle des Text-Moduls auch ein Code-Modul einsetzen:

<ul>
	<li><span>Artikel #1</span><span>CHF 7.80</span></li>
	<li><span>Artikel #2</span><span>CHF 9.50</span></li>
	<li><span>Artikel #3</span><span>CHF 2.30</span></li>
	<li><span>Artikel #4</span><span>CHF 4.10</span></li>
	<li><span>Artikel #5</span><span>CHF 8.90</span></li>
</ul>

Nun müssen Sie den Tag <ul> noch mit einer Klasse ergänzen. In unserem Beispiel heisst diese dot-leaders.

Ersetzen Sie also das <ul> in obigem Code mit diesem Passus:

<ul class="dot-leaders">

Nun folgt etwas CSS-Code. Diesen fügen Sie in das Stylesheet Ihrer Website ein – im Backend unter Design/Customizer/Zusätzliches CSS:

ul.dot-leaders {
    max-width: 40em;
    padding: 0;
    overflow-x: hidden;
    list-style: none;
}
ul.dot-leaders li:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}
ul.dot-leaders  span:first-child {
    padding-right: 0.33em;
    background: white;
}
ul.dot-leaders span + span {
    float: right;
    padding-left: 0.33em;
    background: white;
}

Und schon haben Sie aus der obigen unübersichtlichen Liste eine lesefreundliche hergestellt:

 

Cool! Oder?

  • Artikel #1CHF 7.80
  • Artikel #2CHF 9.50
  • Artikel #3CHF 2.30
  • Artikel #4CHF 4.10
  • Artikel #5CHF 8.90

Werbung

Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.