Aligner des div avec des input

**pc75** · 04/07/2013, 16h04

En ajoutant background-color: rgb(255,172,172), on récupère bien le surlignage.

Si on tape un texte très court (un ou deux mots), ça parait correct, mais fais un essai sur le textarea en collant un texte assez long, et là, c'est la cata !

Dans le fichier Fonctions.js, j'ai tenté (bêtement) de rajouter une ligne (en rouge), mais pas d'effet sous FF et IE me sort "Argument non valide"

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
//——————————————————————————————————————————————————
function Controle(Zone, Msg)	//—— click sur action à faire ——
//——————————————————————————————————————————————————
{
if(document.getElementById('ActiveSpell').checked == true)
{
	var tmp;
	var mot = eval("document.getElementById('" + Zone + "').value");
	var LaZone = mot.replace(/’/g, "'");
	tmp = LaZone.replace(/[a-zA-Zà-æè-ëì-ïò-öù-ü']+/gi, function($0) { return (Recherche($0)); } );
	if ( tmp!=LaZone )
		{
		tmp = tmp + '<p align=right><a href="#" onclick="document.getElementById(\'' + Msg + '\').style.display=\'none\'">Fermer</a></p>';
		document.getElementById(Msg).style.display="";
		gid(Msg).innerHTML=tmp;
		gid(Msg).style.display="inline";
		gid(Msg).style.width="inherit";
		}
	else
		{
		document.getElementById(Msg).style.display="none";
		}
}
}

**rodolphebrd** · 04/07/2013, 16h04

Dans cette ligne modifier:

Code javascript :

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

gid(Msg).style.display="inline-block";

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
label {
	color:red;
}
#aff1 {
	width: 200px;
	font-size: 13px;
	font-style: italic;
	text-align: left;
	background-color: lightgrey;
}
#aff2 {
	width: 500px;
	font-size: 13px;
	font-style: italic;
	text-align: left;
	background-color: lightgrey;
}
#aff3 {
	width: 1000px;
	font-size: 13px;
	font-style: italic;
	text-align: left;
	background-color: lightgrey;
}

Test avec du texte très long et ça passe.

**rodolphebrd** · 04/07/2013, 16h06

Il faut enlever le style inline pour définir une largeur...

**pc75** · 04/07/2013, 16h25

Re,

Ca ressemble à pratiquement 100% du résultat que je souhaitais.
Merci.

Si tu veux essayer ce texte dans le textarea sous FF, les alignements sont corrects, mais l'affichage est curieux :

Bonjour,

Important : Les forums sont le dernier recours dans votre recherche de solutions, c'est pourquoi nous vous recommandons avant d'ouvrir un nouveau sujet d'effectuer une recherche sur le domaine http://xhtml.developpez.com. Vous y trouverez une multitude de ressources qui peuvent vous aider tout au long de vos recherches. Dans le cas où il vous faudrait un complément et que vous souhaitez passer par le forum il serait bon d'effectuer, avant toute chose, une recherche comme le stipule nos règles.

J'ai tenté ça mais sans succès :

Code :

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

1
2
 
return '<LABEL style="BACKGROUND-COLOR: rgb(255,172,172);">'+rch.replace(/^\s+/g,'')+'</LABEL>';	// signaler un mot erroné

**Candygirl** · 04/07/2013, 18h07

Envoyé par rodolphebrd

Dans cette ligne modifier:

Code javascript :

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

gid(Msg).style.display="inline-block";

Une raison particulière d'opter pour du inline-block? Un simple display:block me semblerait plus approprié.

@pc75
As-tu une raison de développer sans doctype ?

Autrement je n'ai pas le problème que tu screen sur Firefox dans ton dernier message avec le code de base et pour unique changement le display:block (ou inline-block) dans le js

**rodolphebrd** · 04/07/2013, 18h21

CandyGirl : aucune raison, car au départ le display était en inline. J'ai rajouté block pour aller plus vite ^^

Pas de problème sur FF non plus avec les 2 display.... Avec le texte donné à tester.

**pc75** · 05/07/2013, 09h09

Bonjour,

J'ai remplacé

Code :

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

1
2
 
gid(Msg).style.display="inline-block";

par

Code :

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

1
2
 
gid(Msg).style.display="block";

Et le résultat sou FF est le même

**rodolphebrd** · 05/07/2013, 09h22

As-tu vidé ton cache?

**pc75** · 05/07/2013, 10h14

Je viens de vider le cache sous FF et c'est la même chose.
Note bien que ce n'est pas catastrophique, mais j'aime bien les choses carrées.

**rodolphebrd** · 05/07/2013, 10h18

Tu as raison d'aller jusqu'au bout mais je n'ai pas ce rendu sur FF...

**rodolphebrd** · 05/07/2013, 10h21

FF 22 sous Mac

**pc75** · 05/07/2013, 10h31

Je suis avec FF 22 sous Windows !

**rodolphebrd** · 05/07/2013, 10h33

Pour être sûr que l'on parle le même langage:

Code javascript :

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
 
