Petite question de CSS avancé.

Elzen · Le 01/04/2010, à 16:03

Kupo les gens...

Je suis en train de refaire mon site, et il y a quelques éléments de style que j'aimerais mettre en place, mais je ne sais pas au juste si c'est vraiment possible en CSS. J'ai pas mal cherché sur le net, mais je n'ai trouvé ni explications sur comment le faire, ni indication comme quoi ce n'était pas possible, donc je préfère demander ici au cas où.

Mon site fait blog/forum, donc il y a sur certaines pages des successions de messages. J'aimerais pouvoir faire en sorte que la couleur de fond change légèrement entre un message et le suivant : le premier message serait de la couleur A, le second de la couleur B, le troisième de nouveau de la couleur A, le quatrième de la couleur B et ainsi de suite.
En supposant que tous les messages aient à peu près les mêmes attributs (une div avec une unique classe "post", dans l'immédiat), est-il possible de faire une règle CSS qui automatise ça ? La seule solution que j'ai trouvé pour l'instant est de développer, ce qui est assez moche et peu pratique :

div.post {
    background-color: #FFFFFF;
}
div.post+div.post {
    background-color: #F0F0F0;
}
div.post+div.post+div.post {
    background-color: #FFFFFF;
}
div.post+div.post+div.post+div.post {
    background-color: #F0F0F0;
}
/* etc... */

Par ailleurs, le problème se pose également pour le formatage du texte. J'ai en effet prévu de faire en sorte que si l'on demande à mettre en italique du texte qui était déjà en italique, celui-ci revienne à l'aspect normal, redevienne en italique si on redemande encore une fois, et ainsi de suite. Non pas que la situation devrait se produire très souvent, mais c'est au cas où. Et encore une fois, je n'ai pas trouvé d'autre manière de procéder que de répéter indéfiniment la suite de définitions :

em em {
	font-style: normal;
}
em em em {
	font-style: italic;
}
em em em em {
	font-style: normal;
}
em em em em em {
	font-style: italic;
}
/* etc... */

Si quelqu'un avait une solution pour automatiser cette inversion, j'aimerais l'entendre. Sinon, j'aimerais au moins une confirmation qu'il n'y a pas moyen de faire autrement...

yohann · Le 01/04/2010, à 16:18

hum, a mon avis il faut plutôt utiliser le php pour ce genre de chose, en tout cas c'est ce que font la plupart des frameworks web pour ce qui est des "pager" (gestion des donnée tabulaires sur plusieurs pages, avec une ligne sur 2 d'une couleur).

la formule est de type:

$i = 0;
foreach ($posts as $post) {
  if ($i%2 == 0) { 
    $class = "posteven";
  } else {
    $class = "postodd";
  }
  ...
  suite de la fonction en utilisant class="$class"

et un css définissant div.postodd et div.posteven

pour l'italique je recommande également d'utiliser php pour ajouter ou supprimer les balise em plutot que de gérer ça en CSS, (puisque d'in point de vu sémantique un truc ne veut pas dire grand chose, autant supprimer l'empahse au lieu de la cumuler.

Kanor · Le 01/04/2010, à 18:07

Message rapide pour le retrouver
mais sinon ça doit étre faisable en js mais c'est pas top

Kanor · Le 01/04/2010, à 18:50

A pour le premier je suis con il existe une solution c'est une alternance
http://www.w3.org/Style/Examples/007/evenodd
j'ai pas testé je ne sais pas qu'est ce que ça peux donner

edit ça marche voila le code test avec un tableau et une suite de div

(il manque le blabla autour)

  <div class="post"><p>Bidule</p></div>
        <div class="post"><p>Bd</p></div>
        <div class="post"><p>Biddsle</p></div>
        <div class="post"><p>Bidudsle</p></div>
        <div class="post"><p>Biddsule</p></div>
        <table>
            <tr><td>sdqs</td>
                <td>sqdqsd</td>
                <td>sqddsq</td>
            </tr>
            <tr><td>qdd/td>
                <td>dqsdqsd</td>
                <td>sqdsd</td>
            </tr>
            <tr><td>qdsqsd</td>
                <td>sqdq</td>
                <td>sqdd</td>
            </tr>
                <td>sfdsfs</td>
                <td>dsffd</td>
                <td>dsffd</td>
            </tr>
            <tr><td>sfddf</td>
                <td>sdfdsf</td>
                <td>fdfsd</td>
            </tr>
        </table>

tr:nth-child(2n+1) {
background-color: blue;
}
tr:nth-child(2n) {
background-color: red;
}
div.post:nth-child(2n+1) {
background-color: blue;
}
div.post:nth-child(2n) {
background-color: red;
}

Dernière modification par Kanor (Le 01/04/2010, à 18:57)

Pylades · Le 01/04/2010, à 23:31

yohann a écrit :

hum, a mon avis il faut plutôt utiliser le php pour ce genre de chose, en tout cas c'est ce que font la plupart des frameworks web pour ce qui est des "pager" (gestion des donnée tabulaires sur plusieurs pages, avec une ligne sur 2 d'une couleur).
la formule est de type:
$i = 0;
foreach ($posts as $post) {
 if ($i%2 == 0) { 
 $class = "posteven";
 } else {
 $class = "postodd";
 }
 ...
 suite de la fonction en utilisant class="$class"
et un css définissant div.postodd et div.posteven

pour l'italique je recommande également d'utiliser php pour ajouter ou supprimer les balise em plutot que de gérer ça en CSS, (puisque d'in point de vu sémantique un truc ne veut pas dire grand chose, autant supprimer l'empahse au lieu de la cumuler.

Je plussoie fervemment.

Elzen · Le 02/04/2010, à 01:00

Merci beaucoup, Kanor ^^ Je tâcherai d'implanter ça prochainement.

Pylade, tu plussoies quelle partie ? Parce que la solution de Kanor est beaucoup plus élégante que la génération de classes différentes, et surtout plus portable (pas besoin de tout retaper pour passer d'une dispo unaire ou binaire à une dispo ternaire). D'autant que dans mon cas, ça aurait été peu pratique.

Quant au point de vue sémantique de la succession d'emphase, c'est une question d'un autre niveau. Là j'ai utilisé des balises em parce que c'était l'exemple qui m'est venu à l'esprit, mais ce n'est pas parce qu'il pourrait éventuellement (ou pas) y avoir un moyen de contourner dans un cas précis que la question est à éluder dans tous les cas

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 01/04/2010, à 16:03

Petite question de CSS avancé.

#2 Le 01/04/2010, à 16:18

Re : Petite question de CSS avancé.

#3 Le 01/04/2010, à 18:07

Re : Petite question de CSS avancé.

#4 Le 01/04/2010, à 18:50

Re : Petite question de CSS avancé.

#5 Le 01/04/2010, à 23:31

Re : Petite question de CSS avancé.

#6 Le 02/04/2010, à 01:00

Re : Petite question de CSS avancé.

Pied de page des forums