Centrer mon formulaire html avec css
stefanelle
-
arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention -
arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention -
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;
}
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;
}
A voir également:
- Comment centrer un formulaire en css
- Whatsapp formulaire opposition - Guide
- Formulaire de réclamation facebook compte désactivé - Guide
- Civilité sur un formulaire - Forum VB / VBA
- Formulaire de reclamation instagram - Guide
- Formulaire de contact le bon coin introuvable - Forum Réseaux sociaux
1 réponse
Si tu centre avec margin, enlève le position:absolute;
Met plutôt:
C'est un exemple.
Le margin que j'ai mis est décomposé de la manière suivant:
La même chose avec un position:absolute;
Tu devrai avoir le même résultat dans les deux cas.
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.