problème d'espacement de div
Bonjour,
Avec ce code j'affiche des données dans des div si on clique sur un texte le problème est que la div s'affiche avec un espacement par rapport au texte qui l'affiche comme le montre la figure ci-jointe.
Voici le code :
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<html>
<head>
<title>Calques</title>
<script type="text/javascript">
<!--
function switchDiv(divId, rId){
divElement = document.getElementById(divId);
rElement = document.getElementById(rId);
if(divElement.className=="divFerme"){
divElement.className = "divOuverte";
rElement.src = "moins.gif";
}
else{
divElement.className = "divFerme";
rElement.src = "plus.gif";
}
}
//-->
</script>
</head>
<style type="text/css">
<!--
.divOuverte{
border: 2px ridge;
display: block;
float:top;
}
.divFerme{
border: 2px ridge;
display: none;
float:top;
}
.rubrique{
background-color: #0000FF;
cursor: pointer;
list-style-type:none;
}
//-->
</style>
<body>
<ul>
<li class="rubrique" id="li1" onClick="switchDiv('div1', 'r1');">
<h1><IMG id="r1" src="plus.gif" HSPACE="10" VSPACE="5">Rubrique 1</h1>
</li>
<div class="divFerme" id="div1">Contenu 1
<ul>
<li class="rubrique" id="li4" onClick="switchDiv('div4', 'sr1');">
<h2><IMG id="sr1" src="plus.gif" HSPACE="10" VSPACE="5">Sous Rubrique 1</h2>
</li>
<div class="divFerme" id="div4">Sous Contenu 1</div>
</ul>
</div>
</ul>
<ul>
<li class="rubrique" id="li2" onClick="switchDiv('div2', 'r2');">
<h1><IMG id="r2" src="plus.gif" HSPACE="10" VSPACE="5">Rubrique 2</h1>
</li>
<div class="divFerme" id="div2">Contenu 2</div>
</ul>
<ul>
<li class="rubrique" id="li3" onClick="switchDiv('div3', 'r3');">
<h1><IMG id="r3" src="plus.gif" HSPACE="10" VSPACE="5">Rubrique 3</h1>
</li>
<div class="divFerme" id="div3">Contenu 3</div>
</ul>
</body>
</html> |
Merci d'avance.
