Bonjour,
J'ai un formulaire dont je me suis inspiré de http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml pour le réaliser.
En faite c'est surtout l'histoire de l'alignement des labels et des inputs sans avoir recous à des CSS. Ça fonctionne très bien si je laisse le formulaire sur la gauche (normal, à cause du float:left;, obligé il me semble).
Si j'enleve le display:block et le float:left , mon formulaire est bien centré mais plus rien n'est aligné.
Si je les laisse, les input sont bien centrés mais les labels restent sur la gauche.
Moi j'aimerai que tous soit centré, mais bien aligné.
Pour l'instant j'arrive à obtenir l'un ou l'autre mais pas les deux en même temps.
Voilà le code du formulaire :
Et voilà le code CSS de ce formulaire.
Merci d'avance pour vos réponses.
Modifié par Info-Rital (20 Feb 2006 - 21:32)
J'ai un formulaire dont je me suis inspiré de http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml pour le réaliser.
En faite c'est surtout l'histoire de l'alignement des labels et des inputs sans avoir recous à des CSS. Ça fonctionne très bien si je laisse le formulaire sur la gauche (normal, à cause du float:left;, obligé il me semble).
Si j'enleve le display:block et le float:left , mon formulaire est bien centré mais plus rien n'est aligné.
Si je les laisse, les input sont bien centrés mais les labels restent sur la gauche.
Moi j'aimerai que tous soit centré, mais bien aligné.
Pour l'instant j'arrive à obtenir l'un ou l'autre mais pas les deux en même temps.
Voilà le code du formulaire :
<div id="conteneur"><form method="post" action="index.php?page=login&a=connect">
<p><label for="pseudo">Pseudo</label> <input name="pseudo" id="pseudo" type="text"></p>
<p><label for="pass">Password</label> <input name="pass" id="pass" type="password"></p><p>
</p><p><input name="submit" class="submit" value="Connexion" type="submit"></p>
</form></div>
Et voilà le code CSS de ce formulaire.
#conteneur {
text-align: center;
}
#center .submit {
margin-top : 10px;
background: orange;
margin-left: 6.5em;
padding-left: 0;
width: 8em;
}
#center label
{
width: 6em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block
}
#center input {
background: orange;
padding-left: 3px;
font-weight: bold;
width: 9em;
}
Merci d'avance pour vos réponses.
Modifié par Info-Rital (20 Feb 2006 - 21:32)