Vorlage:Listenstile/styles.css: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Sonne7 (Diskussion | Beiträge) ((Initialversion) CSS-Code (ganz grob nach dem von 'Vorlage:Tabellenstile/styles.css' erstellt und auch bereits etwas kommentiert) - Anm.: Zumindest für einen ersten Test der grundsätzlichen Funktionalität vermutlich so bereits ausreichend.) |
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) |
||
| Zeile 3: | Zeile 3: | ||
/* - Klasse 'liste-display' für die Anzeige bei jedem Element */ | /* - Klasse 'liste-display' für die Anzeige bei jedem Element */ | ||
div.liste-zaehler { | |||
counter-reset: listZaehler; | counter-reset: listZaehler; | ||
} | } | ||
div.liste-zaehler.liste-display ul li::before { | |||
display: inline-block; | display: inline-block; | ||
padding-right: 0.5em; | padding-right: 0.5em; | ||
| Zeile 18: | Zeile 18: | ||
content: ""; | content: ""; | ||
} | } | ||
div.liste-zaehler ul li { | |||
counter-increment: listZaehler; | counter-increment: listZaehler; | ||
} | } | ||
div.liste-zaehler.liste-display ul li::before { | |||
content: attr(data-zaehler-vor) counter(listZaehler) attr(data-zaehler-nach); | content: attr(data-zaehler-vor) counter(listZaehler) attr(data-zaehler-nach); | ||
} | } | ||
div.liste-zaehler.liste-display ul li:first-child::before { | |||
font-weight: bold; | font-weight: bold; | ||
content: attr(data-zaehler-spalte); | content: attr(data-zaehler-spalte); | ||
} | } | ||
Version vom 29. Oktober 2024, 16:07 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);
}