Aligner des div avec des input

**pc75** · 04/07/2013, 10h20

Bonjour,

Dans un formulaire, j'ai plusieurs zones de saisie (text, textarea, ...).
Quand on quitte une zone, un onblur déclenche un vérificateur orthographique (full javascript), et les éventuelles erreurs sont affichées dans une balise div.

Y-a-t-il un algorythme qui permet d'ajuster la longueur de mes div à la longueur des zones de saisie desquelles elles dépendent.

En résumé comment faire pour que mes div aient la même longueur que mes zones de saisie ?

Merci

Mon 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
 
<HTML>
<HEAD>
<meta 	http-equiv="content-Language" 		content="fr-FR">
<meta 	http-equiv="content-type" 		content="text/html; charset=ISO-8859-1">
<meta 	http-equiv="imagetoolbar" 		content="no">
<Script Type="Text/JavaScript" Src="Sources/Fonctions.js"></Script>
</HEAD>
<BODY>
<form name="frm">
Activer le vérificateur orthographique : 
<input type="checkbox" name="ActiveSpell" id="ActiveSpell">
<br><br>
<div>
	<input type="text" name="texte1" id="texte1" size="50" onblur="Controle(this.name, 'aff1')">
	<br>
	<div name="aff1" id="aff1" style="background-color:lightgrey;width:1000px;font-size:13px;font-style:italic;text-align:left;display:none;">
	</div>
</div>
<br>
 
<div>
	<input type="text" name="texte2" id="texte2" size="100" onblur="Controle(this.name, 'aff2')">
	<br>
	<div name="aff2" id="aff2" style="background-color:lightgrey;width:1000px;font-size:13px;font-style:italic;text-align:left;display:none;">
	</div>
</div>
<br>
 
<div>
	<textarea name="texte3"  id="texte3" cols="50" rows="10" onblur="Controle(this.name, 'aff3')"></textarea>
	<br>
	<div name="aff3" id="aff3" style="background-color:lightgrey;width:1000px;font-size:13px;font-style:italic;text-align:left;display:none;">
	</div>
</div>
 
</form>
<Script Type="Text/JavaScript" Src="Sources/Initialisation.js"></Script>
 
</BODY>
</HTML>

**rodolphebrd** · 04/07/2013, 10h29

Bonjour,

juste pour bien comprendre, est-ce que vous voulez quelque chose comme cela:

Code css :

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

1
2
3
input, textarea {
	width :250px; /* ou unités un %*/
}

**pc75** · 04/07/2013, 10h37

Re,

Merci, mais je pense avoir trouvé une solution.
Pour mes input, j'ai remplacé la propriété size par une balise style, et pour mes textareas, j'ai remplacé la propriété rows par une balise style.

Mon nouveau 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
 
<HTML>
<HEAD>
<meta 	http-equiv="content-Language" 		content="fr-FR">
<meta 	http-equiv="content-type" 		content="text/html; charset=ISO-8859-1">
<meta 	http-equiv="imagetoolbar" 		content="no">
<Script Type="Text/JavaScript" Src="Sources/Fonctions.js"></Script>
</HEAD>
<BODY>
<form name="frm">
Activer le vérificateur orthographique : 
<input type="checkbox" name="ActiveSpell" id="ActiveSpell">
<br><br>
<div>
	<input type="text" name="texte1" id="texte1" style="width:200px" onblur="Controle(this.name, 'aff1')">
	<br>
	<div name="aff1" id="aff1" style="background-color:lightgrey;width:200px;font-size:13px;font-style:italic;text-align:left;display:none;">
	</div>
</div>
<br>
 
<div>
	<input type="text" name="texte2" id="texte2" style="width:500px" onblur="Controle(this.name, 'aff2')">
	<br>
	<div name="aff2" id="aff2" style="background-color:lightgrey;width:500px;font-size:13px;font-style:italic;text-align:left;display:none;">
	</div>
</div>
<br>
 
<div>
	<textarea name="texte3"  id="texte3" rows="10" style="width:1000px" onblur="Controle(this.name, 'aff3')"></textarea>
	<br>
	<div name="aff3" id="aff3" style="background-color:lightgrey;width:1000px;font-size:13px;font-style:italic;text-align:left;display:none;">
	</div>
</div>
 
</form>
<Script Type="Text/JavaScript" Src="Sources/Initialisation.js"></Script>
 
</BODY>
</HTML>

**rodolphebrd** · 04/07/2013, 10h58

Pour pouvoir tester les div correspondantes il faudrait le code Js...

**pc75** · 04/07/2013, 11h16

Re,

Ci-joint le contenu de mon sous-répertoire Sources qui contient les .js

Par contre, j'ai un second problème ; Sous Firefox, la longueur des div ne s'aligne pas et la couleur de fond reste transparente.

Une idée ?

Merci.

**rodolphebrd** · 04/07/2013, 11h56

Je n'arrive pas a tester votre code car il ne se passe rien après mise en place du contenu de votre pièce jointe.

Je suis allé voir sur le site de marcel-bultez pour vérifier et je pense qu'il manque quelque chose dans ce vous donnez.

Aligner des div avec des input

HTML

Vue hybride

Discussions similaires

Partager

Partager