Problème création formulaire HTLM et CSS

**moughlee** · 22/05/2009, 14h05

Bonjour à tous !

Je viens de créer un formulaire avec htlm et CSS.

formulaire
Mais j'ai un souci, mes champs bougent selon la taille de la fenêtre

le code htlm :

Code xhtml :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="essaie.css" />
   </head>
   <body>
 
 
 
	<div id="caisse">
<img src="caisse95mm.png" alt="Caisse plein bois" />
	</div>
 
	<div id="tempsmachine">
<p>Exemple de temps machine, avec planches de largeur <br />100 mm, 3 clouages sur les bords et 2 clouages sur les <br />intermédiaires.
<br />
<ul>
<li>Panneau plein de 600 x 500 mm avec 2 chevrons :</li><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tempsminutes">2 minutes 50 secondes</span></ul>
<ul>
<li>Panneau plein de 4 000 x 8 000 mm avec 6 chevrons :</li><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tempsminutes">42 minutes 10 secondes</span>
</ul>
</p>
	</div>
 
 
	<div id="dimension">  
<img src="dimension.png" alt="Insérer les dimensions dans les champs" />
	</div>
 
 
	<div id="contact">
<form action = "devismachinebois.php" method="post">
Société : <br />	<input type = "text" name = "société" size="35" maxlength="20" ><br />
Nom : &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;             Prénom : <br />	<input type = "text" name = "Nom" size="15" maxlength="20" >
<input type = "text" name = "Prénom" size="15" maxlength="20" ><br />
e-mail :  <br />	<input type = "mail" name = "e-mail" size="35" maxlength="20" >
<br />
<br />
<input type = "submit" value = "Envoyer le devis">
</form>
	</div>
 
 
	<div id="clouage">  
<img src="clouage.png" alt="Clouage" />
	</div>
 
 
	<div id="commentaires">Vos informations - Vos questions<br />
<textarea name="message" rows="6" cols="45">
</textarea>
	</div>
 
 
	<div id="A">  
<form action = "devismachinebois.php" method="post">
 Panneau  <input type = "text" name = "A" size="1" maxlength="4" value="min">
</form>
	</div>   
 
 
	<div id="B">  
<form action = "devismachinebois.php" method="post">
 à&nbsp;&nbsp;&nbsp;<input type = "text" name = "B" size="1" maxlength="4" value="max">
</form>
	</div>   
 
 
	<div id="C">  
<form action = "devismachinebois.php" method="post">
<input type = "text" name = "C" size="1" maxlength="4" value="min">
</form>
	</div>   
 
 
 
	<div id="D">  
<form action = "devismachinebois.php" method="post">   
à&nbsp;&nbsp;&nbsp;<input type = "text" name = "D" size="1" maxlength="4" value="max">  
</form>
	</div>
 
 
	<div id="E">  
<form action = "devismachinebois.php" method="post">
 Panneau<br /><input type = "text" name = "E" size="1" maxlength="4" value="min">    
</form>
	</div>   
 
 
	<div id="F">  
<form action = "devismachinebois.php" method="post">  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;à<br /><input type = "text" name = "F" size="1" maxlength="4" value="max">
</form>
	</div>    
 
 
	<div id="G">  
<form action = "devismachinebois.php" method="post">  
<input type = "text" name = "G" size="1" maxlength="4" value="min">
</form>
	</div>   
 
 
	<div id="H">  
<form action = "devismachinebois.php" method="post">
à<br /><input type = "text" name = "H" size="1" maxlength="4" value="max">
</form>
	</div>   
 
 
   </body>
</html>

Et le CSS

Code css :

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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
Body
{
	margin: auto; 
	WIDTH: 842px; HEIGHT: 595px; BACKGROUND-COLOR: yellow;
}
 
#caisse
{
  width: 269px;
  height: 251px;
  position: absolute;
  left: 15px;
  Top: 15px;
}
 
#tempsmachine
{
  width: 370px;
  height: 300px;
  position: absolute;
  left: 30px;
  Top: 275px;
  color: black;
 }
 
 #dimension
{
   width: 539px;
   height: 350px;
   position: absolute;
   left: 450px;
   Top: 15px;
 }
 
p
{
   color: black;
   font-size: 100%;
   text-indent: 30px;
   text-align: justify;
}
 
ul
{
   color: black;
   font-size: 100%;
   }
 
.tempsminutes 
{
   font-weight: bold;
}
 
#contact
{
   position: absolute;
   right: 15px;
   bottom: 5px;
}
 
#clouage
{
  width: 241px;
  height: 180px;
  position: absolute;
  left: 450px;
  bottom: 15px;
 }
 
#commentaires
{
   position: absolute;
   left: 15px;
   bottom: 15px;
 
}
 
#A 
{
   position: absolute;
   right: 200px;
   top: 295px;
   font-size: 12px;
}
 
#B
 {
   position: absolute;
   right: 150px;
   top: 295px;
   font-size: 12px;
}
 
#C
 {
   position: absolute;
   right: 345px;
   top: 278px;
   font-size: 12px;
}
 
#D 
{
   position: absolute;
   right: 295px;
   top: 278px;
   font-size: 12px;
}
 
#E
 {
   position: absolute;
   right: 5px;
   top: 140px;
   font-size: 12px;
}
 
#F
 {
   position: absolute;
   right: 12px;
   top: 180px;
   font-size: 12px;
}
 
#G 
{
   position: absolute;
   right: 505px;
   top: 270px;
   font-size: 12px;
}
 
#H 
{
   position: absolute;
   right: 505px;
   top: 290px;
   font-size: 12px;
}
 
#I 
{
   position: absolute;
   left: px;
   bottom: px;
}

merci a+

**desert** · 22/05/2009, 16h30

Bonjour,
Le width et le margin que tu as spécifié pour le body dans ton code CSS, ils doivent être appliqués à un conteneur englobant tout ce qu'il y a à l'intérieur de la balise body.

Code xhtml :

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

1
2
3
4
5
<body>
   <div id="conteneur">
       ...
   </div>
</body>

Code css :

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

1
2
3
4
5
6
7
8
9
body {  
    background-color: yellow; 
}
 
#conteneur {
    margin: 0 auto; 
    width: 842px; 
    height: 595px;
}

Invité · 22/05/2009, 16h34

Bonjour,
Normal que ca bouge ! Tu as tout mis en position: absolute;

Mets tes "boites" (div) en position: relative;
Et pour les positionner correctement :
http://css.developpez.com/cours/

**HiRoN** · 23/05/2009, 14h05

Bonjour,
Un petit tour ici serait sûrement utile...

Problème création formulaire HTLM et CSS

HTML

Discussions similaires

Partager

Partager