Aligner des div avec des input

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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";
		}
}
}

Dans cette ligne modifier:

Code:

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

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

04/07/2013, 16h06
rodolphebrd

Il faut enlever le style inline pour définir une largeur...
04/07/2013, 16h25
pc75

2 pièce(s) jointe(s)
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 :

Citation:

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:

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

Citation:

Envoyé par rodolphebrd

Dans cette ligne modifier:

Code:

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
04/07/2013, 18h21
rodolphebrd

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.
05/07/2013, 09h09
pc75

1 pièce(s) jointe(s)
Bonjour,

J'ai remplacé
Code:

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

1 2 gid(Msg).style.display="block";
Et le résultat sou FF est le même
05/07/2013, 09h22
rodolphebrd

As-tu vidé ton cache?
05/07/2013, 10h14
pc75

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.
05/07/2013, 10h18
rodolphebrd

Tu as raison d'aller jusqu'au bout mais je n'ai pas ce rendu sur FF...:koi:
05/07/2013, 10h21
rodolphebrd

1 pièce(s) jointe(s)

FF 22 sous Mac
05/07/2013, 10h31
pc75

Je suis avec FF 22 sous Windows !

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

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
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();	
}

05/07/2013, 10h39
rodolphebrd

Inspecte ton label avec Firebug et dis-moi ce que tu vois ?
05/07/2013, 10h40
Candygirl

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 ?

Seule différence, chez toi :

Code:

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

Chez moi :

Code:

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

05/07/2013, 10h43
rodolphebrd

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?
05/07/2013, 10h44
pc75

Citation:

Envoyé par rodolphebrd

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

Voila :

Citation:

<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>
05/07/2013, 10h45
rodolphebrd

L'inspection côté CSS ;)
05/07/2013, 10h48
pc75

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.

Voir 40 message(s) de cette discussion en une page