Mise en page formulaire accessible - Forum Alsacréations : CSS et Standards Web

Auteur
V@lentine	# 22 Sep 2008 - 09:56:56
11 Posts	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° Internet : </label><INPUT TYPE = "text" NAME = "id"></li> <li><label>Votre n° 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 ?
11 Posts
Florent V.	# 22 Sep 2008 - 10:04:32
On va manger des chips. Modérateur 13465 Posts	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) Lisez les specs! Et aussi: Ressources en intégration web (HTML et CSS)
On va manger des chips. Modérateur 13465 Posts
V@lentine	# 22 Sep 2008 - 10:19:27
11 Posts	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 !!
11 Posts
mecho	# 22 Sep 2008 - 11:09:50
118 Posts	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). Modifié par mecho (22 Sep 2008 - 11:15)
118 Posts
Gatsu35	# 23 Sep 2008 - 05:36:24
206 Posts	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)
206 Posts
Prévenir un modérateur

Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles

Nikozen : Hébergement - Réalisation : Alsacreations.fr