decalage dans une form [Résolu]

[k_boy]

salut
je veut crée deux champ de saisie (login et password), mais j'ai un problème dans le positionnement des champs labels et le champ de saisie.(je veux que chaque label soit prêt du champ de saisie)
CODE HTML

Code :

1
2
3
4
5
6
7
 
<form action=""> 
 
<label>Logon:</label> <input type="text" class="input" /> 
<label>Password: </label> <input type="password" class="input" />     
<label>&nbsp; </label> <input type="submit" value="Submit" class="button" /> 
</form>

CODE CSS

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
.input { 
    border: 1px solid #006; 
    background: #ffc; 
} 
 
 
.input:hover { 
    border: 1px solid #f00; 
    background: #ABC8E2; 
} 
 
 
label { 
 
    width: 150px; 
    float: left; 
    margin: 2px 4px 6px 4px; 
    text-align: middle; 
}

et l'image(pièce jointe) montre le décalage entre les champs de saisie et les LABELS.

[ornitho13]

Si tu veux que le "label" suive le "input", il faut mettre chaque couple "label"/"input" dans un div :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
<form action=""> 
    <div class="formItem"> 
		<label>Logon:</label> <input type="text" class="input" />
	</div>
	<div class="formItem">
		<label>Password: </label> <input type="password" class="input" />
	</div>
	<div class="formItem">     
		<label>&nbsp; </label> <input type="submit" value="Submit" class="button" />
	</div> 
</form>

et tu appliques un float:left sur ces div :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
.input { 
    border: 1px solid #006; 
    background: #ffc; 
} 
 
 
.input:hover { 
    border: 1px solid #f00; 
    background: #ABC8E2; 
} 
 
 
label { 
 
    width: 150px; 
    float: left; 
    margin: 2px 4px 6px 4px; 
    text-align: middle; 
}
.formItem{
	float:left;
}

[.3615]

Bonsoir k_boy,

Si tu positionnes tes label en float:left, ils sortent du flux et sont positionnés à gauche comme sur ton image.

Retire cette ligne ou commente la et tu verras la différence.

-- edit --
Grillé par ornitho13, mais le lien reste utile

[k_boy]

vous pouvez me dire quelle symbole utiliser pour le commentaire dans fichier CSS (je sais que dans un fichier HTML en utilise <!-- - ->).

[k_boy]

s'était très facile..... lol

Code :

/* commentaire */