[RESOLU] Mise en forme d'un formulaire probleme de width avec <lab

bonjour
voici mon problème
je souhaite faire un formulaire sans mis en forme tableau avec le nom des champ dans une balise <label> qui fasse toujours la meme taille 200px avec le champ à coté

<p>
   <label>titre du champ 1</lablel>
   <input type="text" name="champ1" ... />
<p>
<p>
   <label>titre du champ 2</lablel>
   <input type="text" name="champ2" ... />
<p>

   label{widht:150px;}

je voudrais que le titre dans le label soit toujours de 150px mais ce ne marche pas.

j'ai trouvé la solution de faire comme cela:

   label{
     widht:150px; 
     display:block;
     float:left}

mais du coup je suis obligé de donner une hauteur à <p> et entre IE et FF j'ai des problème de compatibilité

est ce que qlq aurai une idée plu simple ..??

amicalement
Modifié par khoudj (02 Aug 2007 - 18:36)

khoudj a écrit :
est ce que qlq aurai une idée plu simple ..??

Plus simple que trois lignes de code CSS, je vois mal comment.
D'ailleurs, le simple fait que ton code fasse trois lignes est peut-être déjà une indication des raisons pour lesquelles ça ne marche pas bien.

Je reprends ton code HTML en apportant une petite correction:

<p>
	<label for="idchamp1">titre du champ 1</lablel>
	<input type="text" name="champ1" id="idchamp1" />
<p>
<p>
	<label for="idchamp2">titre du champ 2</lablel>
	<input type="text" name="champ2" id="idchamp2" />
<p>

Et le CSS qui va bien:

form p {
	overflow: hidden; /* cf. Note 1 */
	width: 100%; /* cf. Note 2 */
}
label {
	float: left;
	width: 180px;
}
input {
	margin-left: 200px;
}

/* Notes:
1. La propriété overflow avec toute autre valeur que "visible" établit
un contexte de formatage, qui empêche le dépassement des flottants.
Fonctionne avec tout navigateur moderne (IE6 et inférieurs non compris).

2. La propriété width avec toute valeur autre que "auto" confère le
"layout" à l'élément dans Internet Explorer Windows. Pour en savoir plus,
voir le concept de HasLayout dans IE Win. Ici, le HasLayout a pour effet
d'empêcher le dépassement des flottants dans IE, ce qui permet d'obtenir
le résultat escompté avec IE 5-6 également. Dans l'idéal, on passera par
un commentaire conditionnel pour attribuer ce correctif à IE 5-6.
*/

Edit: ceci dit, il doit être possible de faire quelque chose d'un peu plus simple pour s'occuper des paragraphes:

form p {clear: left;}

Mais les marges des paragraphes risquent de devenir moins évidentes à gérer, donc je ne conseille pas particulièrement cette solution.
Modifié par Florent V. (02 Aug 2007 - 17:57)

SUPER
j'ai addapté et corrigé les erreurs de frappe et ca roule

merci beaucoup