Bonjour à tous,

Je poste mon problème dans HTML... même si il y a un peu de php dedans, parce que c'est surement solvable en terme de CSS. Je ne trouve pas la solution.

Je dois afficher un calendrier. Dans ce calendrier, je souhaite que les évenements prennent automatiquement leur position dans l'espace qui leur est reservé.

Voici à quoi ressemble un simple exemple :

Code : 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
 
<html>
<head><title>Document sans nom</title></head>
<body >
<?php
function compare($a, $b) 
{
    if ($a['debut'] == $b['debut']) {
      return 0;
    }
    return ($a['debut'] < $b['debut']) ? -1 : 1;
}
$debut=6;$fin=20;
for ($i=$debut;$i<=$fin;$i++)
{
echo '
<div style="position:absolute;left:30px;top:'.(20+($i-$debut)*42).'px;width:60px;height:42px;border-right:1px solid;background-image : url(fond.gif);">
'.$i.'</div>';
}
 
echo '<div style="position:absolute;left:91px;top:20px;width:600px;height:'.(42*($fin-$debut+1)).'px;background-image : url(fond.gif);">';
 
$tableau=array(
1=>array('debut'=>8,'fin'=>10,'nom'=>'evt1','color'=>'red'),
2=>array('debut'=>8,'fin'=>10,'nom'=>'evt2','color'=>'blue'),
3=>array('debut'=>9,'fin'=>12,'nom'=>'evt3','color'=>'green'),
4=>array('debut'=>14,'fin'=>16,'nom'=>'evt4','color'=>'yellow'),
5=>array('debut'=>13,'fin'=>15,'nom'=>'evt5','color'=>'magenta'),
6=>array('debut'=>7,'fin'=>11,'nom'=>'evt6','color'=>'pink'),
7=>array('debut'=>14,'fin'=>17,'nom'=>'evt7','color'=>'turquoise'),
8=>array('debut'=>12,'fin'=>14,'nom'=>'evt8','color'=>'violet'),
9=>array('debut'=>13,'fin'=>15,'nom'=>'evt9','color'=>'cyan')
);
usort ($tableau, "compare");
$left=0;
 
foreach ($tableau as $k=>$v)
{
  $top=($v['debut']-$debut)*42;
  $width=50;
  $height=($v['fin']-$v['debut'])*42;
  echo '<div style="position:absolute;left:'.$left.'px;top:'.$top.'px;width:'.$width.'px;height:'.$height.'px;background:'.$v['color'].'">
  '.$v['nom'].' de '.$v['debut'].' à '.$v['fin'].'
</div>';
  $left+=55;
}
 
?>
</div>
</body>
</html>
Dans cet exemple, on peut voir que l'evenement 8 devrait se positionner tout simplement en dessous de l'evenement 6. De + je souhaiterais que les evenements prennent le maximum de place sur la page : 100% de la largeur si ils ne sont pas chevauchés, 100/x % de la largeur si ils sont chevauché par x evenements.

J'ai beau retourner le problème dans tous les sens, mais je ne vois pas de solutions evidentes, à part celle d'augmenter la complexité en bouclant en php pour calculer les chevauchements et les tailles. Ceci ajoute trop de complexité au script et c'est ce que je cherche à éviter.

Merci d'avance de votre aide et de votre soutien.