CSS : alignement des champs de formulaire

CSS : alignement des champs de formulaire - HTML/CSS - Programmation

Marsh Posté le 01-07-2005 à 11:46:21    

Bonjour
 
dans un formulaire, j'ai des champs tout bêtes, genre (pour faire simple) :
 

Code :
  1. <label>Nom :<input /></label>
  2. <label>Prenom : <input /></label>


 
et je veux que le résultat soit comme :
 

Code :
  1. <table>
  2.   <tr>
  3.     <td align="right">Nom :</td>
  4.     <td><input /></td>
  5.   </tr>
  6.   <tr>
  7.     <td align="right">Prenom :</td>
  8.     <td><input /></td>
  9.   </tr>
  10. </table>


 
En gros, que ce soient les champs qui sont alignés et pas les labels.
 
Comment puis-je faire ?
Merci !


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le 01-07-2005 à 11:46:21   

Reply

Marsh Posté le 01-07-2005 à 11:48:39    

Au lieu d'imbriquer libellé et contrôle dans un label, sépare-les :

<label for="pouet">Truc</label><input id="pouet" />

Reply

Marsh Posté le 01-07-2005 à 11:50:55    

Tu peux faire un truc du genre :


<p><label>Nom :</label><input /></p>
<p><label>Prenom : </label><input /></p>


Et dans le css :


label {
float: left;
text-align: right;
}
 
input {
float: right;
text-align: left;
}
 
p {
clear: both;
}


... et en jouant sur la longueur de tes élements html (p, label surtout)


Message édité par multani le 01-07-2005 à 11:51:35
Reply

Marsh Posté le 01-07-2005 à 11:53:04    

T'as oublié les attributs for et id :o

Reply

Marsh Posté le 01-07-2005 à 11:53:06    

okay, je croyais que les labels c'était forcément imbriqué avec les inputs (je me suis pas vraiment penché sur la question, certes).
 
mairci, je vais tester ça.
Ca devient tout de suite vachement plus facile [:dawa]


---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le 01-07-2005 à 11:54:21    

FlorentG a écrit :

T'as oublié les attributs for et id :o


+1 [:benou]

Reply

Marsh Posté le 01-07-2005 à 12:12:24    

bon, c'est malin, maintenant mon submit il est tout aligné à droite.
Comment je fais pour le centrer ?
 
j'ai essayé de lui coller une classe :
 

.centre {
 float: none;
 text-align: center;
 margin-left: auto;
 margin-right: auto;
}


 
mais ça change rien :'(


Message édité par cosmoschtroumpf le 01-07-2005 à 12:13:14

---------------
Android/Manettes/Metroidvania/Zelda/Indés/Retrogaming/VDS jeux
Reply

Marsh Posté le 01-07-2005 à 12:16:16    

cosmoschtroumpf a écrit :

bon, c'est malin, maintenant mon submit il est tout aligné à droite.
Comment je fais pour le centrer ?
 
j'ai essayé de lui coller une classe :
 

.centre {
 float: none;
 text-align: center;
 margin-left: auto;
 margin-right: auto;
}


 
mais ça change rien :'(


use Dom Inspector luke :o

Reply

Marsh Posté le 01-07-2005 à 12:23:41    

multani a écrit :

Tu peux faire un truc du genre :


<p><label>Nom :</label><input /></p>
<p><label>Prenom : </label><input /></p>


Et dans le css :


label {
float: left;
text-align: right;
}
 
input {
float: right;
text-align: left;
}
 
p {
clear: both;
}


... et en jouant sur la longueur de tes élements html (p, label surtout)


faut pas mettre de <p>, ça sert à rien, et dans un formulaire on met des fieldsets, ça poutre largement plus :o


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 01-07-2005 à 12:28:01    

masklinn a écrit :

faut pas mettre de <p>, ça sert à rien, et dans un formulaire on met des fieldsets, ça poutre largement plus :o


Ouais, enfin, c'était pour l'exemple quoi :o

Reply

Marsh Posté le 01-07-2005 à 12:28:01   

Reply

Marsh Posté le 01-07-2005 à 12:39:21    

Reply

Marsh Posté le 01-07-2005 à 13:53:11    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed