[HTML]centrer un formulaire (firefox 1.5.0.5)

**Ania** · 01/08/2006, 16h10

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**fallais** · 01/08/2006, 18h05

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 ?

**japz** · 01/08/2006, 18h07

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

**masu** · 01/08/2006, 18h13

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Ania** · 02/08/2006, 09h41

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ??)

**Ania** · 02/08/2006, 09h47

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

[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

**Ania** · 02/08/2006, 09h55

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

**masu** · 02/08/2006, 09h56

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<!--Nos coordonnées -->
<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>
<!--coordonnées clients-->
<br />
<br />
</fieldset>
<fieldset id="souhaits">
<legend>Que souhaitez-vous ?</legend>
<br />
<!-- souhaits client-->
</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.

**Ania** · 02/08/2006, 10h09

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.

**masu** · 02/08/2006, 10h47

quelques petits détails pour commencer
tu as un & non encodé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

pas d'attribut align sur le textarea

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<label for="NomClient">Nom &amp; prénom:</label>
				<input type="text" name="NomClient" id="NomClient" size="21" maxlength="30"  align="middle"/>

**masu** · 02/08/2006, 10h59

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
form {
[...]
}

**masu** · 02/08/2006, 11h00

il faut aussi centere ton premier cadre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Ania** · 02/08/2006, 11h01

Un très grand merci à toi masu

et à bientot j'aurai surement d'autres questions

longue vie à ce forum formidable

[HTML]centrer un formulaire (firefox 1.5.0.5)

HTML

Discussions similaires

Partager

Partager