|
|
|
|
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 | | |--------------------------------
<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>
...
Configuration: Linux Epiphany 2.20
Salut,
p
{
line-heigth:4em;
vertical-align:center;
}
[ Mathieu ] « On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007. |
Voici comment je construit mes formulaires la plupart du temps :
<form id=monForm action="page2.php" method=POST> <div> <div style="float: left;">Prenom :</div> <div style="padding-left: 150px;"><input type="text" id="form_prenom" name="prenom" /></div> <div style="float: left;">Nom :</div> <div style="padding-left: 150px;"><input type="text" id="form_nom" name="nom" /></div> </div> A toi ensuite de modifier le 150px par la valeur qui convient. Une autre technique consiste à mettre le tout dans des tableaux, c'est très pratiques : <table><tbody> <tr> <td style="width: 160px;">Nom:</td> <td valign="top"> <input type="text" id="form_nom" name="nom" /> </td> </tr> <tr> <td style="width: 160px;">Prenom :</td> <td valign="top"> input type="text" id="form_prenom" name="prenom" /> </td> </tr> </tbody></table> Là, il te suffit de modifier le valign="top" en valign="middle" si tu le désires. Voilà, @+ |
Re,
p
{
line-height:4em;
vertical-align:middle;
}
par ailleurs les tableaux ne sont pas censés servir à la mise en page et les <div> sont moins corrects que les <label>. [ Mathieu ] « On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007. |
Répondre à Miloute
|
Je sais bien que le W3C déconseille la mise en page en tableau.
|
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.
----------------------------------------
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 |
----------------------------------------
|
Ceci me parait correspondre tout à fait :
<label for="nom" style="background: red; float: left;">Nom : </label> <div ><input type="text" name="nom" /></div> <label for="nom" style="background: red; float: left;">Nom : </label> <div ><input type="text" name="nom" /></div> <label for="nom" style="background: red; float: left;">Nom : </label> <div ><input type="text" name="nom" /></div> <label for="nom" style="background: red; float: left;">Nom : </label> <div ><input type="text" name="nom" /></div> Je l'ai copier coller plusieurs fois pour te donner un aperçu. |
Ce qui mets le bronx pour l'alignement vertical c'est le <input> sur plusieurs lignes.
|
Alignement texte label vb Aligner du text et un input Aligner image css Balise css Css aligner un champ text a gauche Css align center Css aligne float Css alignement vertical div Css aligner 2 blocs dans div ie Css aligner en bas Css aligner une image à gauche Css ie alignement Css input Css majuscule Css propriétés input text Css taille image Css vertical-align center Deux block aligner css