[Résolu]Formulaire inline block, label

Bonjour,
suite à l'article paru sur alsacréation[s] j'ai souhaité respecter le system du label associé à l'input. Avec l'aide du display:inline-block cela semblait facile et me permettait de virer mes facheux tableaux...

Seulement, je souhaite avoir un label suivi d'un input et... de quelques mots: or les quelques mots qui suivbent le input viennent pertuber la mise en page en créant un décallage (vers la gauche). Du coup mon formulaire n'est pas aligné verticalement dés lors qu'une des lignes contient une phrase apres le input: Je ne vois pas trop comment procéder pour remedier à cela.

Mon CSS:

.inline{display:inline-block;
	width: 230px; 
    margin-right: 20px;  
    text-align: right; }
span{font-size:x-small; margin-left:5px;}
.inscri input[type=text], .inscri input[type=password]{background-color:#f8f8f8;padding:5px;border: solid #ccc 1px;border-radius: 3px;}

La partie HTML en question:

<legend><strong>INFORMATIONS PERSONELLES</strong></legend>
					<p><label class="inline" for="nom"><b class="red">*</b>Nom: </label><input type="text" size="20" id="nom" name="nom" value="'.$nom.'" /></p>
					<p><label class="inline" for="prenom"><b class="red">*</b>Prenom: </label><input type="text" size="20" id="prenom" name="prenom" value="'.$prenom.'" /></p>
					<p><label class="inline" for="naissance"><b class="red">*</b>Date de Naissance: </label><input type="text" size="12" id="naissance" name="naissance" value="'.$naissance.'"  /><span>JJ/MM/AAAA</span></p>
					

D'avance merci pour vos réponses.
Modifié par youki (26 Jun 2011 - 23:00)

Bonsoir,

je ne vois pas trop ou est ton probleme ?

retour a la ligne ? : imposé une largeur minimale a form ou le conteneur parent/principal

la troisieme ligne est trop longue ? : augmenter le size des deux premeirs input a 25 par exemple

autre ? : pas vu ou pas saisi ce qui te chagrine.

Cordialement,
GC

Disons que, mon souci c'est que c'est laid:
chemin vers un exemple du projet:

aeroclub.dinan.free.fr/test.php

PS: la largeur en cours de la div centrale n'est pas la largeur finale du projet

Perso, avant je faisais trois div en colonne (ou des tableaux) pour mettre en page ce truc.
Mais je ne vois pas comment hiérarchiser l'ensemble label+input+phrase à l’intérieur de la balise <p> (qui semble vouloir centrer le tout).

Bonjour,

tu essaies de centrer (text-align: center;) des lignes de largeur variable (avec ou sans span) et tu voudrais que les bords gauche soient alignés ?
Annule cet alignement par text-align: left; et ajoute une marge à gauche sur tous les paragraphes dans un fieldset : les parties gauche de tes paragraphes étant de largeur fixe, elles seront alignées, ce qui est ce que tu recherches.

text-align est une propriété qui s'hérite de body sur tous les éléments enfants centrables, donc de type bloc, regarde avec Firebug.

Notes: tu devrais indiquer "*obligatoire" AVANT le premier élément de formulaire, pas à la fin quand tu as fini de remplir les infos (est-ce qu'on te dit de sortir les volets au moment d'arrondir ou bien es-tu au courant un peu avant ? ). Et avec une vraie phrase genre "Les éléments marqués d'une * sont obligatoires".
Idem pour l'étape 1 sur 4 : mieux vaut le savoir avant de démarrer et tu peux rappeler cette info en bas en intitulant le bouton "passer à l'étape 2".
Et il faut déjà avoir une licence pour s'inscrire au club ? Y a pas d'instructeur pour justement l'obtenir dans votre club ?

Nickel, c'est si basique... Bref, merci Felipe.
Effectivement en attribuant un simple:

text-align:left;

au conteneur de mon formulaire et en réglant les marges tout redeviens propre.

a écrit :
Notes: tu devrais indiquer "*obligatoire" AVANT le premier élément de formulaire, pas à la fin quand tu as fini de remplir les infos (est-ce qu'on te dit de sortir les volets au moment d'arrondir ou bien es-tu au courant un peu avant ? rolleyes ). Et avec une vraie phrase genre "Les éléments marqués d'une * sont obligatoires".

+1: C'est modifié.

a écrit :
Et avec une vraie phrase genre "Les éléments marqués d'une * sont obligatoires".
Idem pour l'étape 1 sur 4 : mieux vaut le savoir avant de démarrer et tu peux rappeler cette info en bas en intitulant le bouton "passer à l'étape 2".

+0.5: Ouais pas faux, je vais faire la modif aussi.

a écrit :
Et il faut déjà avoir une licence pour s'inscrire au club ? Y a pas d'instructeur pour justement l'obtenir dans votre club ?

Yep: cette page se trouvera dans la partie membres -> pour enfin créer une base numérique complète des membres du club, à l'heure actuelle il n'existe aucun document numérique réunissant les infos des membres... (certains champs du formulaire seront bien entendu pre rempli via les infos de leur profil internet)

Merci bien pour vos précisions et votre sens critique affuté: signature du forum alsacréation[s]