[HTML]centrer un formulaire (firefox 1.5.0.5)

Version imprimable

01/08/2006, 16h10
Ania

[HTML]centrer un formulaire (firefox 1.5.0.5)
Bonjour a tous

je suis novice en HTML et donc en CSS (je ne suis d'ailleurs sûr de ma balise)

et je souhaiterais centrer mon formulaire et non son contenu

car quand j'utilise
Code:

1 2 3 <div align="center"> ... </div>
il n'y a que ce qui ce trouve dans mon formulaire qui est centré.

si vous avez des questions n'hésitez pas :D
01/08/2006, 18h05
fallais

Il faut mettre les élements de ton formulaire dans un tableau dont tu centre le contenu des cellules (ou un DIV) :) Donne nous ton code et on le change si tu ne maitrise pas encore bien le langage :)

Car "centrer un formulaire", la phrase n'est pas correcte car tu ne peux center le formulaire mais les éléments qui le compose, car un formulaire c'est juste deux balises <form></form> qui contiennent les <input>,<textarea>,... tu vois ?
01/08/2006, 18h07
japz

essaies d'encadrer ton formulaire par des "center"
<center>
<form>
</form>
</center>

si on oubliait les attributs et elements depreciés comme align="center" ou la vielle balise center.

pour center un formulaire il suffit d'un petit css
Code:

1 2 3 4 5 form { margin:0 auto; /*permet le centrage*/ width:300px; /*c'est pas tres interessant de center quelque chose qui n'a pas une largeur fixe*/ border: 1px solid red; /* une bordure juste pour visualiser que c'est centré*/ }
Rien de particulier a mettre coté HTML.

tout d'abord merci pour ces premières réponses, seulement ca ne fonctionne pas voici mon code allégé

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Contacts</title>
<style type="text/css">
/*** Mise en forme générale de la page ***/
body {
        margin: 1em;
        padding: 0;
        font: .8em arial, hevetica, sans-serif;
        text-align: left;
        color: black;
        background: white;
}
form {
        margin:0 auto; /*permet le centrage*/
        width:700px; /*c'est pas tres interessant de center quelque chose qui n'a pas une largeur fixe*/
        border: 1px solid red; /* une bordure juste pour visualiser que c'est centré*/
}
 
  <!--autres configurations-->
 
</style>
</head>
<body>
	 <!--Nos coordonnées -->
 
	<form name="Contact" id="inscription" action="mailto:loeiz.gardan@avenir-ouest-energie.com" method="post" enctype="text/plain">
 
	<div id="titreForm" align="center">NOUS CONTACTER</div>
	<div id="corpForm" >
		<fieldset id="coordonnees">
			<legend>Coordonnées</legend>
 
			<!--coordonnées clients-->	
 
	<br /><br />
 
	<fieldset id="coordonnees">
		<legend>Que souhaitez-vous ?</legend><br />
 
			<!-- souhaits client-->
</body>
</html>

ai-je mal placé ou mal le petit bout de code que m'a donné Masu ?

[edit...]
Souhaitez vous d'autres informations (le code complet par pièce jointe ??)

02/08/2006, 09h47
Ania

Par contre j'ai tester également avec les balises center et la fonctionne impécable. je remercie donc japz.

Seulment étant novice je souhaiterais comprendre ce que tu me donnais Mazu. Si bien sur tu as peux de temps à me consacrer, sinon c'est pas grave mais dis le moi :D

[Edit...]
En fait j'étais aller un peu trop vite voyant mon formulaire au milieu de la page je n'ai pas fait attention au reste et le problème de cette methode est que l'ensemble du formulaire est centrer (meme les input le sont) alors que je ne veux centrer que les cadres ou blocs mais laisser ce qu'il contienne tel quel
02/08/2006, 09h55
Ania

je suis desolé masu mais ca ne donne toujours rien mon formulaire reste toujours a gauche

tu as un probleme tu ne ferme pas tes balises form et fieldset
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <body>  <form name="contact" id="contact" action="mailto:loeiz.gardan@avenir-ouest-energie.com" method="post" enctype="text/plain"> <div id="titreForm" align="center">NOUS CONTACTER</div> <div id="corpForm" > <fieldset id="coordonnees"> <legend>Coordonnées</legend>  <br /> <br /> </fieldset> <fieldset id="souhaits"> <legend>Que souhaitez-vous ?</legend> <br />  </fieldset> </div> </form> </body>
------------------------------
edit des div aussi pas fermé.
un id doit etre unique.
pour ton form il est conseillé soit de ne pas mettre d'id soit que le name et l'id soient le meme.

02/08/2006, 10h09
Ania

1 pièce(s) jointe(s)

Si si il y était c'est juste que je ne voulais pas en mettre trop à l'écran car perso je trouve ca repoussant, ca donne pas envie de s'y plonger, je t'envoie donc le code complet par pièce jointe.
02/08/2006, 10h47
masu
quelques petits détails pour commencer
tu as un & non encodé

Code:

<label for="NomClient">Nom & prénom:</label>

pas d'attribut align sur le textarea

Code:

<textarea name="adresse" cols="25" rows="2" align="middle"></textarea>

et remarque precedente sur l'id et le name du form

Code:

<form name="contact" id="contact" action="mailto:loeiz.gardan@avenir-ouest-energie.com" method="post" enctype="text/plain">

enfin c'est domage d'utiliser les labels avec l'attribut for si tu n'a pas l'id correspondant dans l'input. (si tu met l'id alors en cliquant le label l'input prend le focus)
Code:

1 2 <label for="NomClient">Nom & prénom:</label> <input type="text" name="NomClient" id="NomClient" size="21" maxlength="30" align="middle"/>
02/08/2006, 10h59
masu
j'ai trouver ou ca n'allais pas, tu redefini des element du form apres avec son id:
les propriétes de ce selecteur rentrent en confli avec mon code
Code:

1 2 3 4 5 6 #inscription { border: none; margin: 0; padding: 0; width: 500px; /*** Largeur du formulaire ***/ }
je t'ai conseillé de changer l'id donc cette partie devien
Code:

1 2 3 4 5 6 #contact { border: none; margin: 0 auto; padding: 0; width: 500px; /*** Largeur du formulaire ***/ }
et tu peu enlever la partie
Code:

1 2 3 form { [...] }

il faut aussi centere ton premier cadre

Code:

1
2
3
4
5
6
7
8
#NousForm{
	border: 1px solid black;
	color: black;
	background: #efefef;
	margin: 0 auto;
	padding: 1em;
	width: 473px;
}

02/08/2006, 11h01
Ania

Un très grand merci à toi masu :D et à bientot j'aurai surement d'autres questions :D

longue vie à ce forum formidable :mrgreen: