28212 sujets

CSS et mise en forme, CSS3

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 :
<div id="conteneur"><form method="post" action="index.php?page=login&amp;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)
Plop,

Il faudrait que tu centres ton élément form plutôt que son contenu.

Tu devrais pouvoir arriver au résulat que tu souhaites. Sinon une petite démo en ligne du résultat actuel, ne serait pas de trop.
Modifié par tyx (20 Feb 2006 - 12:13)
Le problème c'est justement de centrer ce form.
Centrer un <div> y a pas de prob, mais centrer mon formulaire, ça veut pas.
J'ai essaié un changeant le type de display de mon form(block et inline), mais ça change rien. Impossible de faire comme si c'était un <div>.

Pour afficher le résultat ça risque d'être dur car je développe en local, et même si il y a moyen de te donner l'adresse, je dipose d'une connexion relativement faible et déjà surchargée (15ko/s en upload, partagé sur 3 PCs, et avec un serveur Subversion déjà pas mal sollicité par plusieurs développeurs).

Donc ma question serait : Comment centrer un élément form dans un div ?
De plus, mes label dans mon form ont la proprieté float:left;
Il me semble qu'ils se placent par rapport au <div> conteneur du form, plutôt qu'au form. Il faudrait que ces labels suivent et se placent à gauche de mon form qui lui devrait être centré.


PS : tu es le bloggeur de headshok ? Si c'est le cas, merci d'avoir écrit un billet sur mon article "Pourquoi utiliser Java ?" Smiley cligne
Modifié par Info-Rital (20 Feb 2006 - 14:03)
Techniquement avec le lien que j'ai donné plus haut, ca ne devrait pas poser de problèmes. Tu définis une largeur à ton form et tu lui appliques un margin: auto ;

Mais si tu es l'auteur de l'article "Pourquoi utiliser Java?" je vais faire un effort dès mon retour à la maison Smiley langue
tyx a écrit :
Tu définis une largeur à ton form

Ah voilà : Smiley biggrin ! Je l'avais complètement oublié celui là. J'avais oublié qu'il fallait spécifier une largeur avant pour pouvoir utiliser les margin:auto;

Enfin bon maintenant ça marche impec, merci beaucoup pour ton aide Smiley smile .