1. #1
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    novembre 2014
    Messages
    109
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : novembre 2014
    Messages : 109
    Points : 88
    Points
    88

    Par défaut Couleur différente suivant ligne

    Bonjour à tous,

    Je rempli un tableau grâce à ma base de données et je rencontre un problème pour le rendre plus "beau" avec le css. En effet, je souhaite mettre 3 couleurs différentes : 1 à la première ligne, 1 autre à la seconde ligne, mais aussi une 3ème couleur à un spoiler qui s'affiche entre chaque ligne de ce tableau.

    Voici mon code actuel :

    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
     
    <table>
    <tr class="infotournee">
            <td><p class="villetournee"><b><?php echo ''.$donnees['ville'].'';?></b></p> <p class="nomtournee"><?php echo ''.$donnees['nomtournee'].'';?></p></td>
            <td> Du <?php echo ''.utf8_encode($datedebut).'';?><br>au <?php echo ''.utf8_encode($datefin).'';?></td>
            <td><?php echo ''.$donnees['adresse'].'';?></td>
            <td><a href="#spoiler<?php echo $donnees['id_event']; ?>" class="spoiler-link lienresa">PLUS D'INFOS</a><a class="lienresa" href="#">RESERVER</a></td>
    </tr>
    <tr class="spoilertournee">
          <td colspan="4">
               <div class="spoilers">
                     <div class="spoiler" id="spoiler<?php echo $donnees['id_event']; ?>">
                            <p><?php echo ''.utf8_encode($datedebut).'';?></p>
                     </div>
               </div>
         </td>
    </tr>
    </table>

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
    table tr:not(.infotournee)
    {
      background-color:rgba(193,5,110,0.35);
    }
     
    table tr.infotournee:nth-child(odd) /* Impaire */
    {
      background-color: rgba(193,5,110,0.75);
    }
     
    table tr.infotournee:nth-child(even)
    {
      background-color: rgba(193,5,110,0.5);
    }

    Pour l'instant voici le résultat (qui est logique) mais je ne trouve pas la solution :

    Nom : Sans titre.png
