Qu'est-ce qui ne fonctionne pas
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:
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 10 juillet 2009 0:00<br>
Fin Location : Lundi 13 juillet 2009 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 10 juillet 2009 0:00<br>
Fin Location : Lundi 13 juillet 2009 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:
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:
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
