Bonjour à tous,

J'ai un léger problème. J'affiche un calendrier, du Dimanche au Samedi. Durant le mois, nous pouvons avoir un évènement. Quand l'évèment a lieu, soit le Dimanche, Lundi, Mardi, quand nous passons notre souris sur la journée une fenêtre s'affiche plus a notre droite, et dans le cas des autres journées, plus à notre gauche.

Mais voila, ca ne se passe pas comme ca. L'affichage demeure toujours plus à gauche et ce peu importe la journée. Voici un exemple de code, afin que vous puissiez comprendre ce dont je parle, et afin que vous puissiez m'éclaircir.

J'utilise IE8, et j'ai également testé avec Google Chrome, mais le résultat est le même.

Voici le code généré :

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
 
<td> 
<!-- Date inside the month -->
<div class="daynum">
<a href="javascript:;" onClick="window.open('event.php?year=2009&month=7&day=10');">10</a>
</div> 
<div>
<a href="event.php?eventID=1&year=2009&month=7&day=10" target="_blank" onMouseOver="show('eventBox1');" onMouseOut="hide('eventBox1');">MChristian</a>
</div> 
<!-- Display Box -->
<div class="event" id="eventBox1" style="color:#000000">
<div class="eventTitle">
Locateur : MChristian
</div> 
<div class="eventDesc"> 
Début Location : Vendredi&nbsp;10&nbsp;juillet&nbsp;2009&nbsp;0:00<br>
Fin Location : Lundi&nbsp;13&nbsp;juillet&nbsp;2009&nbsp;0:00<br>
Prive : Non
</div>
</div> 
</td>
 
 
<td> 
<!-- Date inside the month -->
<div class="daynum">
<a href="javascript:;" onClick="window.open('event.php?year=2009&month=7&day=12');">12</a>
</div> 
<div>
<a href="event.php?eventID=1&year=2009&month=7&day=12" target="_blank" onMouseOver="show('eventBox1');" onMouseOut="hide('eventBox1');">MChristian</a>
</div> 
<!-- Display Box -->
<div class="eventdebut" id="eventBox1" style="color:#000000">
<div class="eventTitle">
Locateur : MChristian
</div> 
<div class="eventDesc"> 
Début Location : Vendredi&nbsp;10&nbsp;juillet&nbsp;2009&nbsp;0:00<br>
Fin Location : Lundi&nbsp;13&nbsp;juillet&nbsp;2009&nbsp;0:00<br>
Prive : Non
</div>
</div> 
</td>
Vous pouvez voir dans la première cellule, vous avez un div class = event, et dans la seconde cellule un div class = eventdebut

Voici le code CSS pour chacun d'eux

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
 
table.calTheme1 div.event {
position: absolute;
padding: 5px 5px 5px 5px;
border: 3px solid #ffffff;
background-color: #6f6d56;
background-image:url(../../images/cellpic4.gif);
margin: 5px;
visibility: hidden;
left: 15%;
top: 70%;
width: 350px;
}
 
table.calTheme1 div.eventdebut {
position: absolute;
padding:5px 5px 5px 5px;
border: 3px solid #ffffff;
background-color: #6f6d56;
background-image:url(../../images/cellpic4.gif);
margin: 5px;
visibility: hidden;
left: 50%;
top: 70%;
width: 350px;
}
Et le code JavaScript permettant d'afficher la boite lorsque on passe notre souris sur celle-ci.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
<script type="text/javascript">
function show(id) {
var div = document.getElementById(id);
div.style.visibility = 'visible';
}
 
function hide(id) {
var div = document.getElementById(id);
div.style.visibility = 'hidden';
}
</script>
Le tout a deja fonctionné, mais pour une raison X, je ne sais plus pourquoi ca ne fonctionne plus.

Merci de m'aider