Centrage formulaire

**extremenet** · 04/03/2009, 15h01

Bonjour,

je viens de faire un formulaire mais celui-ci ne ce centre pas sous IE et sous firefox. sous il reste à gauche.

Ai je oublé une fonction dans mon CSS.

Voici l'adresse de test de mon exemple :
http://www.petitionduweb.com/test.php

Voici mon code :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
<!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=utf-8" /> 
<title>Document sans titre</title> 
<style type="text/css"> 
 
 
body { margin: 0px auto; 
padding:0; 
background-color: #0C0203; 
} 
.formulaire1 
{ color:#856558; 
font-size : 14px; 
font-family : Tahoma,Verdana,Arial; 
font-weight: bold; 
 
} 
div#cadrepagedeposer{ 
width:980px; 
top:20px; 
margin-top:20px; 
border-top: solid #620000 2px; 
border-left: solid #620000 2px; 
border-right: solid #620000 2px; 
border-bottom: solid #620000 2px; 
margin:auto; 
 
} 
* html .threepxfix{ 
margin-left: 3px; 
padding:0px; 
} 
 
em { 
width:270px; 
position:absolute; 
vertical-align:top; 
font-style:normal; 
display:none; 
color:#0000ff; 
font-weight:bold; 
border:1px solid #ffa500; 
background-color:yellow; 
 
} 
 
.cssformdeposer p{ 
 
width: 300px; 
clear: left; 
margin: 0; 
padding: 3px 0 3px 0; 
padding-left: 180px; /*width of left column containing the label elements*/ 
text-align:center; 
} 
 
.cssformdeposer label{ 
font-weight: bold; 
text-align:right; 
float: left; 
margin-left: -160px; /*width of left column*/ 
width: 180px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/ 
} 
 
.cssformdeposer input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/ 
width: 245px; 
 
} 
.cssformdeposer input[type="file"]{ /*width of text boxes. IE6 does not understand this attribute*/ 
width: 245px; 
 
} 
 
 
.cssformdeposer select{ /*width of text boxes. IE6 does not understand this attribute*/ 
width: 250px; 
 
} 
 
.cssformdeposer textarea{ 
width: 245px; 
height: 50px; 
} 
</style> 
</head> 
 
<body><br> 
<br> 
 
 
<div id="cadrepagedeposer"> 
 
 
<form name="deposer" id="deposer" class="cssformdeposer" method="POST" action="inscription.php" onSubmit="return validationformulaire(this)" enctype="multipart/form-data"> 
 
 
 
 
<p><label for="fichier" class="formulaire1">Fichier </label><input type="file" name="fichierimage" ></p> 
 
<p><label for="titre" class="formulaire1">Titre</label><input name="titre" type="text" /></p> 
 
<p><label for="tag" class="formulaire1">Tag </label><input name="tag" type="text" /></p> 
 
<p><label for="categorie" class="formulaire1">categorie</label><select name="categorie" > 
<option value="" > Choisir </option> 
 
</select><em> Catégorie dans laquelle votre fichier sera disponnible.</em></p> 
 
 
</form> 
</div> 
 
 
 
 
</body> 
</html>

Merci

**binouzzz19** · 04/03/2009, 15h10

Bonjour.

Regarde par ici :

http://xhtml.developpez.com/faq/?pag...orizontalement

Cordialement.

PS : Google est ton ami

**extremenet** · 04/03/2009, 15h42

oK, je vais tester ceci dans la journée.

Je repasse pour dire si ca marche

**GihefBey** · 04/03/2009, 16h47

Bonjour,

Chez moi le bloc rouge est centré mais ne voyant pas trop ce qu'on peut faire facilement du lien, une proposition.
Donne une largeur à ton <form> et un margin: nnpx auto;
Cela s'appliquerait à #deposer qui n'est encore modifié nulle part.
Si tu veux une compatibilité avec des vieux IE, ajoute un text-align: center; au bloc qui contient ton formulaire.

-

**extremenet** · 04/03/2009, 18h41

ok je vais voir vos propositions. pour le cadre rouge : oui il est centré c'est juste le formulaire intérieur

**extremenet** · 04/03/2009, 23h26

Bon sa y est j'ai reussi. j'ai reussi avec la proposition de GihefBey

Je n'avais pas vu que ma balise <form n'etait pas defini dans la feuille de style.

pour ce que ca interresse j'ai ajouté :

Code :

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

1
2
3
4
5
.cssformdeposer {
width: 450px;
margin: auto;
text-align:center;
}

et text-align: center; dans le bloc cadrepagedeposer

Merci encore de votre aide

Centrage formulaire

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager