Affichage qui se déforme [Résolu]

[47-47]

Bonjour,
Je suis actuellement sur un code avec lequel j'obtiens une erreur que je ne comprends pas... Pourtant, j'ai un code similaire juste au dessus, qui fonctionne parfaitement... ^^

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
<table id="tablenote">
	<tr>
		<th class="headern">Domaine</th>
		<th class="headern">Note</th>
	</tr>
	<tr>
		<td class="domainn1">Graphisme</td>
		<td class="noten1">15</td>
	</tr>
	<tr>
		<td class="domainn2">Gameplay</td>
		<td class="noten2">17</td>
	</tr>
	...
</table>
<table id="note_mod">
	<tr>
		<th class="headern">Domaine</th>
		<th class="headern">Note</th>
	</tr>
	<tr>
		<td class="domainn1">Graphisme</td>
		<td class="noten1">
			<select name="note[]"  class="champN" size="" title="Graphisme">
				<option value="1">1 / 20</option>
				<option value="2">2 / 20</option>
				...
				<option value="19">19 / 20</option>
				<option value="20">20 / 20</option>
			</select>
		</td>
	</tr>
	<tr>
		<td class="domainn2">Gameplay</td>
		<td class="noten2">
			<select name="note[]"  class="champN" size="" title="Gameplay">
				<option value="1">1 / 20</option>
				<option value="2">2 / 20</option>
				...
				<option value="20">20 / 20</option>
			</select>
		</td>
	</tr>
	...
</table>

(Code légèrement abbrégé... ^^)
Et voici le CSS qui va avec...

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#tablenote {
	border: thin solid #000000;
	border-collapse: collapse;
	border-spacing: 0px;
	width: 300px;
	color: #000000;
	margin: auto;
}
#note_mod {
	border: thin solid #000000;
	border-collapse: collapse;
	border-spacing: 0px;
	width: 300px;
	color: #000000;
	margin: auto;
	display:none;
}

Le code css des cellules n'est normalement pas primodiale pour l'erreur... Il est relativement basique juste avec des définitions de couleurs ou autres...
Et mon problème, c'est que je fais apparaître un seul des 2 tableaux à la fois. Lorsque je charge la page, le premier tableau s'affiche, et il s'affiche correctement...
Ensuite, j'ai un bouton pour faire apparaitre le 2e tableau et cacher le premier, et là, les problèmes commencent... En effet, il semble qu'il ne prend plus les largeurs en considération, ni les marges! Ce qui fait que j'obtiens des tableaux à la largeur minimale, et sans marge latérale, ce qui fait qu'il n'est plus centré sur la page...
Et à partir de ce moment, que j'affiche le premier tableau (qui fonctionnait bien) ou le 2e, aucun des 2 ne s'affiche juste...

[NoSmoking]

Bonjour,
il eut été plus intéressant que tu nous montras la fonction qui affiche/masque les tableaux.

[47-47]

Elle est tout ce qu'il y a de plus simple... ^^ Je teste la visibilité du premier élément, si elle est sur visible, je commute les 2, puis l'inverse sinon... Ce qui donne ceci:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
function change(id1,id2)
{
	if(document.getElementById(id1).style.display == 'none')
	{
		document.getElementById(id1).style.display = 'inline';
		document.getElementById(id2).style.display = 'none';
	}
	else
	{
		document.getElementById(id1).style.display = 'none';
		document.getElementById(id2).style.display = 'inline';
	}
}

Mais sincèrement, je doute que ca vienne de là, car tous les autres endroits ou la fonction est lancée, je n'ai aucuns bugs... Mais bon, sait-on jamais... ^^

[NoSmoking]

Envoyé par 47-47

Mais sincèrement, je doute que ca vienne de là, car tous les autres endroits ou la fonction est lancée, je n'ai aucuns bugs... Mais bon, sait-on jamais... ^^

mets block à la place de inline, une table est un élément block et non inline par défaut

[47-47]

oops.. et si j'ai peu d'éléments tableaux, pour les autres parties, ca risque de poser problème?! ^^

Il s'agit de balises "section" principalement pour les autres éléments... Mais on y trouve également des spans, et 2-3 autres balises je crois... ^^

En attendant une éventuelle réponse, j'ai cherché un peu sur le web... Et malgré que je n'ai pas trouvé de réponse claire et nette, j'ai trouvé ma solution!

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
function change(id1,id2)
{
	if(document.getElementById(id1).nodeName == "TABLE")
	{
		if(document.getElementById(id1).style.display == 'none')
		{
			document.getElementById(id1).style.display = 'table';
			document.getElementById(id2).style.display = 'none';
		}
		else
		{
			document.getElementById(id1).style.display = 'none';
			document.getElementById(id2).style.display = 'table';
		}
	}
	else
	{
		if(document.getElementById(id1).style.display == 'none')
		{
			document.getElementById(id1).style.display = 'inline';
			document.getElementById(id2).style.display = 'none';
		}
		else
		{
			document.getElementById(id1).style.display = 'none';
			document.getElementById(id2).style.display = 'inline';
		}
	}
}

A noter que j'ai utilisé l'attribut "table" pour le display, qui correspond encore mieux au résultat attendu...

[RomainVALERI]

Nettement plus simple : sans tester le type d'élément, sache que si tu attribues une chaine vide à la propriété style.display, le moteur rétablit l'élément dans son mode de rendu "par défaut" ^^

Code javascript :

1
2
3
4
function onOff(elem) {
   if (elem.style.display == "none") elem.style.display = "";
   else elem.style.display = "none";
}

Pour les éléments "block" et "inline", ça marche nickel. A voir éventuellement si tout est OK pour l'ensemble des modes de rendu sur tous les différents navigateurs, mais jusqu'ici je n'ai pas eu de problème avec cette méthode.

[NoSmoking]

oui mais UNIQUEMENT si le display:none est placé dans la balise.