rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Résolu

[CSS] alignement label/input

Posté par Miloute, le mardi 5 février 2008 à 10:20:23
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.
Configuration: Linux
Epiphany 2.20
Répondre à Miloute  Signaler ce message aux modérateurs Aller au dernier message
23 réponses 12

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Olimix, le mardi 5 février 2008 à 10:24:11
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 .
   
Répondre à Olimix

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le mardi 5 février 2008 à 10:31:15
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…). 
p
{
line-heigth:4em;
vertical-align:center;
}

[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.
   
Répondre à Dalida

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Miloute, le mardi 5 février 2008 à 10:32:34
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 ?
   
Répondre à Miloute

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Scalpweb, le mardi 5 février 2008 à 10:34:11
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à,
@+
   
Répondre à Scalpweb

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Miloute, le mardi 5 février 2008 à 10:46:14
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 ?
   
Répondre à Miloute

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le mardi 5 février 2008 à 10:46:29
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 <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 à Dalida

7


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Miloute, le mardi 5 février 2008 à 10:48:09
Merci. Ta solution me semble plus simple à mettre en oeuvre. Je vais déjà essayer cela!
   
Répondre à Miloute

8


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Miloute, le mardi 5 février 2008 à 10:56:28
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 :-?
   
Répondre à Miloute

9


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Miloute, le mardi 5 février 2008 à 11:02:42
Le cas échéant, serait-il possible de fixer une hauteur minimale pour un label ?
   
Répondre à Miloute

11


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le mardi 5 février 2008 à 11:29:02
oui, il existe la propriété {min-height} mais bien évidement elle n'est pas appliquée par IE…

je ne comprends pas bien ce que tu veux mais pense que tu peux aussi jouer sur la structure HTML en mettant le <input> à l'intérieur ou à la suite de <label>, ce qui donne un comportement différent pour le rendu. 
<p>
	<label>
		<input />
	</label>
</p>
<!-- ou -->
<p>
	<label></label>
	<input />
</p>


[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.
   
Répondre à Dalida

10


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Scalpweb, le mardi 5 février 2008 à 11:07:52
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...
   
Répondre à Scalpweb

12


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Miloute, le mardi 5 février 2008 à 12:44:05
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         |
----------------------------------------
   
Répondre à Miloute

13


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Scalpweb, le mardi 5 février 2008 à 13:38:02
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.
   
Répondre à Scalpweb

14


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le mardi 5 février 2008 à 14:23:47
ce qui mets le bronx pour l'alignement vertical c'est le <input> 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 <div> qui permettent un affichage semblable. il y a des espacements inexpliqués mais en faisant une fausse colonne sur les <div> ou le <form> ça doit pouvoir se masquer.

[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.
   
Répondre à Dalida

15


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Miloute, le mardi 5 février 2008 à 14:59:55
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, ...
   
Répondre à Miloute

16


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Scalpweb, le mardi 5 février 2008 à 15:01:49
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.
   
Répondre à Scalpweb

17


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Miloute, le mardi 5 février 2008 à 15:11:00
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...
   
Répondre à Miloute

18


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Scalpweb, le mardi 5 février 2008 à 15:12:04
:-)

Pense à passer ce post en tant que sujet Résolu...
   
Répondre à Scalpweb

19


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Miloute, le mardi 5 février 2008 à 16:29:20
Je fais ça comment?
   
Répondre à Miloute

20


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Scalpweb, le mardi 5 février 2008 à 16:30:21
Ba tu réponds, et tu coches "Résolu", en bas de la zone ou tu tapes ton message.
   
Répondre à Scalpweb
23 réponses 12Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger Satellite Antenna Alignment 2.50.0Satellite Antenna Alignment - Satellite Antenna Alignment est un programme utilisé pour calculer l'angle nécessaire pour l'installation d'un récepteur...Catégorie: Environnement de travail
Licence: Freeware/gratuit
Télécharger Web Developer Toolbar 1.1.6Web Developer Toolbar - WebDeveloper est une extension firefox représentant une formidable boîte à outils pour examiner et manipuler les pages...Catégorie: Extensions Firefox
Licence: Freeware/gratuit
Télécharger Amaya 9.54Amaya - Amaya est un éditeur Web, développé conjointement par l'INRIA et le W3C, pour éditer et publier très simplement des pages...Catégorie: Editeurs HTML
Licence: Open Source
Télécharger Firstpage 2006Firstpage - First Page 2006 est un éditeur html gratuit et excellent. Il permet de travailler un code HTML en couleur, ainsi que de...Catégorie: Editeurs HTML
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « [CSS] alignement label/input »