Alternierende Listen umsetzen
21. Juni 2023
liste eintrag einträge abwechseln alternierend css css-only
Listen mit abwechselnden Eigenschaften pro Eintrag lassen sich auf unterschiedliche Weise umsetzen
Um Listeneinträge besser voneinander absetzen zu können, bietet sich eine unterschiedliche Darstellung der einzelnen Listeneinträge an (z.B. alternierend). Dieser Artikel führt unterschiedliche Lösungen hierfür an.
Beispiel 1: Umsetzung über die Listendarstellung des Objektes
Ab CMS-Version 17 bietet die BASE (Mobile First) über den Objekt-Wizard eine komfortable Lösung, um alternierende Listeneinträge umzusetzen.
Das Container-Element ermöglicht es, über die CSS-Only-Variante 170 ("Enthaltene Container alternieren"), enthaltene Container zu alternieren.
Setzen Sie in in der Listenvariante einen Container mit der Variante 170 und darin dann den Container, welcher die Listeneinträge definiert.
Beispiel 2: Umsetzung über CSS (nth-child)
Eine einfache Lösung in einem BASE Classic Projekt ist die Umsetzung rein über CSS (CSS-Only) und den Pseudo-Selektor nth-child.
Im nachfolgenden Beispiel wird dem Vorschaubild innerhalb jedes li-Tags über nth-child(odd) für alle ungeraden Einträge ein float:right mitgegeben. Andere Einträge (gerade) sind standardmässig links ausgerichtet.
Beispiel: Auszug aus der design.css zu Listen-Variante 0
... .listDefault_var0 li.listEntry:nth-child(odd) .listEntryThumbnail {float:right} ...
Beispiel 3: Umsetzung über das XSL-Template
Die Weblication® CMS Listenfunktionalität kombiniert mit xPath-Funktionen bieten Ihnen hierzu eine elegante Lösung.
Das nachfolgende Beispiel generiert eine alternierende Liste. Die Listeneinträge werden abwechselnd in anderer Hintergrundfarbe ausgegeben. Hierzu prüfen Sie innerhalb der foreach-Schleife, ob es sich beim jeweiligen Listeneintrag um eine gerade Positionsnummer handelt. Wenn ja, wird dieser Listeneintrag in einer anderen Hintergrundfarbe angezeigt (z.B. grau (#e0e0e0)), andernfalls ohne Hintergrundfarbe.
Das li-Tag erhält durch die nachfolgende Abfrage abhängig von der Positionsnummer ein anderes Klassen-Attribut zugewiesen.
Beispiel: Auszug aus der default.wFilelist.php mit alternierendem Listeneintrag (li)
... <xsl:template match="/wFilelist"> <div> <!-- Zeigt das zu tranformierende XML-Dokument an--> <!-- <xsl:copy-of select="/" /> --> <ul class="listDefault"> <!-- Schleife über alle Dateien --> <xsl:for-each select="files/file"> <li> <xsl:choose> <xsl:when test="position() mod 2 = 0"> <xsl:attribute name="class">clickable alt</xsl:attribute> </xsl:when> <xsl:otherwise> <xsl:attribute name="class">clickable</xsl:attribute> </xsl:otherwise> </xsl:choose> ...
Beispiel: Auszug aus der design.css
/* ... */ .listDefault li {overflow:hidden;padding:0 0 10px 0;margin:0 0 12px 0;border-bottom:solid 1px #e0e0e0} .listDefault li.alt {background-color:#e0e0e0} /* ... */
Die im Beispiel verwendeten Funktionen können Sie z.B. der SELFHTML-Dokumentation entnehmen, die Sie über die weiterführenden Links finden. Auf die genaue Beschreibung der XSL-Elemente xsl:attribute, xsl:choose, xsl:when, xsl:otherwise und die xPath-Funktion position() (mit Ausdruck mod 2 = 0) wird daher an dieser Stelle verzichtet.
- Wie kann ich Listeneinträge in einer Liste abwechselnd (alternierend) gestalten?
- Alternierende Darstellungen lassen sich auf unterschiedliche Weise umsetzen, z.B.: - über die Listendarstellung des Objektes (ab CMS-Version 17 mit Objekt-Wizard) - rein über CSS mit dem Pseudo-Selektor :nth-child - über ein XSL-Template, indem die Position der Listeneinträge geprüft wird und abhängig davon eine andere Hintergrundfarbe bzw. Klasse gesetzt wird.
- Welche Lösung bietet das CMS ab Version 17 für alternierende Listeneinträge über die Listendarstellung des Objektes?
- Ab CMS-Version 17 bietet der Objekt-Wizard eine komfortable Lösung: Über eine Container-Variante können enthaltene Container alterniert werden. Konkret: In der Listenvariante einen Container mit der Variante 170 („Enthaltene Container alternieren“) verwenden und darin den Container, der die Listeneinträge definiert.
- Wie lässt sich eine alternierende Liste rein über CSS umsetzen?
- Mit CSS-only und dem Pseudo-Selektor :nth-child. Beispielidee: Dem Vorschaubild innerhalb jedes li-Tags wird für ungerade Einträge ein Stil wie float:right zugewiesen, während gerade Einträge standardmäßig links ausgerichtet bleiben.
- Welche CSS-Regel wird im Beispiel für ungerade Listeneinträge verwendet?
- Im Beispiel wird für ungerade li-Einträge innerhalb der Listen-Variante (z.B. „var0“) verwendet: - .listDefault_var0 li.listEntry:nth-child(odd) .listEntryThumbnail { float:right } Dadurch werden Vorschaubilder bei ungeraden Einträgen nach rechts ausgerichtet.
- Wie kann ich die Alternation über ein XSL-Template erzeugen?
- Die Weblication® CMS Listenfunktionalität kombiniert mit xPath-Funktionen ermöglicht eine elegante Lösung. Vorgehen: In der foreach- bzw. Schleife prüfen, ob die Position des jeweiligen Listeneintrags gerade ist (z.B. position() mod 2 = 0). Wenn ja, erhält der Eintrag eine andere Klasse (z.B. alt), andernfalls eine Standarddarstellung. Die Klasse kann anschließend über CSS eine abweichende Hintergrundfarbe bewirken.
- Wie wird im XSL-Template im Beispiel entschieden, ob ein Listeneintrag „alt“ ist?
- Über eine Positionsprüfung in der Schleife: - Wenn position() mod 2 = 0 (gerade Position), wird eine Klasse wie „clickable alt“ gesetzt. - Andernfalls (ungerade Position) wird nur die Klasse „clickable“ gesetzt. Das li-Tag bekommt damit abhängig von der Positionsnummer unterschiedliche Klassen.
- Wie sieht das CSS im Beispiel aus, um alternierende Hintergrundfarben zu erzeugen?
- Im Beispiel wird eine Baselayout-Regel für die li-Elemente gesetzt und die abweichende Hintergrundfarbe über die Klasse „alt“: - .listDefault li { ... border-bottom: solid 1px #e0e0e0 } - .listDefault li.alt { background-color: #e0e0e0 }