Pas décaler sur expand

**laurentSc** · 22/11/2013, 16h05

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 js :

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
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 css :

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
#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 html :

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

**Bovino** · 22/11/2013, 16h15

alors qu'elle ne devrait pas bouger

Ah...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

display:table-cell;

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

**laurentSc** · 22/11/2013, 16h29

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

**Bovino** · 22/11/2013, 16h44

Je vais éviter de te dire qu'il s'agit, là encore, des bases de CSS...

Ah non en fait, j'ai pas évité !

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

**laurentSc** · 22/11/2013, 17h01

Merci pour ton assistanat :

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é ?

Pas décaler sur expand

CSS

Discussions similaires

Partager

Partager