28173 sujets

CSS et mise en forme, CSS3

Formulaire, positionnement des zones de saisie

Bonjour à tous,

tout d'abord merci à tous ceux qui contribuent de prêt ou de loin à ce site.
Il m'aide énormément...

Voila:
Je voudrai faire un formulaire permettant de s'identifier.
Dans celui ci je voudrai que les <input> soient alignés à 10 pixels du bord droit du cadre formulaire.
Mais comme vous le pouvez le voir les <input> sont bien à droite mais plus haut que les labels.
Après plusieurs recherches sur les différents sites et le livre CSS2 je n'arrive pas à régler ce problème.

Pouvez-vous m'aider ?

Je vous donne le code html et css que j'ai employé.
Comme je débute en css, dite moi si je m'en sort bien ou si ma philosophie n'est pas la bonne.


<div id="ident">
			<h2>Identification</h2>
				
			<form method=post action="script.php">
				
				<p><label for="email">Email</label><input type="text" name="email" id="email" value="" size="20" /></p>
				<P><label for="mdp">Mot de passe</label><input type="text" name="mdp" id="mdp" value="" size="15" /></p>
				<p><input id="envoyer" type="submit" name="envoyer" value="Envoyer" /></p>
			
			</form>
			
			<p id="fin"><a href="#">J'ai oublié mon mot de passe</a></p>
		</div>





body {
background-color: #8e7c89;
}

#page {
	width: 900px;
	margin-left: auto;
  margin-right: auto;
  padding: 30px;
  
  background-color: #cfc3d5;
  }
  
#logo img{
background-color: #cfc3d5;
width: 40%;
}

#present {
width: 15em;
/*background-color: #6d8cd5;*/
}

#ident {
	
	font-family: verdana;
	width: 250px;
	margin: 0px;
	padding: 0px;
}
	#ident h2 {
		height: 20px;
		margin: 0;
		background: url(images/surligne/6d8cd5.png) no-repeat;
		text-indent: -9000px;
	}

	#ident form {
		
		margin: 0;
		padding: 10px;
		background-color : #ebf0ff;
		line-height: 2em;
	}
	
	#ident p {
		position: relative;
		width: 100%;
		background: blue;
	}
	
	#ident label {
		padding: 0;
		font-family: verdana;
		font-size: small;
		color: black;
		background: yellow;
		
	}

	#ident input {
		position: absolute;
		right: 10px;
		vertical-align: middle;
		color: green;
		
	}
	
	#ident #fin {
		height: 20px;
		margin-bottom: 0;
		margin-top: 0;
		background: url(images/surligne/bas.png) no-repeat;
		color: blue;
		text-align: center;
		font-size: x-small;
	}
#contenu {
}


Par avance, merci pour votre aide.
(certaine couleurs sont arbitraire afin de se rendre compte du résultat)

upload/9320-Image1.jpg
Modifié par OlivierF (05 Nov 2006 - 22:20)
Salut,
a écrit :
...que les <input> soient alignés à 10 pixels du bord...

Si tu veux faire un formulaire xhtml, tu vas galérer pour placer tout au pixel près sur tous les navigateurs...

Pour le soucis de décalage, aurai-tu s'il te plait, un exemple en ligne ?
Modifié par Ralfman68 (05 Nov 2006 - 23:02)
Merci de ta réponde Ralfman68.

Les 10 pixels ne sont pas impératifs.

C'est juste que je veux que les champs <input> soient tous alignés à une certaine distance du bord droit du cadre.

Je n'ai pas d'exemple en ligne.
Modérateur
bonsoir ,

peut-etre suffit-il de les positionné en flottants en leur donnant une marge , ou de donné une taille aux label et input explicite en largeurs, ou , ...
as tu cherché de ces cotés ?

++


<edit>
ou d'autres pistes moins classiques :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>HTML 4.01 </title><style type='text/css'>
body {
	background-color: #8e7c89;
}
#ident {
	font-family: verdana;width: 250px;
	margin: 0px;padding: 0px;
}
#ident h2 {
	height: 20px;	margin: 0;
	background: url(images/surligne/6d8cd5.png) no-repeat;	text-indent: -9000px;
}
#ident form {
	margin: 0;padding: 10px;
	background-color : #ebf0ff;
	width: 100%;
	}
#ident p {
	display:table;
	width: 100%;
	background: blue;
}
#ident label {
	padding: 0;
	font-family: verdana;
	color: black;font-size:small;
	background: yellow;
	display:table-cell;
	_display:inline-block;
	width:100px;
	padding-right:1%;
	text-align:right;
	vertical-align: middle;
}
#ident input {
	width:130px;
	display:inline-block;
	vertical-align: middle;
	color: green;
	line-height:1em;
	}
#ident #fin {
	height: 20px;
	margin-bottom: 0;
	margin-top: 0;
	background: url(images/surligne/bas.png) no-repeat;
	color: blue;
	text-align: center;
	font-size: x-small;
	}
#envoyer {
	float:right;
	margin-right:12px;
}
</style>
</head>
<body>
<div id="ident">
			<h2>Identification</h2>
	<form method=post action="script.php">
		<p>
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="" size="20" >

		</p>
		<p>
		<label for="mdp">Mot de passe</label>
		<input type="text" name="mdp" id="mdp" value="" size="15" >
		</p>
		<p>
		<input id="envoyer" type="submit" name="envoyer" value="Envoyer" >
		</p>

	</form>

	<p id="fin"><a href="#">J'ai oublié mon mot de passe</a></p>

</div>
</body>
</html>


++
Modifié par gcyrillus (05 Nov 2006 - 23:51)
bonjour,
comment peut-on faire pour créer un test de remplissage de formulaire en ligne ?
ex : pour etre sur que dans la ligne de téléphone et fax il n'y a que des chiffres.

merci d'avance
Salut jum.

Tester le remplissage des formulaires peut se faire en javascript ou en PHP (avec, pour ma part, une nette préférence pour le PHP). Cette question ne concerne pas directement les standards, tu trouveras plus facilement des pistes sur des forums dédiés au php, par exemple.

Par contre, une fois que tu sauras comment faire, au niveau technique, un petit détour par le salon "accessibilité", voire "ergonomie" pour s'assurer du bon comportement de ton formulaire sera intéressant.
Sujet clos
Aller à