18041 sujets

Questions générales et questions de débutants

[Résolu]Formulaire sans tableau avec contenu dynamique

Bonjour tout le monde,
Voilà, je doit créer un formulaire dont la présentation correspond au code (simplifié) ci-dessous.
Le contenu du label "f13" est dynamique en fonction de la sélection du select du label "f12".

Mon problème est le suivant :
Selon le contenu du label "f13", sa hauteur varie et entraîne le déplacement vers le bas des lignes 2 et 3.

Y a-t'il un moyent de faire en sorte que les labels conservent leurs position et ce malgré le changement de hauteur du label "f13" ?

Un tout grand merci pour votre aide.
Horst


<html>
<head>
<title></title>
<style type="text/css">

#f1 {
      width: 700px;
      text-align: left;
}
 
#f1 label {
      display: block;
      width: 200px;
      line-height: 14px;
      padding: 0px 0px 12px 0px;
      border: 1px solid red;
}


#f1 label input,
#f1 label select {
      display: block;
      margin-top: 3px;
		width: 150px;
}

#f1 label.f11,
#f1 label.f21,
#f1 label.f31 {
      clear: left;
}

#f1 label.f11,
#f1 label.f12,
#f1 label.f13,
#f1 label.f21,
#f1 label.f22 {
      float:left;
}
</style>
</head>

<body>
<fieldset id="f1">
	<legend>Ma légende</legend>
	<label class="f11">
		f11:
		<input type="text" id="f11" value="f11"/>
	</label>
	<label class="f12">
		f12:
		<select id="f12">
			<option value="1">Valeur 1</option>
			<option value="2">Valeur 2</option>
		</select>
	</label>
	<label class="f13">
		f13:
		<input type="text" id="f13" value="f13"/>
	</label>
	<label class="f21">
		f21:
		<input type="text" id="f21" value="21"/>
	</label>
	<label class="f22">
		f22:
		<select id="f22">
			<option value="1">Valeur 1</option>
			<option value="2">Valeur 2</option>
		</select>
	</label>
	<label class="f31">
		f31:
		<input type="text" id="f31" value="f31"/>
		
	</label>
</fieldset>

</body>
</html>

Modifié par hkriegers (28 Mar 2007 - 07:50)
Bonjour,

1. Y a-t-il un Doctype pour cette page ? Si non, se pencher sur la question.

2. Pour des formulaires vraiment accessibles, il est préférable d'utiliser des labels explicites.
<label class="f11" for="f11">f11 :</label>
<input type="text" id="f11" value="f11" />

On positionnera alors le couple label+input en le plaçant dans un conteneur, par exemple un élément p.

3. Cette page de test en ligne faciliterait la visualisation du problème et optimiserait tes chances d'obtenir de l'aide. Smiley cligne
Bonjour et merci pour la réponse.
J'ai donc encapsulé les couple label+input dans un élément.
Sous FF le résultat est bien, mais sous IE, les blocs p21, p22 et p31 sont poussés vers le bas lorsque p13 prend plus de place en hauteur.

La page en ligne : http://www.recremorges.org/hokr1/test5.html

La source de la page pourra êter récupérée dans la page en ligne afin de ne pas surcharger ce post.

Et encore merci pour votre aide. Smiley ravi
Modifié par hkriegers (29 Mar 2007 - 09:21)
C'est dû à la gestion un peu erratique des flottants et de la propriété clear par IE (au moins dans la version 6, en tout cas).

Solution simple pour peu qu'elle puisse être automatisée dans le cas d'un contenu dynamique : englober chaque « ligne » de flottants dans un conteneur (à priori un div), et éviter que les flottants ne dépassent du conteneur avec par exemple un overflow: auto doublé (soyons fous...) d'un width: 100% pour IE6.

Voir à ce sujet :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
Ta réponse m'a donné la solution Smiley ravi Merci.
Voici le code de la solution que j'ai adopté :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Le Titre</title>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

#f1 {
	width: 700px;
	text-align: left;
	margin: 5px;
	padding: 5px;
}

#f1 #gauche,
#f1 #droite {
	height: 150px;
	border: 0px solid red;
}
#f1 #gauche {
	width: 370px;
	float: left;
}
#f1 #droite {
	width: auto;
	float: left;
}

#f1 #gauche p {
	width: 180px;
	height: 50px;
	border: 0px solid blue;
}


#f1 input,
#f1 select,
#f1 label {
	display: block;
	margin-top: 3px;
	width: 150px;
}

#f1 #p11,
#f1 #p21,
#f1 #p31 {
	clear: left;
}

#f1 #p11,
#f1 #p12,
#f1 #p21,
#f1 #p22 {
	float: left;
}


</style>
<script type="text/javascript" language="javascript">
	function change(el) {
		var choix = el.value;
		var dest = document.getElementById('droite');
		var cont = "";
		
		switch (choix) {
			case "121":
				cont = 
						  "<label for=\"i31-1\">p13-1:</label>"
						+ "<input type=\"text\" id=\"i31-1\"/>"
						+ "<label for=\"i31-2\">p13-2:</label>"
						+ "<input type=\"text\" id=\"i31-2\"/>";
				break;
			
			case "122":
				cont =
						" <label for=\"i31-1\">p13-1:</label>"
						+ "<textarea id=\"i31-1\" rows=\"6\" cols=\"30\"></textarea>";
				break;
				
			default :
        		cont = "";
		}
		
		dest.innerHTML = cont;
	}
</script>
</head>
<body>

<fieldset id="f1">
      <legend>Ma légende</legend>
<div id="gauche">
	<p id="p11">
		<label for="i11">p11:</label>
		<input type="text" id="i11" value="11"/>
	</p>
	<p id="p12">
		<label for="i12">p12:</label>
		<select id="i12" onchange="change(this);">
			<option value="120">Votre choix</option>
			<option value="121">Valeur 1</option>
			<option value="122">Valeur 2</option>
		</select>
	</p>

	<p id="p21">
		<label for="i21">p21:</label>
		<input type="text" id="i21" value="21"/>
	</p>

    <p id="p22">
    	<label for="i22">p22:</label>
		<select id="i22">
			<option value="220">Votre choix</option>
			<option value="221">Valeur 1</option>
			<option value="222">Valeur 2</option>
		</select>
	</p>


	<p id="p31">
		<label for="i31">p31:</label>
		<input type="text" id="i31" value="31"/>
	</p>
</div>


<div id="droite"></div>

</fieldset>

</body>
</html>

Modifié par hkriegers (29 Mar 2007 - 16:16)
Sujet clos
Aller à