Discussion :

[Sensei.f]

Bonjour

je vous explique mon problème:
je génère automatiquement ce genre de page:
http://mysterra.info/test/test.htm
Si vous allez voir le lien, vous allez voir que l'affichage n'est pas tip top...
Voici le code de la page:

Code HTML :

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
 
<div style="width: 700px;">
	<hr>
	<div>
		<div style="float:left;">
			<input type="checkbox">
			<span>Troubles de la deglutition : </span>
		</div>
		<input style="width: 100%;" maxlength="254" type="text">
	</div>		
	<div>
		<div style="float:left;">
			<input type="checkbox">
			<span>Pathologies broncho-pulmonaires : </span>
		</div>
		<input maxlength="254"  type="text">
	</div>
</div>

Ce que je voudrais, en fait, c'est que le input démarre à la fin du texte associé à la checkbox pour aller jusqu'au bout de la balise div...
Je pensais qu'en mettant

Code HTML :

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

<input style="width: 100%;"

le problème allait être résolu, mais c'est pas le cas. Et là, je ne sais plus quoi testé... Alors je m'en remet à vous.
J'ai l'impression que mon problème ne peut pas être résolu avec les css, est ce que je me trompe ?

[grabriel]

Salut,

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div style="width: 700px;">
	<hr>
 
	<div style="float:left;">
			<input type="checkbox">
			<span>Troubles de la deglutition : </span>		
		<input style="width: 100%;" maxlength="254" type="text">
	</div>			
	<div style="float:left;">
			<input type="checkbox">
			<span>Pathologies broncho-pulmonaires : </span>
			<input maxlength="254"  type="text">
	</div>
</div>

En gros si tu mets ton texte et ton input dans le meme div il seront sur la meme ligne

[Sensei.f]

Oui mais... l'input ne va pas jusqu'au bout de la div qui fait 700px de large... c'est bien ça le problème !

[grabriel]

Salut,

En faite ton problème viens de <input maxlength="254" type="text" style="width:100%;" /> ton input prendra toute la largeur du div sous ie mais pas sous FF donc il vaux mieux mettre une largeur fixe.

regarde avec le code qui suit la différence entre IE et FF :

Code HTML :

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
<style>
        .ligne{
                width:700px;
                height:30px;
        }
</style>
 
<div style="width:700px;">
	<hr>
	<div class="ligne">
		<div style="float:left;">
			<input type="checkbox" id="a" />
			<span>Troubles de la deglutition : </span>		
		</div>
		<div style="float:left;">
			<input maxlength="254" type="text" style="width:100%;" />
		</div>
	</div>
	<div class="ligne">
		<div style="float:left;">
			<input type="checkbox" id="b" />
			<span>Pathologies broncho-pulmonaires : </span>
		</div>
		<div style="float:left;">
			<input maxlength="254" type="text" />
		</div>
	</div>
</div>

[EDIT]
T'as une explication ici :
http://www.developpez.net/forums/sho...d.php?t=297283
[/EDIT]

[Sensei.f]

Ok, donc je suis bien emmerdé...
je ne peux pas calculer la taille de la div qui contient le texte & la check... car la police du texte peut changer...

donc faut faire une fonction en javascript qui redimensionne l'input correctement, c'est bien ça ? Seulement, est ce possible de trouver la taille de la div, si celle ci n'est pas exprimé explicitement ?

[grabriel]

as-tu lu la réponse à ton problème dans le lien du dessus :

Tu peux regarder ton site sur le navigateur opera et tu verras à quoi il ressemblera sur tous les navigateurs récents lorsque tu auras rajouté le doctype au haut de ta page.

En mode standard, la propriété height en % ne peut s'appliquer que si le height du parent est clairement défini, ce qui n'est pas le cas dans ta structure:

html:100%, body 100%, 1er div min-height 100%, 2ème div height 100%

Vu que ton premier div n'a pas de height le 2ème ne peut pas attribuer de hauteur en % et prend donc la valeur auto.

Comme tu n'as pas mis de doctype, FF interprète néanmoins ce height de 100%, seulement il te piège plus loin, puisque ton 2ème div ayant une hauteur de 100% (de la taille de la fenêtre en réalité et non de la hauteur réel du 1er div), le premier s'arrête aussi à cette même hauteur de 100% de la fenêtre et donc ton fond n'est plus visible.