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 punktuell korrigiert und modifiziert - konkret 1. Erweiterung der Stil-Regel für 'li::before' um einen rechten Außenabstand (konkret 'margin-right: 6px;') eingefügt, 2. Entfernung der inkorrekten Content-Regel für 'li:first-child::before' (also den Inhalt von '::before' für das 1. <li> in <ul> in dem <div> mit den beiden Klassen 'liste-zaehler' und 'liste-display' welches v.a. 'content: attr(data-zaehler-spalte);' enthielt)) |
||
| (2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| 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 12: | Zeile 12: | ||
border-top: 1px solid #777777; | border-top: 1px solid #777777; | ||
border-bottom: 1px solid #777777; | border-bottom: 1px solid #777777; | ||
margin-right: 6px; | |||
text-align: right; | text-align: right; | ||
font-size: 80%; | font-size: 80%; | ||
| Zeile 18: | Zeile 19: | ||
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); | ||
} | } | ||
/* | /* 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); | |||
} | } | ||
Aktuelle Version vom 7. November 2024, 05:40 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;
margin-right: 6px;
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);
}
/* 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);
}