Affichages : 23
Taille : 46,2 Ko

    Merci à tous d'avance !

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    9 377
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 9 377
    Points : 18 635
    Points
    18 635

    Par défaut

    Bonjour,

    dans le forum CSS, il faut fournir le code HTML généré (pas de PHP) pout pouvoir tester.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    novembre 2014
    Messages
    109
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : novembre 2014
    Messages : 109
    Points : 88
    Points
    88

    Par défaut

    Voici donc mon code HTML :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
     
    <table class="tabletournee">
        <caption>Dates et lieux de la tournée 2017</caption>   
            <tr class="infotournee">
                <td><p class="villetournee"><b>Saumur</b></p> <p class="nomtournee">Cirque </p></td>
                <td> Du 07 juillet<br>au 07 juillet 2017</td>
                <td>Terrain de Breil</td>
                <td><a href="#spoiler45" class="spoiler-link lienresa">PLUS D'INFOS</a><a class="lienresa" href="#">RESERVER</a></td>
            </tr>
            <tr class="spoilertournee">
                <td colspan="4">
                    <div class="spoilers">
                        <div class="spoiler" id="spoiler45">
                            <p>07 juillet</p>
                        </div>
                    </div>
                </td>
            </tr>
     
            <tr class="infotournee">
                <td><p class="villetournee"><b>Blois</b></p> <p class="nomtournee">Cirque </p></td>
                <td> Du 08 juillet<br>au 08 juillet 2017</td>
                <td>Parc des expositions</td>
                <td><a href="#spoiler46" class="spoiler-link lienresa">PLUS D'INFOS</a><a class="lienresa" href="#">RESERVER</a></td>
            </tr>
            <tr class="spoilertournee">
                <td colspan="4">
                    <div class="spoilers">
                        <div class="spoiler" id="spoiler46">
                            <p>08 juillet</p>
                        </div>
                    </div>
                </td>
            </tr>
     
            <tr class="infotournee">
                <td><p class="villetournee"><b>Châteaudun</b></p> <p class="nomtournee">Cirque </p></td>
                <td> Du 09 juillet<br>au 09 juillet 2017</td>
                <td>Le Halle rue de Sancheville</td>
                <td><a href="#spoiler47" class="spoiler-link lienresa">PLUS D'INFOS</a><a class="lienresa" href="#">RESERVER</a></td>
            </tr>
            <tr class="spoilertournee">
                <td colspan="4">
                    <div class="spoilers">
                        <div class="spoiler" id="spoiler47">
                            <p>09 juillet</p>
                        </div>
                    </div>
                </td>
            </tr>
     
            <tr class="infotournee">
                <td><p class="villetournee"><b>Valenciennes</b></p> <p class="nomtournee">Cirque </p></td>
                <td> Du 10 juillet<br>au 12 juillet 2017</td>
                <td>Parking Lacuzon</td>
                <td><a href="#spoiler48" class="spoiler-link lienresa">PLUS D'INFOS</a><a class="lienresa" href="#">RESERVER</a></td>
            </tr>
            <tr class="spoilertournee">
                <td colspan="4">
                    <div class="spoilers">
                        <div class="spoiler" id="spoiler48">
                            <p>10 juillet</p>
                        </div>
                    </div>
                </td>
            </tr>
     
            <tr class="infotournee">
                <td><p class="villetournee"><b>Dunkerque</b></p> <p class="nomtournee">Cirque </p></td>
                <td> Du 13 juillet<br>au 14 juillet 2017</td>
                <td>Carrefour Saint Pol sur mer</td>
                <td><a href="#spoiler49" class="spoiler-link lienresa">PLUS D'INFOS</a><a class="lienresa" href="#">RESERVER</a></td>
            </tr>
            <tr class="spoilertournee">
                <td colspan="4">
                    <div class="spoilers">
                        <div class="spoiler" id="spoiler49">
                            <p>13 juillet</p>
                        </div>
                    </div>
                </td>
            </tr>
    </table>

  4. #4
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    9 377
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 9 377
    Points : 18 635
    Points
    18 635

    Par défaut

    Bon. Je crois comprendre...

    A priori (sauf erreur), :nth-child se moque des classes !
    Le décompte (odd/even,...) se fait sur les balises <tr>, sans considération de class.

    Une solution : ajouter des class en PHP
    • en utilisant le modulo de 2 pour l'alternance :
    • en réinitialisant le compteur à chaque "spoiler"

    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    <tr class="infotournee infotournee<?php echo ($compteur%2); $compteur++; ?>">
    ($compteur%2) vaut 0 ou 1.

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    table tr.infotournee1 /* Impaire */
    {
      background-color: rgba(193,5,110,0.75);
    }
     
    table tr.infotournee0
    {
      background-color: rgba(193,5,110,0.5);
    }


    [Hors sujet] Petite astuce pour l'affichage des dates :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
            <td><?php echo ($datedebut == $datefin)? 'Le '.utf8_encode($datedebut) : 'Du '.utf8_encode($datedebut).'<br/>au '.utf8_encode($datefin); ?></td>
    ou plutôt, puisque $datefin semble contenir en + l'année :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
            <td><?php echo (strpos($datedebut,' '.$datefin))? 'Le '.utf8_encode($datedebut) : 'Du '.utf8_encode($datedebut).'<br/>au '.utf8_encode($datefin); ?></td>
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    novembre 2014
    Messages
    109
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : novembre 2014
    Messages : 109
    Points : 88
    Points
    88

    Par défaut

    Merci de ta réponse et de tes explications !

    Cependant, une erreur s'affiche lors du test : Il me dit que la variable $compteur n'est pas déclarée. Comment faire ? Puisque si je la déclare à 0 ou à 1 (j'ai fais le test) la variable reste la même et donc les couleurs aussi.

    Alors que quand je regarde le code généré avec l'erreur, les variable sont bien incrémentées (infotournee0 et infotournee1).

    Code de l'erreur :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    Notice: Undefined variable: compteur in C:\wamp\www\Medrano2017\index.php on line 72

  6. #6
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    9 377
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 9 377
    Points : 18 635
    Points
    18 635

    Par défaut

    Ouvre une discussion dans le forum PHP.

    Avec ton code PHP, donc.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Ce qui se conçoit bien s'énonce clairement. Et les mots pour le dire arrivent aisément."
    Nicolas Boileau-Despréaux (1636-1711).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  7. #7
    Membre régulier
    Homme Profil pro
    Développeur Web
    Inscrit en
    novembre 2014
    Messages
    109
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : novembre 2014
    Messages : 109
    Points : 88
    Points
    88

    Par défaut

    Ça marcher merci.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 0
    Dernier message: 09/11/2010, 15h42
  2. Réponses: 6
    Dernier message: 18/05/2008, 10h13
  3. Réponses: 18
    Dernier message: 18/02/2008, 13h01
  4. Réponses: 11
    Dernier message: 30/03/2007, 10h30
  5. [Tableaux] ligne de couleurs différentes
    Par tom06440 dans le forum Fonctions
    Réponses: 4
    Dernier message: 22/08/2005, 15h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo