Vorlage:Listenstile/styles.css: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Sonne7 (Diskussion | Beiträge) ((Korrektur) CSS-Code gesamt von Tag 'ul' auf Tag 'div' geändert - konkret alle Regeln bzgl. den beiden hier definierten Klassen 'liste-zaehler' und 'liste-display' vom Tag 'ul' auf das Tag 'div' geändert und mit Ausnahme der ersten Regel bei allen weiteren Regeln das Tag 'ul' zwischen den Tags 'div' und 'li' eingefügt (Anm.: Grund ist die in der Wiki-Syntax vermutlich fehlende Fähigkeit dem generierten Tag 'ul' eine CSS-Klasse zuzuordnen) + Entfernung der 9 wohl nicht nutzbaren Farbanpassungen) |
Sonne7 (Diskussion | Beiträge) ((Erweiterung) CSS-Code um die neue Anzeige-Klasse 'liste-anzahl' nun ergänzt (konkret via dem Tag 'span' anwendbar) - Anm.: Für die Nutzung via einem klassifizierten 'span'-Tag ohne Inhalt (also konkret nur ' <span class="liste-anzahl"></span> ') -- jedenfalls nach dem gesamten 'ul'-Tag mit dessen Liste der 'li'-Tags aber noch innerhalb vom klassifizierten 'div'-Tag nutzbar (also konkret zwischen ' <div class="liste-zaehler"> ' und ' </div> ')) |
||
| Zeile 27: | Zeile 27: | ||
font-weight: bold; | font-weight: bold; | ||
content: attr(data-zaehler-spalte); | content: attr(data-zaehler-spalte); | ||
} | |||
/* Ausgabe der Anzahl für liste-zaehler */ | |||
/* - Klasse 'liste-anzahl' zur Anzeige der Anzahl der Elemente */ | |||
div.liste-zaehler span.liste-anzahl::before { | |||
display: inline-block; | |||
content: counter(listZaehler); | |||
} | } | ||
Version vom 29. Oktober 2024, 19:17 Uhr
/* Definition von liste-zaehler */
/* - Klasse 'liste-zaehler' für die Definition und Berechnung */
/* - Klasse 'liste-display' für die Anzeige bei jedem Element */
div.liste-zaehler {
counter-reset: listZaehler;
}
div.liste-zaehler.liste-display ul li::before {
display: inline-block;
padding-right: 0.5em;
padding-left: 0.5em;
border-top: 1px solid #777777;
border-bottom: 1px solid #777777;
text-align: right;
font-size: 80%;
vertical-align: inherit;
background-color: #eaecf0;
content: "";
}
div.liste-zaehler ul li {
counter-increment: listZaehler;
}
div.liste-zaehler.liste-display ul li::before {
content: attr(data-zaehler-vor) counter(listZaehler) attr(data-zaehler-nach);
}
div.liste-zaehler.liste-display ul li:first-child::before {
font-weight: bold;
content: attr(data-zaehler-spalte);
}
/* Ausgabe der Anzahl für liste-zaehler */
/* - Klasse 'liste-anzahl' zur Anzeige der Anzahl der Elemente */
div.liste-zaehler span.liste-anzahl::before {
display: inline-block;
content: counter(listZaehler);
}