Pas décaler sur expand

Bonjour,

j'ai 6 listes organisées par du CSS en table (2 lignes de 3 listes) ; sur la 3e liste de la 1e ligne, il y a un bouton "expand" et si l'on clique dessus, ça étire la liste et cache la liste juste en-dessous sur la 2e liste ; le problème, c'est que dans ce cas-là, la 2e liste de cette 2e ligne est décalée sur la droite alors qu'elle ne devrait pas bouger.
Pour constater ce problème, aller sur http://laurentschmitt18.free.fr/site...es_expand.html

Le code correspondant est :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function expand(id, expanded){
  var Item = document.getElementById(id); 
  if(expanded=== undefined){
    expanded = (Item.offsetWidth == 0); //toggle expanded state
  }
 
  Item.style.display = expanded ? "block" : "none"; 
  document.getElementById(id+'Bt').href = expanded ? "#expanded" : "#";
  document.getElementById(id+'Bt').innerHTML = expanded ? "Collapse" : "Expand";
document.getElementById(id+'Bt2').style.display=  (document.getElementById(id+'Bt2').style.display=="block") ? "none" : "block"; 
 
}
function init() {
    expand("test1", window.location.hash==="#expanded");
 
}

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
#titre3Bt2 {
display:block;
}
.class2 {
position:absolute;
margin-left:0px;
}
ul.Menu1 {
  display:table;
  width:790px;
  }
  ul.Menu1 li {
  display:table-cell;
  list-style-type: none;
  }
ul.listMenu {
  display:block;
  padding:0;
  margin:0;
  border-collapse:collapse;
   font-size:.9em;
 }
ul.listMenu li {
  display:block;
  list-style-type: none;
  margin:0;
  padding:0;	
  width:270px;
  text-align:center;
  }

et

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
<body onload="init()">
 
<ul class="Menu1">
  <li>
	<ul class="listMenu">
		<li>
			<script>document.write("titre_1");</script>
		</li>
	</ul>
  </li>
  <li>
	<ul class="listMenu">
		<li> 
			<script>document.write("titre_2");</script>
		</li>
	 </ul> 
 
  </li>
  <li>
	<ul class="listMenu">
		<li>
			<script>document.write("titre_3");</script>
		</li>
		<li><a id="test1Bt" href="#" onclick="expand('test1');">Expand</a>
	<!------------->
		 <div id="test1" class="class2">
	<ul class="listMenu">
	   <li>titre3-1</li>
	   <li>titre3-2</li>
	   <li>titre3-3</li>
	   <li>titre3-4</li>
	   <li>titre3-5</li>
	   <li>titre3-6</li>
	   <li>titre3-7</li>
	   <li>titre3-8</li>
	   <li>titre3-9</li>
	</ul>
</div>
	<!-------------->
		</li>		
	</ul> 
 </ul> <!-- fin Menu1 1 -->
<ul class="Menu1">
  <li>
	<ul class="listMenu">
		<li>
			<script>document.write("titre_4");</script>
		</li>
	</ul>
  </li>
  <li>
	<ul class="listMenu">
		<li> 
			<script>document.write("titre_5");</script>
		</li>
	 </ul> 
  </li>
  </li>
 
  <li>
	<ul id="test1Bt2" class="listMenu">
		<li> 
			<script>document.write("titre_6");</script>
		</li>
	</ul>
  </li>	
 
 </ul>	
 
 
  </body>

Comment éviter ce phénomène ?

Citation:

alors qu'elle ne devrait pas bouger

Ah...

Code:

display:table-cell;

Dis-moi, que font les cellules d'un tableau quand l'une d'entre elles disparait ? :roll:

Oui, la raison du phénomène est claire, mais comment faire pour l'éviter ?

Je vais éviter de te dire qu'il s'agit, là encore, des bases de CSS... :roll:
Ah non en fait, j'ai pas évité ! :mrgreen:

Si tu veux préserver l'espace utilisé par un élément masqué, il faut passer par visibility:hidden, pas par display:none.
Encore que là, ça ne semble même pas nécessaire, il suffit de mettre un background-color à l'élément au-dessus qui soit différent de transparent.

Pour finir, inutile aussi de rappeler que la mise en page en table est fortement déconseillée, pas uniquement parce qu'on aime pas les balises <table>, mais surtout parce que ça pose beaucoup de problèmes divers, dont des performances de rendu désastreuses surtout si la table est incomplète, donc les display venus des tables, c'est pas beaucoup mieux que les balises...

Merci pour ton assistanat :

Citation:

Envoyé par Bovino

Ce n'est pas parce que tu as réussi, grâce à l'aide (on peut même dire l'assistanat) de plusieurs membres du forum sur des discussions de plusieurs pages à réaliser des choses niveau grand débutant !

Sinon, tu déconseilles une mise en page tabulaire, mais alors comment faire si c'est le look souhaité ?