Mise en page formulaire accessible

Bonjour,

Je souhaite positionner un petit formulaire sans utiliser de tableau, et aligner les champs de saisie en jouant sur la taille des éléments (LABEL notamment). Mais la taille n'est pas prise en compte.
Voici le code html :

    <FORM ACTION = "paimentFr.php" METHOD = "POST">
	<ul class="form">
	<li><label>Votre n&deg; Internet : </label><INPUT TYPE = "text" NAME = "id"></li>
	<li><label>Votre n&deg; de facture : </label><INPUT TYPE = "text" NAME = "fac"></li>
	<li><label>Votre courriel :</label><INPUT TYPE = "text" NAME = "email"></li>
	<li><input type="submit" value="Envoyer" alt="Envoyer">
	</li>
</ul>
    </FORM>

Et celui de la CSS (j'ai encadré le LABEL en noir pour vérifier mon résultat):

ul.form {
	float:left;
	margin-left :0;
}
ul.form li {
	display: block;
	height: 30px;	
	padding-left: 50px;
	}
label {
	width: 150px;
	color: #21538f;
	font-size: 0.8em;
	font-variant: small-caps;
	border: 1px solid Black;
}
ul.form input {
	font-family: "Trebuchet MS", helvetica, sans-serif;
	color: #21538f;
	background-color: White;
	border: #21538f;
}

La police et les couleurs se font, mais pas le "width" (j'ai essayé jusque 300px pour voir ! J'ai même essayé sans le float:left de ul.form)
Y a-t-il une autre solution ?

Bonjour,

Le width ne prend pas car les éléments label sont des éléments de type en-ligne, et non pas de type bloc. Tu peux les passer en display: block mais dans ce cas les champs que tu veux placer à droite passeront à la ligne. Tu peux aussi utiliser display: inline-block, qui pour un élément LABEL devrait être pris en compte par tous les navigateurs sauf les anciennes versions de Firefox (dont Firefox 2).

Enfin, en général on utilise la propriété float pour placer les labels à gauche.
Modifié par Florent V. (22 Sep 2008 - 16:30)

Merci Florent, le display : inline-block fonctionne a merveille.

Je viens de découvrir autre chose de rigolo, dans mon div de contenu qui a la propriété overflow: auto. Le texte défile (p, ul, li) mais pas les liens !!

Bonjour,

a écrit :
Le width ne prend pas car les éléments label sont des éléments de type bloc.

Florent, tu voulais sans nul doute dire : ... les éléments label sont des éléments de type en-ligne (inline).
Modifié par mecho (22 Sep 2008 - 11:15)

mecho a écrit :
Bonjour,

Le width ne prend pas car les éléments label sont des éléments de type bloc.

Florent, tu voulais sans nul doute dire : ... les éléments label sont des éléments de type en-ligne (inline).
Ah mon avis, il a du se faire fouetter par les autres modérateurs pour cette faute grave
Modifié par Gatsu35 (23 Sep 2008 - 05:36)