Positionnement des calques

Bonjour tout le monde,
Dans mon exemple suivant j'essai d'afficher des calques (des div) en fonction de la valeur de mon select :

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
 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
	function afficheCalques(f){
		if(f==1){
			document.getElementById('c1').style.visibility='visible';
			document.getElementById('c2').style.visibility='hidden';
			document.getElementById('c3').style.visibility='hidden';
		}else if(f==2){
			document.getElementById('c2').style.visibility='visible';
			document.getElementById('c1').style.visibility='hidden';
			document.getElementById('c3').style.visibility='hidden';
		}else if(f==3){
			document.getElementById('c3').style.visibility='visible';
			document.getElementById('c1').style.visibility='hidden';
			document.getElementById('c2').style.visibility='hidden';
		}
	}
</script>
</head>
 
<body>
<form id="form1" name="form1" method="post" action="">
  <label>test :
  <select name="select" onchange="afficheCalques(this.value)">
    <option value="0">..........</option>
    <option value="1">rrr</option>
    <option value="2">fff</option>
    <option value="3">ggg</option>
  </select>
  </label>
  <p>
  	<div id="c1" style="LEFT:40px; TOP:40px;visibility:hidden">
		calque 1 : <input name="t1" type="text" />
	</div>
  	<div id="c2" style="LEFT:40px; TOP:40px;visibility:hidden">
		calque 2 : <input name="t2" type="text" />
	</div>
  	<div id="c3" style="LEFT:40px; TOP:40px;visibility:hidden">
		calque 3 : <input name="t3" type="text" />
	</div>
  </p>
</form>
</body>
</html>

tout marche bien sauf le positionnement de mes calques, malgré que j'ai donné les mêmes valeurs top et left, mes calques ne s'affiche pas dans la même position.:cry:

autre chose, est ce que ça peut me poser des problèmes lors du submit de mon formulaire?

et merci d'avance de votre aide.

Après quelques retouches

Pour placer un calque où l'on veut dans une page il faut qu'il soit en position 'absolute'.

du coups :

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
<html>
<head>
<title>Test</title>
	<style type="text/css">
 
		div.calque {
			border: 1px solid black;
			position: absolute;
			visibility: hidden;
			top: 40px;
			left: 40px
		}
 
	</style>
<script type="text/javascript">
	function afficheCalques(f){
		if(f==1){
			document.getElementById('c1').style.visibility='visible';
			document.getElementById('c2').style.visibility='hidden';
			document.getElementById('c3').style.visibility='hidden';
		}else if(f==2){
			document.getElementById('c2').style.visibility='visible';
			document.getElementById('c1').style.visibility='hidden';
			document.getElementById('c3').style.visibility='hidden';
		}else if(f==3){
			document.getElementById('c3').style.visibility='visible';
			document.getElementById('c1').style.visibility='hidden';
			document.getElementById('c2').style.visibility='hidden';
		}
	}
</script>
</head>
 
<body>
<form id="form1" name="form1" method="post" action="">
  <label>test :
  <select name="select" onchange="afficheCalques(this.value)">
    <option value="0">..........</option>
    <option value="1">rrr</option>
    <option value="2">fff</option>
    <option value="3">ggg</option>
  </select>
  </label>
  	<div id="c1" class="calque">
		calque 1 : <input name="t1" type="text" />
	</div>
  	<div id="c2" class="calque">
		calque 2 : <input name="t2" type="text" />
	</div>
  	<div id="c3" class="calque">
		calque 3 : <input name="t3" type="text" />
	</div>
</form>
</body>
</html>

Citation:

autre chose, est ce que ça peut me poser des problèmes lors du submit de mon formulaire?

Non cela ne pose pas de problème car les 3 'input type=text' seront envoyés. A toi, côté serveur, de récupérer les valeurs et de savoir laquelle a été choisie.

Merci bien gKsam.