{
	var Min=0;
	var Max=dict.length-1;
	var Mil=Math.floor((Max+Min)/2);
	if ( mot<dict[0] ) return -1;
	if ( mot==dict[0] ) return 0;
	if ( mot==dict[dict.length-1]) return (dict.length-1);
	if ( mot>dict[dict.length-1] ) return -1;
	while( Mil!=Min )
	{
		if ( dict[Mil]==mot ) 
				{
					return Mil;
				}
		else	{
					if (dict[Mil]>mot)
							{ 
								Max=Mil; 
							}
					else	{ 
								Min=Mil; 
							}
					Mil=Math.floor((Max+Min)/2);
				}
	}
	return -1;
}
{
	var car1=mot.charAt(0);
	car1=car1.replace(/[à-æ]/i,"a");
	car1=car1.replace(/[è-ë]/i,"e");
	car1=car1.replace(/[ì-ï]/i,"i");
	car1=car1.replace(/[ò-ö]/i,"o");
	car1=car1.replace(/[ù-ü]/i,"u");
	car1=car1.replace(/[ù-ü]/i,"u");
 
	try			{	
					return eval("Mots_"+car1);
				}
	catch(e)	{
					return false;
				}
}
//——————————————————————————————————————————————
function Recherche(rch)	//—— contrôler le mot ——
//——————————————————————————————————————————————
{
	var mot=rch.toLowerCase();
	var dict=QuelDict(mot);
	if ( !dict ) return rch;
	var bon=RecDic(dict,mot);
	if ( bon>=0 ) 
			{	// mot trouvé
				return rch;
			}
	else	{	// pas trouvé ?
				var remp=rch.indexOf("'");
				if ( remp )
				{	// présence d'un guillemet
					if ( remp!=mot.length-1 )
					{	// contrôler les "2 mots"
						var m1=mot.substring(0,remp+1);
						bon=RecDic(dict,m1);
						if ( bon>=0 ) 
						{	// le 1er est bon ( l' d' ... )
							m1=mot.substring(remp+1);
							dict=QuelDict(m1);
							bon=RecDic(dict,m1);
							if ( bon>=0 )
							{	// le 2ème aussi
								return rch;
							}
						}
					}
				}
 
				return '<LABEL>'+rch+'</LABEL>';	// signaler un mot erroné
			}
}
{
if(document.getElementById('ActiveSpell').checked == true)
{
	var tmp;
	var mot = eval("document.getElementById('" + Zone + "').value");
	var LaZone = mot.replace(/’/g, "'");
	tmp = LaZone.replace(/[a-zA-Zà-æè-ëì-ïò-öù-ü']+/gi, function($0) { return (Recherche($0)); } );
	if ( tmp!=LaZone )
		{
		tmp = tmp + '<p align=right><a href="#" onclick="document.getElementById(\'' + Msg + '\').style.display=\'none\'">Fermer</a></p>';
		document.getElementById(Msg).style.display="";
		gid(Msg).innerHTML=tmp;
		gid(Msg).style.display="block";
		}
	else
		{
		document.getElementById(Msg).style.display="none";
		}
}
}
 
{
	return document.getElementById(repere);
}
 
{
	opener=self;
	window.close();	
}

**rodolphebrd** · 05/07/2013, 10h39

Inspecte ton label avec Firebug et dis-moi ce que tu vois ?

**Candygirl** · 05/07/2013, 10h40

Perso j'ai testé avec le code que tu donnes au départ. Après vous avez semble-t-il ajouté un display:inline-block sur le label. Celui-ci pourrait bien être à l'origine de ton problème.

Autrement je ne comprends pas trop d'ailleurs le choix d'un élément label. Pourquoi ne pas utiliser un b, strong ou span ?

**pc75** · 05/07/2013, 10h41

Seule différence, chez toi :

Code :

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

1
2
 
return '<LABEL>'+rch+'</LABEL>';	// signaler un mot erroné

Chez moi :

Code :

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

1
2
 
return '<LABEL style="BACKGROUND-COLOR: rgb(255,172,172);">' + rch.replace(/^\s+/g,'') + '</LABEL>';	// signaler un mot erroné

**rodolphebrd** · 05/07/2013, 10h43

J'ai le même rendu avec inline-block. Et Pc75 a testé les 2 solutions.

Je me suis posé la question aussi de changer de balise mais je ne comprends pas cette différence.

CandyGirl tu es sous windows?

**pc75** · 05/07/2013, 10h44

Envoyé par rodolphebrd

Inspecte ton label avec Firebug et dis-moi ce que tu vois ?

Voila :

<div><textarea id="texte3" onblur="Controle(this.name, 'aff3')" style="width:1000px;resize:none;" rows="10" name="texte3"></textarea><br></br><div id="aff3" name="aff3" style="display: block;">
Bonjour,

Important : Les forums sont le dernier recours dans votre recherche de solutions, c'est pourquoi nous vous recommandons avant d'ouvrir un nouveau sujet d'effectuer une recherche sur le domaine
<label style="BACKGROUND-COLOR: rgb(255,172,172);"> … </label>
://
<label style="BACKGROUND-COLOR: rgb(255,172,172);"> … </label>
.
<label style="BACKGROUND-COLOR: rgb(255,172,172);"> … </label>
.
<label style="BACKGROUND-COLOR: rgb(255,172,172);"> … </label>
. Vous y trouverez une multitude de ressources qui peuvent vous aider tout au long de vos recherches. Dans le cas où il vous faudrait un complément et que vous souhaitez passer par le forum il serait bon d'effectuer, avant toute chose, une recherche comme le stipule nos règles.
<p align="right"> … </p></div></div>

**rodolphebrd** · 05/07/2013, 10h45

L'inspection côté CSS

**pc75** · 05/07/2013, 10h48

Je viens de voir le msg de Candygirl.
J'ai remplacé la balise label par une balise span et tout est OK.

Je vais faire encore quelques tests avant de mettre le sujet résolu.

En tout cas, merci à vous.

Aligner des div avec des input

HTML

Discussions similaires

Partager

Partager