Colorer la moitié d'une case

Petit nouveau ! | 2 Messages

17 févr. 2013, 10:27

Bonjour,
Débutant php, je souhiate savor s'il est possible de modifier la couleur d'une case, mais sur uniquement sur sa moitié.

L'idée est de pouvoir faire un calendrier avec une gestion des demi-journée, chaque couleur de demi-journée pouvant se rapporter à des évenements différents (réunion, formation,...)

On m'a déjà proposé une solution qui fonctionne très bien: mettre une image de fond dans ma celulle, donc image de fond avec deux couleurs, et j'ai donc une cellule avec deux couleurs pour chaque demi-journée.
L'inconvénient de cette méthode est que si je souhaite mette en place pour l'utilisateur une gestion des couleurs des évenements, la solution ci-dessus est statique...

Merci de vos pistes de recherches

Eléphant du PHP | 453 Messages

17 févr. 2013, 18:51

Salut,
On m'a déjà proposé une solution qui fonctionne très bien: mettre une image de fond dans ma celulle, donc image de fond avec deux couleurs, et j'ai donc une cellule avec deux couleurs pour chaque demi-journée.
+1
L'inconvénient de cette méthode est que si je souhaite mette en place pour l'utilisateur une gestion des couleurs des évenements, la solution ci-dessus est statique...
Pas du tout !
soltion 1.
<td class="demieJourneeGen demieJourneeSpec">2</td> <!-- l'ordre de déclaration des classes est important -->
.demieJourneeGen{background:url(chemin/red.png) /*etc.*/;}
.demieJourneeSpec{background:url(chemin/blue.png) /*etc.*/;}
Pour optimiser cette idée
solution 2
<td class="demieJourneeGen demieJourneeSpec">2</td> <!-- l'ordre de déclaration des classes est important -->
.demieJourneeGen{background:url(chemin/sprite-evenent-calendrier.png) 0 0 no-repeat transparent;}
.demieJourneeSpec{background-position:0 -150px;}
solution 3
en CSS3 :
<td class="demieJourneeSpec">2</td> 
.demieJourneeSpec{background: linear-gradient(to bottom, #ff3236 0%,#ff3033 50%,#ffffff 51%,#ffffff 100%);} /*A decliner sur les autres browsers*/
La Tux attitude avec les kiw'z syou plait
Komodo Edit - Inkscape - Dia

Mammouth du PHP | 2278 Messages

17 févr. 2013, 23:26

Une piste très générale:
<html>
<style>
*.rouge
{
	background-color:red;
}
*.vert
{
	background-color:green;
}

</style>
</html>
<?PHP
$quart_journees = array();
$quart_journees[1]= "calme";
$quart_journees[2]= "occupe";
$quart_journees[3]= "calme";
$quart_journees[4]= "calme";
$quart_journees[5]= "occupe";
$quart_journees[6]= "occupe";
$quart_journees[7]= "calme";
$quart_journees[8]= "calme";
$quart_journees[9]= "calme";
$quart_journees[10]= "occupe";
$quart_journees[11]= "calme";
$quart_journees[12]= "calme";
$quart_journees[13]= "occupe";
$quart_journees[14]= "occupe";
$quart_journees[15]= "calme";
$quart_journees[16]= "calme";
$quart_journees[17]= "calme";
$quart_journees[18]= "calme";
$quart_journees[19]= "calme";
$quart_journees[20]= "occupe";
print_r($quart_journees);

$table = "<table>";
for ($i = 1; $i <=5; $i ++)
{
	$indice_q_init = 1 + (4*($i-1));
	$table .= "<tr>";
	for ($j = $indice_q_init; $j < $indice_q_init+4; $j++)
	{
print"<br>$j $quart_journees[$j]"	;
		$style_cell = $quart_journees[$j] == "calme"? "class='vert'": "class='rouge'";
		$table .= "<td $style_cell>rv</td>";
	}
	$table .= "</tr>";

	print "<br>$i $indice_q_init<br>";
}
	$table .= "</table>";
print "$table";
?>
Vanitas vanitatum et omnia vanitas
Mes derniers livres :
Sauvez les Mots chez BoD,
Tous les chemins mènent à ROM chez BoD

Petit nouveau ! | 2 Messages

19 févr. 2013, 14:39

Bonjour,

Merci beaucoup pour vos réponses, je vais me pencher attentivement sur les exemples fournis

@+
David