[CSS] alignement label/input Résolu/Fermé

Question

Bonjour,

Je suis débutante en programmation, et je suis en train de réaliser un formulaire. Par contre, j'ai des problèmes au niveau du rendu...
Mes labels font parfois plusieurs lignes et mes input (ou select) se retrouvent alors n'importe où. Serait-il possible, via CSS de s'arranger pour que les input/select se trouvent toujours au milieu par rapport au label (voir schéma) ?

--------------------------------
|                                         |
| label1: input1/select1      |
|                                         |
| label2 sur                        |
| plusieurs: input2/select2 |
| lignes                               |
|                                         |
|            | OK |                     |
|--------------------------------

Voici comment j'ai construit mon formulaire:

<form id=monForm action="page2.php" method=POST>
    <fieldset>
   <!-- constrution similaire pour les autres types d'input et les select -->
    <p>
        <label for="form_prenom">Prenom: </label> 
        <input type="text" id="form_prenom" name="prenom" />
    </p>
...

Merci.

Dalida · Accepted Answer

re, je viens de tester, ma solution fonctionne. p { line-height:4em; vertical-align:middle; } par ailleurs les tableaux ne sont pas censés servir à la mise en page et les

sont moins corrects que les .

Olimix · Answer

Salut !
si j'était toi j'enleverai les label et je les remplacerrai par des div , je trouve que c'est carrément plus simple a géréer étant donné quon a pas le PB des label qui prenne 2 lignes .

Dalida · Answer

salut,

à tester :
définir la hauteur de ligne du paragraphe et lui appliquer un alignement vertical (comme input est rendu en ligne il devrait s'aligner mais c'est vraiment pas sûr&hellip;).
p
{
line-heigth:4em;
vertical-align:center;
}

Miloute · Answer

Merci!
Par contre je ne suis pas sûre de bien comprendre... comment puis-je insérer un label si j'enlève la balise ?

Scalpweb · Answer

Voici comment je construit mes formulaires la plupart du temps :

Miloute · Answer

Merci je vais essayer de faire quelque chose avec ça!
Par contre, je croyais que depuis l'apparation des CSS, les tableaux ne devaient pas être utilisé pour faire de la mise en page ?

Miloute · Answer

Merci. Ta solution me semble plus simple à mettre en oeuvre. Je vais déjà essayer cela!

Miloute · Answer

En fait ça ne semble marcher que partiellement, si je change line-height (par exemple 2em), alors l'alignement n'est plus correct. Par ailleurs lorsque mes labels font deux lignes, cela ne semble plus faire d'effet :-?

Miloute · Answer

Le cas échéant, serait-il possible de fixer une hauteur minimale pour un label ?

Scalpweb · Answer

Je sais bien que le W3C déconseille la mise en page en tableau.

Cependant, dans certains cas, il faut bien avouer qu'on gagne du temps à le faire ainsi.

Si non, tu peux reprendre ma première solution et essayer d'ajouter un vertical-align:middle; sur le Div contenant les Input.

Et tu peux aussi très bien reprendre cette solution en changeant la première div par un label mais en lui appliquant le même CSS...

Miloute · Answer

Ce que je voudrais faire, c'et avoir mes labels sur un fond d'une certaine couleur et mes input/select sur le fond normal de ma page.
C'est difficile à expliquer clairement... j'espère que c'est plus ou moins compréhensible...


----------------------------------------
                            MON LABEL.    |  MON INPUT_TEXT, INPUT_RADIO ou SELECT
----------------------------------------
----------------------------------------
                           MON LABEL2.    |  MON INPUT_TEXT, INPUT_RADIO ou SELECT
----------------------------------------
----------------------------------------
                           MON LABEL2.    |
                      qui prend plusieurs |  MON INPUT_TEXT, INPUT_RADIO ou SELECT
                                   LIGNE         |
----------------------------------------

Scalpweb · Answer

Ceci me parait correspondre tout à fait : Nom :

Nom :

Je l'ai copier coller plusieurs fois pour te donner un aperçu.

Dalida · Answer

ce qui mets le bronx pour l'alignement vertical c'est le sur plusieurs lignes. j'ai trouvé une solution qui me parait honnête mais bien évidement IE ne sait pas le traiter. j'ai ajouté des

qui permettent un affichage semblable. il y a des espacements inexpliqués mais en faisant une fausse colonne sur les

ou le

Miloute · Answer

Le problème de cette solution, c'est quelle implique de savoir si le label fera effectivement plusieurs lignes, ce qui peut varier suivant les résolutions, navigateurs, taille de fontes, ...

Scalpweb · Answer

Bon, ben moi je te reconseilles un tableau...

Ce serait déjà fini ;-)

Je fais ce que je peux pour respecter les normes W3C, mais des fois il vaut mieux passer outre.

Miloute · Answer

Je crois que je vais suivre ton conseil Scalpweb... parce que là ce que je fais ça s'apparente plus à du bricolage qu'à autre chose...

Scalpweb · Answer

:-)

Pense à passer ce post en tant que sujet Résolu...

Miloute · Answer

Je fais ça comment?

Scalpweb · Answer

Ba tu réponds, et tu coches "Résolu", en bas de la zone ou tu tapes ton message.

Miloute · Answer

Je n'ai pas de case résolu...

Scalpweb · Answer

Ben en fait je t'avoues que je sais même pas, j'ai jamais commencé de topic... 

Au pire c'est pas bien grave...

[CSS] alignement label/input

21 réponses

Discussions similaires