"Label" dans un formulaire et mise en forme

Bonjour tout le monde !!

J'ai lu pas mal de choses sur le sujet, mais l'affiche ne s'affiche pas bien, je pense que je suis tout prêt du but, mais il doit en manquer quelque chose.

Donc, dans mon formulaire, j'ai ceci (j'ai pas tout mis sinon c'est trop long, mais je pense que juste avec ça vous pouvez m'aider, sinon je met le code entiers), le formulaire est généré par un plugin de wordpress, d'ou certains intitulés étranges :

<label for="Name">Name :</label> <span class="wpcf7-form-control-wrap Name"><input name="Name" value="" class="wpcf7-validates-as-required champs-simple" size="40" type="text"></span>[#orange]<br>[/#]
<label for="Adress">Adress :</label> <span class="wpcf7-form-control-wrap Adress"><input name="Adress" value="" class="wpcf7-validates-as-required champs-simple" size="40" type="text"></span>[#orange]<br>[/#]

Mon CSS contient ceci :

label {
padding: 0px 0px 0px 0px;
width:180px;
display:block;
float:left;
text-align:middle;
vertical-align:middle;
}

L'idée est d'aligner le formulaire en laissant de la place entre le nom des champs et les zones de saisies. Du coup, ça c'est bon, mais le problème est qu'il n'y a pas d'espace entre les zones de saisies, elles sont collées entre elles.

Si je rajoute les <br> en orange, et bien il y a trop d'espace...

Pouvez vous m'aider ? Merci à tous !

Lilianne !
Modifié par Lilianne (09 Jun 2010 - 20:55)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Bonjour!

Merci pour l'accueil, j'ai mis les balises comme vous me l'avez dit, je suis désolée de ne pas l'avoir fait du premier coup.

Oui oui j'ai fait pleins de recherches sur le forum, et meme sur le net, mais n'étant pas développeuse j'ai surement utilisé les mauvais termes pour ma recherche ?

Quoi qu'il en soit, si vous avez la solution, vous ou quelqu'un d'autre... merci !

Bonjour,

Si tu as la main sur le code généré par Wordpress, tu peux "wrapper" ton label + input dans un <div>, et appliquer un margin-bottom à ce div. Par exemple :

<div class="input">
<label for="Name">Name :</label> <span class="wpcf7-form-control-wrap Name"><input name="Name" value="" class="wpcf7-validates-as-required champs-simple" size="40" type="text"></span>
</div>
<div class="input">
<label for="Adress">Adress :</label> <span class="wpcf7-form-control-wrap Adress"><input name="Adress" value="" class="wpcf7-validates-as-required champs-simple" size="40" type="text"></span>
</div>

et donc dans le css

div.input {
margin-bottom:10px;
}

Bonjour,

Merci de m'avoir répondu, c'est très gentil !

ça marche effectivement (mais je peux pas toucher à)

[code]<span class="wpcf7-form-control-wrap Name"><input name="Name" value="" class="wpcf7-validates-as-required champs-simple" size="40" type="text"></span>[code]

mais sinon avec les div c'est super, mais ça charge un peu le code ... il y a un autre solution ?

Mais sinon sa marche super merci beaucoup, si je trouve rien d'autre je l'utilise : mais je trouve que ça charge un peu le formulaire. ^^

Merci bcp ! Bonne soirée !