28172 sujets

CSS et mise en forme, CSS3

7 couleurs alternatives

bonjour,
Quand mon moteur de recherche me retourne un résultat Smiley lol , j'ai besoin d'appliquer un code couleur différent par ligne. Mais pas une couleur sur deux mais une sur 7 Smiley sweatdrop .

je n'ai aucune idée de comment m'y prendre.
Modérateur
Salut christobal,

Il te suffit de faire un petit modulo sur une boucle et un petit switch qui va bien. Là, je ne connais pas ton code comment il est construit. Donc le array() n'est peut être pas du tout nécessaire :


$limite = 70;
$ma_couleur = array();
for ($i=0;$i<$limite;$i++){
	$modulo = $i % 7;
	switch($modulo){
		case "1" :
			$ma_couleur[] = "green";
			continue;
		case "2" :
			$ma_couleur[] = "red";
			continue;
		case "3" :
			$ma_couleur[] = "purple";
			continue;
		case "4" :
			$ma_couleur[] = "teal";
			continue;
		case "5" :
			$ma_couleur[] = "blue";
			continue;
		case "6" :
			$ma_couleur[] = "black";
			continue;
		default:
			$ma_couleur[] = "white";
	}
}


++
Modifié par Nolem (28 May 2009 - 22:17)
dsl, nous avons posté en même temps.
je me suis mal exprimé.
certe j'ai 7 code couleur différents mais le code couleur est bien spécifique, il touche le fond de la ligne le txt (qui est une variante du fond), ...
Modifié par christobal (28 May 2009 - 22:22)
Modérateur
Ah oui mince, je pensais que j'étais dans le salon langage serveur (code php ci-dessus). Comment reçois tu tes lignes ? Peux tu mettre sur le forum ton code source STP ? Car là je suis un peu dans le flou.


<<<EDIT
christobal a écrit :

...
certe j'ai 7 code couleur différents mais le code couleur est bien spécifique, il touche le fond de la ligne le txt (qui est une variante du fond),
...


L'exemple que je t'ai donné ne change pas grand chose.

EDIT;

++
Modifié par Nolem (28 May 2009 - 22:28)
c'est un peux compliqué pour te mettre le code, mais je vais te donner plus de détails.

chaque résultat et dans un tableau html.
Les fond seront différents dans chacune des couleurs (une image sde couleur créme), la dernière ligne sera marron le txt marron, mais blanc sur la derniere ligne, ...
et ce répété pour tt les couleurs.
Salut,

quelque chose comme ça peut-être :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test formulaire</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.couleur0 { color: #FFCC00; }
.couleur1 { color: #FF6600; }
.couleur2 { color: #6666FF; }
.couleur3 { color: #CC33FF; }
.couleur4 { color: #993333; }
.couleur5 { color: #000; }
.couleur6 { color: #00CC00; }
</style>
</head>

<body>
<?php
for($i=0; $i<30; $i++) {
	echo '<p class="couleur'.($i%7).'">un résultat.</p>';
}
?>
</body>
</html>

Sinon avec CSS3 on pourra faire
p:nth-child(n) { color: #000; }
Modérateur
En saisissant en « dur », cela ferait un truc du style :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ma page </title>
<style type="text/css">
.macouleur1{
	background-color:green;
	color:black;
}
.macouleur2{
	background-color:yellow;
	color:black;
}
.macouleur3{
	background-color:red;
	color:black;
}
.macouleur4{
	background-color:teal;
	color:black;
}
.macouleur5{
	background-color:blue;
	color:white;
}
.macouleur6{
	background-color:purple;
	color:white;
}
.macouleur7{
	background-color:black;
	color:white;
}
</style>
</head>

<body>
<table>
	<tr class=".macouleur1">
		<td>le txt, ligne1</td>
	</tr>
	<tr class=".macouleur2">
		<td>le txt, ligne2</td>
	</tr>
	<tr class=".macouleur3">
		<td>le txt, ligne3</td>
	</tr>
	<tr class=".macouleur4">
		<td>le txt, ligne4</td>
	</tr>
	<tr class=".macouleur5">
		<td>le txt, ligne5</td>
	</tr>
	<tr class=".macouleur6">
		<td>le txt, ligne6</td>
	</tr>
	<tr class=".macouleur7">
		<td>le txt, ligne7</td>
	</tr>
	<!-- etc. -->
</table>
</body>
</html>


++
Modérateur
christobal a écrit :

...
chaque résultat et dans un tableau html.
...


@Heyoan : Smiley cligne Smiley smile

++

nb : Christobal, les tableaux c'est pas bien pour ce que tu veux faire Smiley cligne
Modifié par Nolem (28 May 2009 - 22:50)
hello,
Nolem, je le sais bien mais vu la complexité d'affichage et a la créa e présentation, il n'y a pas beaucoup d'alternative.
Modérateur
Salut,

christobal a écrit :
hello,
Nolem, je le sais bien mais vu la complexité d'affichage et a la créa e présentation, il n'y a pas beaucoup d'alternative.


Est ce que tu aurais une capture d'écran. Je pense qu'il est tout à fait possible d'éviter la table. Enfin, ce n'est qu'une suggestion.

Heyoan a écrit :

...
Sinon avec CSS3 on pourra faire

p:nth-child(n) { color: #000; }



Elle a l'air très sympatique cette pseudo-class ^^. Espérons que IE l'a prenne en compte. C'est pas gagné Smiley ohwell

++
Sujet clos
Aller à