Centrer mon formulaire html avec css

Fermé
stefanelle - 4 déc. 2008 à 00:14
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 - 4 déc. 2008 à 05:21
Bonjour,



Voila j ai creer un formulaire en html avec mise en forme css tout est nickel (couleurs, polices ...) sauf le centrage des mes blocs textes et images tout est a gauche j ai tente de mettre des valeurs avec margin, width mais rien n'y fait avez vous une idée ? voila mon fichier css pour plus dinfos merci beaucoup

#global {
position: absolute; /* on positionne le conteneur */
margin-left: auto;
margin-right: auto;
width: ...;
text-align: left;
}

p.titre {
background:#0AA6E1;
padding:.2em .3em;
font-size:1.2em;
border:2px outset #DED983;
position:relative;
margin-bottom:-1em;
width:10em;
margin-left:1em;
margin-top:1em;
}

fieldset {
border:none;
margin-bottom:1em;
width:24em;
padding-top:1.5em;
}

select {
margin-left:9em;
margin-bottom:0;
}

/* fieldset coordonnees */
fieldset#coordonnees {
background:#0AA6E1;
border:outset #0AA6E1;
}

#coordonnees label {

position:absolute;
font-size:90%;
padding-top:.2em;
left:20px;
}

#coordonnees input {
margin-left:9em;
line-height:1.4em;
margin-bottom:.2em;
}

/* fieldset message */
fieldset#message {
background:#0AA6E1;
border:outset #0AA6E1;
}

#civilite {
font-size:90%;
}

#civilite input {
margin-left:9em;
}

/* zone de texte du message */
textarea {
font:.8em "Trebuchet MS", Verdana, sans-serif;
width:29em;
padding:.2em;
}

/* les boutons submit et reset */
input[type="submit"], input[type="reset"] {
background:#0AA6E1;
font:1.2em "Trebuchet MS", Verdana, sans-serif;
color:#345071;
}

p#buttons {
text-align:center;
}

1 réponse

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
4 déc. 2008 à 05:21
Si tu centre avec margin, enlève le position:absolute;

Met plutôt:
#global {
margin: 10px auto 0px auto;
width: 900;
text-align: left;
} 

C'est un exemple.
Le margin que j'ai mis est décomposé de la manière suivant:
margin: haut droit bas gauche;

La même chose avec un position:absolute;
#global {
position:absolute;
margin-left: -450px;
width: 900;
top:10px;
left:50%;
text-align: left;
} 


Tu devrai avoir le même résultat dans les deux cas.
3