28172 sujets

CSS et mise en forme, CSS3

Formulaire de connexion - Label et input

Bonsoir,
J'ai un petit bug avec mon formulaire, tout d'abord voici le code :

		<div id="compte">
			<form method="post" action="#" id="form">
				<div id="login">
					<p><label for="form_user">Nom d'utilisateur : </label><input type="text" name="username" id="form_user" /></p>
					<p><label for="form_pass">Mot de passe : </label><input type="password" name="password" id="form_pass" /></p>
				</div>

				<p><button type="submit" id="submit">Connexion</button></p>

				<div class="clear"></div>

				<div id="login_link">
					<a href="#">Inscription</a> - <a href="#">Mot de passe oublié</a>
				</div>
			</form>
		</div>

Et son CSS associé (ultra-résumé) :

* { margin: 0; padding: 0; border: none; outline: none; }
.clear { clear: both; width: 100%; height: 0; line-height: 0; }

#form #login
{
	color: #b3aa9f;

	float: left;
}
#form #login p label
{
	width: 100px;
	padding-right: 1%;

	float: left;
}
#form #login p input
{
	width: 100px;
	margin-left: 1%;
	border: #27211e 1px solid;
	background-color: #aba297;

	float: right;
}
#form p #submit
{
	background: url(submit.png) no-repeat;
	color: #aba297;
	font-weight: bold;
	width: 86px;
	height: 38px;

	float: right;
}
#form #login_link
{
	font-size: 10px;
	font-weight: bold;		
	color: #aba297;
	text-align: center;
}


Et voici le résultat :
http://img705.imageshack.us/img705/5909/screenj.jpg

Donc les inputs devrait être alignés aux labels donc je comprends pas vraiment..

Merci
Modifié par Mathelec (21 Dec 2011 - 12:52)
Bonjour Mathelec,

Es-ce possible de savoir quelles propriétés css as-tu appliquées à #compte s'il te plaît ?
Pas besoin de faire flotter tes éléments label et input : il suffit de leur appliquer la propriété display avec la valeur inline-block (valeur très bien comprise par IE, y compris IE 6, d'autant plus qu'on l'applique à des éléments de type en ligne) pour bien les aligner et d'utiliser la propriété vertical-align aux élements input.
#form #login p label, #form #login p input {
  width: 100px;
  display: inline-block;
}
#form #login p input {
  vertical-align: middle;
}

Modifié par Victor BRITO (06 Dec 2009 - 15:52)
Pour compte:


#header #compte
{
	background: url(compte.png) no-repeat;

	height: 68px;
	width: 309px;

	margin: 23px;
	padding: 8px;

	float: right;
}
@Victor BRITO : Non ça ne va pas quand je retire le float des label/input, l'input passe sous le label. Même avec le display et le vertical-align (qui ne change rien)
Je voudrais simplement deux lignes :
Label : Input
Label : Input
Et le submit à droite centré verticalement.
Ça à l'air simple mais la je bloque..
Administrateur
Bonjour,

si ça bugue sur Firefox, une page en ligne nous aiderait grandement à constater de nous-même le problème Smiley cligne
Sujet clos
Aller à