problème d'espacement de div

Invité · 28/02/2009, 13h49

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 :

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
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.