Css: Liste in 5-er Schritte andere Hintergrundfarbe

jko

Hallo,

ich gebe eine Liste mit Javascript aus. Alle Einträge haben das gleiche Class.

Ich hätte jetzt gerne, daß jeweils 5-er Gruppen die gleiche Hintergrundfarbe haben.

Eintrag 1: grün
Eintrag 2:grün
Eintrag 3 grün
Eintrag 4 grün
Eintrag 5: grün
Eintrag 6: blau
Eintrag 7: blau
Eintrag 8:blau
Eintrag 9 blau
Eintrag 10 blau
Eintrag 11: rot
usw.

Ich hab etwas mit nth-child rumgespielt. Ich bekomme es aber nicht hin.

Kann man sowas mittels css realisieren?

Danke

Josef

MrMurphy

Hallo

wie viele Einträge in der Liste werden es denn maximal?

Dürfen (oder sogar sollen) sich die Farben wiederholen? Wenn ja, wie viele Farben sollen verwendet werden?

Gruss

MrMurphy

jko

Hallo,

[...]wie viele Einträge maximal? [...]
Schwer zu sagen die einträge stammen aus einer Datenbank und werden mittels AJAX abgerufen und eben dann in die Liste eingetragen.

Momentan sind es "3 Gruppen a 5 Einträge", also 15 Einträge.

Wie geschrieben, die ersten 5 sollen blau, die nächsten 5 sollen grün und die nächsten 5 sollen rot werden.

Dann könnte sich der Interval im gleichen Farbablauf wiederholen.

Mit der gleichen Hintergrundfarbe für jeweils 5 Einträge soll eine gewisse Gruppenzusammengehörigkeit angezeigt werden.

Danke nochmal.

Josef

MrMurphy

Hallo,

innerhalb einer ul-Liste gibt es zum Beispiel folgende Möglichkeit:

Code

ul :nth-child(15n+1),
ul :nth-child(15n+2),
ul :nth-child(15n+3),
ul :nth-child(15n+4),
ul :nth-child(15n+5) {
   background-color: green;
}
ul :nth-child(15n+6),
ul :nth-child(15n+7),
ul :nth-child(15n+8),
ul :nth-child(15n+9),
ul :nth-child(15n+10) {
   background-color: blue;
}
ul :nth-child(15n+11),
ul :nth-child(15n+12),
ul :nth-child(15n+13),
ul :nth-child(15n+14),
ul :nth-child(15n+15) {
   background-color: red;
}

Alles anzeigen

Gruss

MrMurphy

jko

Danke.

Damit schaut die Geschichte schon besser aus.

Muß noch überlegen, wie ich es machen soll, wenn sich die Anzahl der "Gruppen" und die Anzahl der "Gruppeneinträge" ändert.

Ciao

Josef

djheke

Zitat von jko

Danke.

Damit schaut die Geschichte schon besser aus.

Muß noch überlegen, wie ich es machen soll, wenn sich die Anzahl der "Gruppen" und die Anzahl der "Gruppeneinträge" ändert.

Ciao

Josef

Alles anzeigen

Warum stellst du die Frage nicht gleich so?

Du könntest jede Tabellenabfrage in einer eigenen Liste ausgeben.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Colors</title>
<style>
#tab ul { margin:0;padding:0;list-style:none;width:100px;text-align:center;}
#tab ul li { color:#fff;background:green;font-weight:bold;padding:10px;}
#tab ul:nth-child(3n+2) li { background:blue;}
#tab ul:nth-child(3n+3) li { background:red;}
</style>
</head>
<body>
<div id="tab">
<ul><li>1</li></ul>
<ul><li>2</li></ul>
<ul><li>3</li></ul>
<ul><li>4</li></ul>
<ul><li>5</li></ul>
<ul><li>6</li></ul>
<ul><li>7</li></ul>
<ul><li>8</li></ul>
<ul><li>9</li></ul>
<ul><li>10</li></ul>
</div>
</body>
</html>

Alles anzeigen

Du musst aber Zugriff auf die Abfragen haben. Wenn's Fremdinhalte sind, wird das nix.

jko

Hallo,

[...]Warum stellst du die Frage nicht gleich so?[...]

Ich wollte des nicht zu kompliziert machen, mit der Fragerei.

Aber, die Tipps, die kamen, bringen mich schon in die richtige Richtung.

Denn, die Abfragen gestalte ich, nur der Datenbankinhalt ist vorgegeben.

Ich denke, ich bring's mit eueren antworten schon so hin, daß die Ausgabe paßt.

Danke nochmal.

Josef

Css: Liste in 5-er Schritte andere Hintergrundfarbe

Tags

Benutzer online in diesem Thema