Bonjour

Je veux mettre en page un formulaire avec a gauche des objets label qui contiennent quelques mots sur les "input" qui sont eux alignés plus a droite sur la page.

Ces INPUT doivent êtres à la fois sur la même ligne que leur label, et alignés avec les autres INPUT de façon a ce que ça soit joli.(et cohérent avec le reste du programme qui est fait surtout à base de tableau)

Pour l'instant, j'avais mis ce genre de code HTML :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
<label>Adresse mail :</label>
<input id="login" class="FormClasse" type="text" value="pierre.bonneau" onchange="verifFormMail()" name="login"/>
<br/>
<label>Mot de passe :</label>
<input id="mdp" class="FormClasse" type="password" value="medipbo" onchange="verifFormMail()" name="mdp"/>
Avec ces attributs CSS
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
label{
	position:absolute;
	margin-left:5%;
	margin-right:50%;
}
input.FormClasse{
	margin-left:50%;
	line-height:1.4em;
	margin-bottom:.2em;
	/*width:150px;*/
}
Sous Firefox, pas de problème a priori (sauf que pour rester sur la même ligne ça marche pas et ça se chevauche)
Sous IE, j'ai un comportement bizarre.

Lorsque je défini ma margin-left à 50%, elle se met à 50% du div quand le champ INPUT (ou SELECT) n'a pas de taille définie, mais à 50% de sa propre taille lorsque je définie le width.

Moralité, j'y comprend pas grand chose, donc je me demandais si vous aviez rencontré c genre de problème. Je suis bien sur ouvert à toute autre façon de faire pour atteindre mon résultat.

Merci
Pierre

PS : je précise que je ne peux utiliser la solution de la FAQ, ne sachant pas la taille que vont faire mes DIV(fenêtres re-dimensionnables MOOTOOLS)