Forums Développement Multimédia

Aller au contenu

Centrer un formulaire

CODE HTML CSS

8 réponses à ce sujet

#1 HAMSON

  • Guests

Posté 12 October 2010 - 13:15 PM

Bonjour à tous;

j'ai créé un formulaire et j'aimerais le mettre au centre de la page; quelqu'un a-t-il une solution pour moi?
Voici le code:

===================================================================
<html>
<head>
<title>Gestion des Clients</title>
<h1> Gestion des Clients</h1>
<style type="text/css">

/***Mise enforme générale de la page***/
body{
margin:3em;
padding:0;
font:.8em arial, hevetica, sans-serif;
text-align:left;
color:blue;
background:#666666;
}
p#footer{
border-top:1px dotted #ff9900;
padding-top:1em;
}
code{
font-size:.9em;
}
html>body code{
font-size:1.1em
}

/***Mise en forme du formulaire**/
#inscription{
border:1px solid black;
color:black;
margin:0;
padding:0;
width:35em; /***Largeur du formulaire***/
}

/***Mise en forme du titre et du pied de formulaire***/
#titreForm,#piedForm{
font:bold 1.1em arial, hevetica, sans-serif;
color:#666666;
background:#ff9900;
margin:0;
padding:.3em;
}

/***les boutons sont alignés à droite***/
#piedForm{
text-align:right;
}

/***Pour améliorer la lisibilité des boutons***/
#piedForm input{
font-weight:bold;
margin-left:1em;
}

/***Mise en forme du corps du formulaire (bordure,couleur de fond...)***/
#corpForm{
border:1px solid black;
color:black;
background:#efefef;
margin:2;
padding:1em;
}

/***Mise en forme des cadres***/
#corpForm fieldset{
margin:0;
font-style:normal;
padding:0 1em 1em;
}

/***Mise en forme des titres des cadres***/
#corpForm legend{
font-weight:bold;
color:blue;
background:transparent;
}

/***Mise en forme des lignes du formulaire***/
#corpForm p{
padding:.1em 0;
margin:0 0 .1em 0;
}
</style>
</head>
<body>
<form name="inscription" id="inscription" method="post" action="http://">
<div id="titreForm" align="center">Saisie des Clients </div>
<div id="corpForm">
<fieldset id="Coordonnées">
<legend>Coordonnées</legend>
</br>
<p>
Nom du client:<input type="text" name="nomclient" id="nomclient"/>
</p>
<p>
Type client:
<select id="typeclient">
<option value="Société" selected="selected">Société</option>
<option value="Particulier">Particulier</option>
<option value="Autre">Autre</option>
</select>
</p>
<p>
Adresse du client:<input type="text" name="adresclient" id="adresclient"/>
</p>
<p>
Compte client N°:<input type="text" name="comptclient" id="comptclient"/>
</p>
<p>
Code Postal:<input type="text" name="codepost" id="codepost"/>
</p>
<p>
Numéro de téléphone:<input type="text" name="numtel" id="numtel"/>
</p>
<p>
Numéro cellulaire:<input type="text" name="numcel" id="numcel"/>
</p>
<p>
Numéro du Fax:<input type="text" name="numfax" id="numfax"/>
</p>
<p>
Adresse Email:<input type="text" name="eMail" id="eMail"/>
</p>
</fieldset>
</div>
<div id="piedForm">
<input type="reset" name="reset" id="reset" value="Annuler"/>
<input type="submit" name="valid" id="valid" value="Enregistrer"/>
</div>
</form>
<p id="footer"align="center">2010 - Tous droits reservés</p>
</body>
</html>

===============================================
Merci d'avance

#2 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 12 October 2010 - 13:18 PM

Au lieu de
margin:0;
tu peux mettre
margin:0 auto;

Ca indique que les marges à gauche et à droite sont automatiques. Ca va centrer ton #inscription car tu lui as donné un largeur fixe.

#3 HAMSON

  • Guests

Posté 12 October 2010 - 13:38 PM

Voir le messageneolao, le 12 October 2010 - 13:18 PM, dit :

Au lieu de
margin:0;
tu peux mettre
margin:0 auto;

Ca indique que les marges à gauche et à droite sont automatiques. Ca va centrer ton #inscription car tu lui as donné un largeur fixe.

J'ai dejà essayé cette solution (marge:0 auto;)mais ça ne fonctionne pas.

#4 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 12 October 2010 - 13:41 PM

j'ai copié collé ton code http://css-infos.net...hot/la6gje.html

#5 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 12 October 2010 - 13:45 PM

au fait, c'est margin, pas marge

#6 HAMSON

  • Guests

Posté 12 October 2010 - 13:52 PM

En fait je veux centrer tout le bloc en gardant la largeur fixe. Je ne veux pas que le formulaire prend toute la page

#7 HAMSON

  • Guests

Posté 12 October 2010 - 13:57 PM

Merci pour ton aide je crois que ça marche.As-tu aussi l'astuce pour aligner les zones de saisie (input)?

#8 neolao

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3827 messages

Posté 12 October 2010 - 14:20 PM

Tu pourrai déjà englober tes intitulés de input par des <label>

Ensuite, tu peux regarder la source : http://css-infos.net...hot/la6icr.html

#9 HAMSON

  • Guests

Posté 12 October 2010 - 14:30 PM

Merci à toi et tu m'as été d'une aide très pécieuse. Je ne suis qu'un débutant en css et je suis auto-didacte
Encore une fois merci



2 utilisateur(s) li(sen)t ce sujet

0 membre(s), 2 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP