Ergebnis 1 bis 7 von 7

Thema: Css: Liste in 5-er Schritte andere Hintergrundfarbe

  1. #1
    HTML Newbie
    Registriert seit
    08.11.2015
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Css: Liste in 5-er Schritte andere Hintergrundfarbe

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    572
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Css: Liste in 5-er Schritte andere Hintergrundfarbe

    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

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    08.11.2015
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Css: Liste in 5-er Schritte andere Hintergrundfarbe

    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

  4. #4
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    572
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: Css: Liste in 5-er Schritte andere Hintergrundfarbe

    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;
    }
    Gruss

    MrMurphy

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    08.11.2015
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Css: Liste in 5-er Schritte andere Hintergrundfarbe

    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

  6. #6
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Css: Liste in 5-er Schritte andere Hintergrundfarbe

    Zitat Zitat von jko Beitrag anzeigen
    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
    Warum stellst du die Frage nicht gleich so?

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

    Code:
    <!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>
    Du musst aber Zugriff auf die Abfragen haben. Wenn's Fremdinhalte sind, wird das nix.
    Geändert von djheke (09.11.2015 um 16:24 Uhr)

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    08.11.2015
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Css: Liste in 5-er Schritte andere Hintergrundfarbe

    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

Ähnliche Themen

  1. Navigation: Liste oder nicht Liste?
    Von Macrosdesign im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 23.07.2009, 13:42
  2. Hilfestellung in aller erste Schritte ?
    Von rowi72 im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 26.01.2008, 22:23
  3. Flash, erste schritte
    Von DornigerWeg im Forum Flash Forum
    Antworten: 5
    Letzter Beitrag: 11.10.2006, 12:19
  4. die ersten schritte zur neuen clan page!!!!
    Von robbus6666 im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 5
    Letzter Beitrag: 15.08.2005, 12:44
  5. erste schritte mit js
    Von gelöschter User im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 27.12.2004, 03:06

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •