hover sur un input bouton dans le css qui ne fonctionne pas

**patricktoulon** · 27/06/2013, 14h38

bonjour a tous

je suis en train de faire une application (hta)

et j'ai un souci avec le mouse over dans le css pour les boutons

en fait ca ne fonctionne pas

voila mon but est de changer la dimention des bordures et autres propriétés sur le bouton au passage de la souris

voila le code qui me pose probleme

Code html :

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
 
<html>
<head>
<style type="text/css" media="screen">
 
<!-- ici c'est le point par ceque je passe par la class car je le meme effet pour X boutons -->
.bouton:hover{
border-width:5px 5px; 
}
<!-- ici c'est un dieze parceque je passe par le ID chaques boutons aura ses propriétés  -->
#bouton1{position:absolute;
left:775px;top:120;width:200;height:41;
background-color:red;color:blue;
border: solid orange;
border-width:1px 1px; 
}
</style>
</head> 
<body>
 <div class='bouton'<input type='button' id='bouton1'   value='bouton1'></input></div>
</body>
</html>

quelqu'un peut me dépanner
merci pour le retour

Au plaisir

**Torgar** · 27/06/2013, 14h47

Salut,

Il n'y a pas de doctype ?

Tu es bien certain que ce code est exact ?

Code html :

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

<div class='bouton'<input type='button' id='bouton1'   value='bouton1'></input></div>

Il n'y a rien qui te chiffonne ?

**patricktoulon** · 27/06/2013, 15h10

re
merci pour le retour rapide

pour le doctype

Code :

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

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN >

ensuite peut etre la balise de la classe qui n'est pas fermée

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
 
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN >
<html>
<head>
<style type="text/css" media="screen">
 
.bouton:hover{
border-width:10px 10px; 
}
#bouton1{position:absolute;
left:775px;top:120;width:200;height:41;
background-color:red;color:blue;
border: solid orange;
border-width:1px 1px; 
}
#bouton1:hover
{
 background-color:blue;
font-size:13px;
font-weight:bold;
border: solid cian;
}
</style>
</head> 
<body>
 <div class='bouton'><input type='button' id='bouton1'   value='bouton1'></input></div>
</body>
</html>

sachant que le formatage au depart fonctionne c'est le hover qui ne fonctionne pas

et je rapelle que le html et css n'est pas mon laguage avec le quel je travaille habituellement

ni par le id et ni par la classe

**patricktoulon** · 27/06/2013, 16h33

re

je viens de l'essayer comme ca tel quel avec chrome et ca fonctionne
mais pas avec IE 9 ni dans un hta
une idée du pourquoi?

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
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN >
<html>
<head>
<style type="text/css" media="screen">
#bouton1{position:absolute;
left:775px;top:120;width:200;height:41;
background-color:red;color:blue;
border: solid orange;
border-width:1px 1px; 
}
#bouton1:hover
{
 background-color:blue;
color:white;
font-size:13px;
font-weight:bold;
border: solid orange;
border-width:3px 3px; 
}
</style>
</head> 
<body>
<div class="Mon-Menu">
<input type='button' id='bouton1'   value='bouton1'></input>
</div>
 
</body>
</html>

merci pour le retour

Invité · 27/06/2013, 16h36

Salut,

Tu peux fermer ton input comme ceci :

Code :

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

<input type="button" name="Name" id="monID" />

Ce n'est pas le boutton que tu modifies sur le :hover , mais le div conteneur

**patricktoulon** · 27/06/2013, 16h50

merci pour le retour crocotino

mais dans le dernier exemple le imput est bien refermé

le probleme c'est que ca fonctionne avec chrome mais pas IE 9 ou hta

une idée ????

Invité · 27/06/2013, 17h03

Tiens, je t'ai fait un code sympa que tu n'auras plus qu'à adapter :

Code :

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

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
	<head>
            ...
       </head>
	<body>
		<input type='button' value='bouton1'></input>
	</body>
</html>

Le CSS :

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
 
		input[type=button] {
			display: inline-block;
			margin: 0;
			padding: 3px 6px;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			-ms-border-radius: 4px;
			-o-border-radius: 4px;
			-khtml-border-radius: 4px;
			border-radius: 4px;
			border: 2px solid #dddddd;
			background-color: #ffffff;
			color: #318ce7;
			font-family: 'Roboto Condensed', sans-serif;
			font-size: inherit;
			-webkit-transition-property: background-color, color, border-color;
			-webkit-transition-duration: 0.1s, 0.1s, 0.1s;
			-webkit-transition-timing-function: linear, linear, linear;
			-moz-transition-property: background-color, color, border-color;
			-moz-transition-duration: 0.1s, 0.1s, 0.1s;
			-moz-transition-timing-function: linear, linear, linear;
			transition-property: background-color, color, border-color;
			transition-duration: 0.1s, 0.1s, 0.1s;
			transition-timing-function: linear, linear, linear;
			box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 0.5) inset; 
			-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 0.5) inset; 
			-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 0.5) inset; 
			-o-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 0.5) inset; 
		}
 
		input[type=button]:hover {
			border: 2px solid #ffffff;
			background-color: #318ce7;
			color: #ffffff;
			cursor: pointer;
			-webkit-transition-property: background-color, color, border-color;
			-webkit-transition-duration: 0.1s, 0.1s, 0.1s;
			-webkit-transition-timing-function: linear, linear, linear;
			-moz-transition-property: background-color, color, border-color;
			-moz-transition-duration: 0.1s, 0.1s, 0.1s;
			-moz-transition-timing-function: linear, linear, linear;
			transition-property: background-color, color, border-color;
			transition-duration: 0.1s, 0.1s, 0.1s;
			transition-timing-function: linear, linear, linear;
		}

**patricktoulon** · 27/06/2013, 17h41

Re
tres tres jolie

mais ca implique que tout mes imput button auront le meme etat de base et le meme etat mouseover
c'est genant

j'ai ajouté a ton exemple la sous classe par le id

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
 
<!DOCTYPE html>
<html>
<head>
       <style type="text/css" media="screen">
 #bouton1{
position:absolute;
left:775px;top:120px;width:200px;height:41px;
background-color: red;
}
 #bouton2{
position:absolute;
left:775px;top:200px;width:200px;height:41px;
background-color: orange;
}
input[type=button] {
display: inline-block;
margin: 0;
 
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
border: 4px solid #dddddd;
color: #318ce7;
font-family: 'Roboto Condensed', sans-serif;
font-size: inherit;
-webkit-transition-property: background-color, color, border-color;
-webkit-transition-duration: 0.1s, 0.1s, 0.1s;
-webkit-transition-timing-function: linear, linear, linear;
-moz-transition-property: background-color, color, border-color;
-moz-transition-duration: 0.1s, 0.1s, 0.1s;
-moz-transition-timing-function: linear, linear, linear;
transition-property: background-color, color, border-color;
transition-duration: 0.1s, 0.1s, 0.1s;
transition-timing-function: linear, linear, linear;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 0.5) inset; 
-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 0.5) inset; 
-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 0.5) inset; 
-o-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 0.5) inset; 
}
 
input[type=button]:hover {
border: 2px solid #ffffff;
background-color: blue;
color:yellow;
cursor: pointer;
-webkit-transition-property: background-color, color, border-color;
-webkit-transition-duration: 0.1s, 0.1s, 0.1s;
-webkit-transition-timing-function: linear, linear, linear;
-moz-transition-property: background-color, color, border-color;
-moz-transition-duration: 0.1s, 0.1s, 0.1s;
-moz-transition-timing-function: linear, linear, linear;
transition-property: background-color, color, border-color;
transition-duration: 0.1s, 0.1s, 0.1s;
transition-timing-function: linear, linear, linear;
}
</style>
       </head>
<body>
<div class="MON-MENU">
<input type='button' id='bouton1'   value='bouton1'></input>
<input type='button' id='bouton2'   value='bouton2'></input>
</div>
 
 
 
</body>
</html>

seul probleme le changement du background ne change plus c'est assez bizzarre

**NoSmoking** · 27/06/2013, 18h16

Bonjour,
dans ton exemple initial, change le doctype, par un <!doctype html>

Invité · 27/06/2013, 18h24

Oui NoSmoking, c'est ce que j'ai fait après

Euh... patricktoulon je n'ai pas très bien comprit ce que tu souhaites faire ?

Invité · 27/06/2013, 18h31

Tiens, là je te mets toutes les possibilités de couleurs et backgrounds :

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
<!DOCTYPE html>
<html>
<head>
       <style type="text/css" media="screen">
 
 
			input[type=button] {
				display: inline-block;
				margin: 0;			 
				border: 4px solid white;
				color: white;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				-ms-border-radius: 4px;
				-o-border-radius: 4px;
				-khtml-border-radius: 4px;
				border-radius: 4px;
				font-family: 'Roboto Condensed', sans-serif;
				font-size: inherit;
				-webkit-transition-property: background-color, color, border-color;
				-webkit-transition-duration: 0.1s, 0.1s, 0.1s;
				-webkit-transition-timing-function: linear, linear, linear;
				-moz-transition-property: background-color, color, border-color;
				-moz-transition-duration: 0.1s, 0.1s, 0.1s;
				-moz-transition-timing-function: linear, linear, linear;
				transition-property: background-color, color, border-color;
				transition-duration: 0.1s, 0.1s, 0.1s;
				transition-timing-function: linear, linear, linear;
				box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 0.5) inset; 
				-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 0.5) inset; 
				-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 0.5) inset; 
				-o-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 0.5) inset; 
			}
 
			input[type=button]:hover {
				cursor: pointer;
				-webkit-transition-property: background-color, color, border-color;
				-webkit-transition-duration: 0.1s, 0.1s, 0.1s;
				-webkit-transition-timing-function: linear, linear, linear;
				-moz-transition-property: background-color, color, border-color;
				-moz-transition-duration: 0.1s, 0.1s, 0.1s;
				-moz-transition-timing-function: linear, linear, linear;
				transition-property: background-color, color, border-color;
				transition-duration: 0.1s, 0.1s, 0.1s;
				transition-timing-function: linear, linear, linear;
			}
 
			#bouton1{
				position:absolute;
				left:775px;top:120px;width:200px;height:41px;
				background-color: red;
			}
 
			#bouton1:hover {				
				background-color: blue;
			}
 
			 #bouton2 {
				position:absolute;
				left:775px;top:200px;width:200px;height:41px;
				background-color: orange;
			}
 
			#bouton2:hover {
				background-color: green;
			}
 
			</style>
       </head>
 
	<body>
		<div class="MON-MENU">
			<input type='button' id='bouton1' value='bouton1' />
			<input type='button' id='bouton2' value='bouton2'/>
		</div>
	</body>
 
</html>

**patricktoulon** · 28/06/2013, 12h24

regarde ma page sans bouton

et change le doctype w3rc en html tu verra
sa m'ennnuie fortement

et les boutons doivent aller sur cette page a droite

Invité · 28/06/2013, 13h40

! C'est quoi ce bazar ? Sur ma page tout est empilé.

Qu'est ce que tu cherches à faire désormais ?

**patricktoulon** · 28/06/2013, 13h49

re
a tu essayé d'afficher la page comme tel?

a tu essayer de changer le doctype et de réafficher ensuite ??
en effet si je laisse le doctype w3C ma page s'affiche corectement
si je met le doctype a "html" simplement a lors c'est comme tu dis tout emplilé
les style interne dans le code ne sont plus pris en compte

tu vois ce que je veux dire

une idée

**JérémieL** · 28/06/2013, 15h01

Ouch, t'as dû galérer à placer tous ces champs de texte...

Quelque soit le doctype, sous Firefox ça s'affiche mal. Sous IE, ça s'affiche bien parce que le doctype que tu as utilisé n'est pas correct, ce qui fait qu'il utilise le mode Quirks et affiche la page à sa sauce, en utilisant un modèle de calcul des marges/tailles différent.

Le premier truc à faire est de mettre un doctype correct, suivant les recommandations :

Code html :

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

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

Ou (doctype HTML5) :

Code html :

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

<!DOCTYPE html>

Ensuite, il y a des erreurs dans le code HTML, notamment les balises textarea ouvrantes qui ne sont pas fermées et contiennent un INPUT ??
Utilise des textarea pour des zones de texte sur plusieurs lignes, ou des input de type text sur une ligne.

Tu devrais alléger le code HTML en mettant les propriétés CSS communes à tous les textarea dans une règle commune :

Code :

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

1
2
3
4
5
6
7
8
9
10
#feuille textarea
{
  position: absolute;
  font-family: Arial Narrow;
  font-size: 15px;
  color: #000000;
  font-weight: bold;
  background-color: #FFFFFF;
  overflow: hidden;
}

Pour éviter que les textarea soient redimensionnables dans certains navigateurs :

Code :

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

1
2
3
4
#feuille textarea
{
  resize: none;
}

Bon courage, j'espère que ces quelques remarques te seront utiles.

**patricktoulon** · 28/06/2013, 15h23

re
hihihi

lol ... non je n'ai pas galéré du tout

mon language habituel est le vb,vbs,vba

si tu cherche dans les contributions excel vba j'ai fait une fonction qui copie a l'identique une selection de cellules dans un fichier html ou hta avec bordure ,fontsize,bold,italic ,background ,color ect....

donc je ne galere pas pour l'ecrire
ensuite pendant que tu me trouvais la solution j'etait en train de re régler les inputs a la main et la oui c'est galere

donc selon toi
quel doctype doit je utiliser afin d'avoir le hover dans un hta ou html avec IE
ah!!! au fait les bordures arrondies ne fonctionnent pas dans un HTA(html application)il semble que ca ne soit pas pris en compte dommage

pour te donner un appercu voila ou j'en suis pour le momment

Code html :

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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
 
 
<!DOCTYPE html>
 
<html>
<head>
 <link rel="stylesheet" type="text/css" href="print.css" media="print"> 
 
 <style>
 
 
#feuille
{
  position: fixed;
  top: 0;
  margin-top: 01px;
 height: 1220px;
  overflow: auto;
  width: 865px;
}
 
 
 
input[type=button] {
                                display: inline-block;
                                margin: 0;                       
                                border: 4px solid gray;
                                
                                -webkit-border-radius: 20px;
                                -moz-border-radius: 20px;
                                -ms-border-radius: 20px;
                                -o-border-radius: 20px;
                                -khtml-border-radius: 20px;
                                border-radius: 20px;
                                font-family: 'Roboto Condensed', sans-serif;
                                font-size: inherit;
                                fontstyle:bold
                                
                                
                        }
 
                        input[type=button]:hover {
                                cursor: pointer;
                                -webkit-transition-property: background-color, color, border-color;
                                -webkit-transition-duration: 0.1s, 0.1s, 0.1s;
                                -webkit-transition-timing-function: linear, linear, linear;
                                -moz-transition-property: background-color, color, border-color;
                                -moz-transition-duration: 0.1s, 0.1s, 0.1s;
                                -moz-transition-timing-function: linear, linear, linear;
                                transition-property: background-color, color, border-color;
                                transition-duration: 0.1s, 0.1s, 0.1s;
                                transition-timing-function: linear, linear, linear;
                         font-size:20px
                                                          font:bold
 
}
 
                        #bouton1{
                                position:absolute;
                                left:900px;top:120px;width:200px;height:41px;
                                background-color: red;
                        color:yellow
 
}
 
                        #bouton1:hover {                                
                                background-color:yellow;
                        color:red
                                                       
 
}
 
                         #bouton2 {
                                position:absolute;
                                left:900px;top:200px;width:200px;height:41px;
                                background-color: orange;
                        color:magenta
 
}
 
                        #bouton2:hover {
                                background-color:magenta;
                        color:orange
}
 
                        </style>
       </head>
 
	<body>
		<div class="MON-MENU">
			<input type='button' id='bouton1' value='bouton1' />
			<input type='button' id='bouton2' value='bouton2'/>
		</div>
	<div id ="feuille">
<div id="case date">
<textarea READONLY id="E2"name="E2"style="position:absolute;left:426px;top:22px;width:58px;height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial Narrow;font-size:15px;
color:#000000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:2px ;border-left-color:#000000;border-right-width:2px ;border-right-color:#000000;border-top-width:2px ;border-top-color:#000000;border-bottom-width:2px ;border-bottom-color:#000000;"
<INPUT STYLE="Text-ALIGN:center";>DATE:
</textarea>
<textarea id="F2"name="F2"style="position:absolute;left:484px;top:22px;width:171px;height:23px;border:1px  #DBE5F1 solid ;
font-family:Calibri;font-size:15px;
color:#000000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;border-left-width:2px ;border-left-color:#000000;border-right-width:1px ;border-right-color:#000000;border-top-width:2px ;border-top-color:#000000;
border-bottom-width:2px ;border-bottom-color:#000000;"
<INPUT STYLE="Text-ALIGN:center";>
</textarea>
</div>
<div id ="case coordonnées client">
 
<textarea id="G4"name="G4"style="position:absolute;left:564px;top:67px;width:267px;height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial;font-size:16px;
color:#000000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:2px ;border-left-color:#376091;border-right-width:2px ;border-right-color:#376091;border-top-width:3px ;border-top-color:#376091;border-bottom-width:2px ;border-bottom-color:#FFFFFF;"
<INPUT STYLE="Text-ALIGN:center";></textarea>
 
<textarea id="G5"name="G5"style="position:absolute;left:564px;top:90px;width:267px;height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial;font-size:16px;
color:#000000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:2px ;border-left-color:#376091;border-right-width:2px ;border-right-color:#376091;border-top-width:2px ;border-top-color:#FFFFFF;border-bottom-width:2px ;border-bottom-color:#FFFFFF;"
 
<INPUT STYLE="Text-ALIGN:center";></textarea>
<textarea id="G6"name="G6"style="position:absolute;left:564px;top:113px;width:267px; height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial;font-size:16px;
color:#000000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:2px ;border-left-color:#376091;border-right-width:2px ;border-right-color:#376091;border-top-width:2px ;border-top-color:#FFFFFF;border-bottom-width:2px ;border-bottom-color:#FFFFFF;"
 
<INPUT STYLE="Text-ALIGN:center";></textarea>
<textarea id="G7"name="G7"style="position:absolute;left:564px;top:136px;width:267px; height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial;font-size:16px;
color:#000000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:2px ;border-left-color:#376091;border-right-width:2px ;border-right-color:#376091;border-top-width:2px ;border-top-color:#FFFFFF;border-bottom-width:2px ;border-bottom-color:#FFFFFF;"
 
<INPUT STYLE="Text-ALIGN:center";></textarea>
<textarea READONLY id="G9"name="G9"style="position:absolute;left:564px;top:188px;width:91px; height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial;font-size:11px;
color:#000000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:2px ;border-left-color:#376091;border-right-width:1px ;border-right-color:#000000;border-top-width:0px ;border-top-color:#000000;border-bottom-width:2px ;border-bottom-color:#376091;"
 
<INPUT STYLE="Text-ALIGN:center";>Tel :
</textarea>
<textarea id="G8"name="G8"style="position:absolute;left:564px;top:159px;width:267px; height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial;font-size:16px;
color:#000000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:2px ;border-left-color:#376091;border-right-width:2px ;border-right-color:#376091;border-top-width:2px ;border-top-color:#FFFFFF;border-bottom-width:1px ;border-bottom-color:#000000;"
<INPUT STYLE="Text-ALIGN:center";></textarea>
 
<textarea id="H9"name="H9"style="position:absolute;left:656px;top:188px;width:176px; height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial;font-size:15px;
color:#000000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:1px ;border-left-color:#000000;border-right-width:2px ;border-right-color:#376091;border-top-width:0px ;border-top-color:#000000;border-bottom-width:2px ;border-bottom-color:#376091;"
<INPUT STYLE="Text-ALIGN:center";></textarea>
 
<textarea READONLY id="G11"name="G11"style="position:absolute;left:564px;top:228px;width:91px; height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial Narrow;font-size:15px;
color:#000000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:2px ;border-left-color:#000000;border-right-width:2px ;border-right-color:#000000;border-top-width:2px ;border-top-color:#000000;border-bottom-width:2px ;border-bottom-color:#000000;"
<INPUT STYLE="Text-ALIGN:center";>Client N°
</textarea>
 
<textarea id="H11"name="H11"style="position:absolute;left:655px;top:228px;width:176px; height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial;font-size:14px;
color:#000000;font-weight:normal;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:2px ;border-left-color:#000000;border-right-width:2px ;border-right-color:#000000;border-top-width:2px ;border-top-color:#000000;border-bottom-width:2px ;border-bottom-color:#000000;"
<INPUT STYLE="Text-ALIGN:center";>
</textarea>
</div>
<div id =" entete de colonne ">
<textarea READONLY id="G13"name="G13"style="position:absolute;left:565px;top:274px;width:91px;height:46px;border:1px  #DBE5F1 solid ;
font-family:Arial Narrow;font-size:16px;
color:#000000;font-weight:bold;
background-color:#DBE5F1;overflow:Hidden;
border-left-width:1px ;border-left-color:#000000;
border-right-width:1px ;border-right-color:#000000;
border-top-width:1px ;border-top-color:#000000;
border-bottom-width:1px ;border-bottom-color:#000000;"
<INPUT STYLE="Text-ALIGN:center";>Total Heure
</textarea>
<textarea READONLY id="H13"name="H13"style="position:absolute;left:657px;top:274px;width:93px;height:46px;border:1px  #DBE5F1 solid ;
font-family:Arial Narrow;font-size:16px;
color:#000000;font-weight:bold;
background-color:#D8D8D8;overflow:Hidden;
border-left-width:1px ;border-left-color:#000000;
border-right-width:1px ;border-right-color:#000000;
border-top-width:1px ;border-top-color:#000000;
border-bottom-width:1px ;border-bottom-color:#000000;"
<INPUT STYLE="Text-ALIGN:center";>Tarif Horaire
</textarea>
<textarea READONLY id="I13"name="I13"style="position:absolute;left:750px;top:274px;width:83px;height:46px;border:1px  #DBE5F1 solid ;
font-family:Arial Narrow;font-size:16px;
color:#000000;font-weight:bold;
background-color:#DBEEF3;overflow:Hidden;
border-left-width:1px ;border-left-color:#000000;
border-right-width:1px ;border-right-color:#000000;
border-top-width:1px ;border-top-color:#000000;
border-bottom-width:1px ;border-bottom-color:#000000;"
<INPUT STYLE="Text-ALIGN:center";>Total
</textarea>
<textarea READONLY id="A14"name="A14"style="position:absolute;left:0px;top:297px;width:80px;height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial Narrow;font-size:16px;
color:#000000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:1px ;border-left-color:#000000;
border-right-width:1px ;border-right-color:#000000;
border-top-width:1px ;border-top-color:#000000;
border-bottom-width:1px ;border-bottom-color:#000000;"
<INPUT STYLE="Text-ALIGN:center";>Référence
</textarea>
<textarea READONLY id="B14"name="B14"style="position:absolute;left:80px;top:297px;width:482px;height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial Narrow;font-size:16px;
color:#000000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:1px ;border-left-color:#000000;
border-right-width:1px ;border-right-color:#000000;
border-top-width:1px ;border-top-color:#000000;
border-bottom-width:1px ;border-bottom-color:#000000;"
<INPUT STYLE="Text-ALIGN:center";>Désignation des travaux
</textarea>
</div>
<div id =" commentaires">
<textarea id="A10"name="A10"style="position:absolute;left:0px;top:205px;width:80px;height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial Narrow;font-size:15px;
color:#000000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:2px ;border-left-color:#376091;
border-right-width:1px ;border-right-color:#000000;
border-top-width:2px ;border-top-color:#376091;
border-bottom-width:1px ;border-bottom-color:#000000;"
<INPUT STYLE="Text-ALIGN:center";>
</textarea>
<textarea id="B10"name="B10"style="position:absolute;left:85px;top:205px;width:203px;height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial Narrow;font-size:15px;
color:#000000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:0px ;border-left-color:#000000;
border-right-width:2px ;border-right-color:#376091;
border-top-width:2px ;border-top-color:#376091;
border-bottom-width:1px ;border-bottom-color:#000000;"
<INPUT STYLE="Text-ALIGN:center";>
</textarea>
<textarea READONLY id="D48"name="D48"style="position:absolute;left:283px;top:1051px;width:281px;height:21px;border:1px  #DBE5F1 solid ;
font-family:Arial Narrow;font-size:14px;
color:#FF0000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:1px ;border-left-color:0;
border-right-width:1px ;border-right-color:#FFFFFF;
border-top-width:1px ;border-top-color:#FFFFFF;
border-bottom-width:1px ;border-bottom-color:#FFFFFF;"
<INPUT STYLE="Text-ALIGN:center";>Achat des matèriaux à la charge du client.
</textarea></div>
<div id="sujet du devis ">
 
<textarea id="B11"name="B11"style="position:absolute;left:85px;top:234px;width:203px;height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial Narrow;font-size:15px;
color:#000000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:0px ;border-left-color:#000000;
border-right-width:2px ;border-right-color:#376091;
border-top-width:0px ;border-top-color:#000000;
border-bottom-width:1px ;border-bottom-color:#000000;"
<INPUT STYLE="Text-ALIGN:center";>
</textarea>
<textarea id="B12"name="B12"style="position:absolute;left:85px;top:261px;width:203px;height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial Narrow;font-size:14px;
color:#000000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:0px ;border-left-color:#000000;
border-right-width:2px ;border-right-color:#376091;
border-top-width:0px ;border-top-color:#000000;
border-bottom-width:2px ;border-bottom-color:#376091;"
<INPUT STYLE="Text-ALIGN:center";>
</textarea>
<textarea READONLY id="A11"name="A11"style="position:absolute;left:0px;top:234px;width:80px;height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial Narrow;font-size:15px;
color:#000000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:2px ;border-left-color:#376091;
border-right-width:1px ;border-right-color:#000000;
border-top-width:0px ;border-top-color:#000000;
border-bottom-width:1px ;border-bottom-color:#000000;"
<INPUT STYLE="Text-ALIGN:center";>Devis N°
</textarea>
<textarea READONLY id="A12"name="A12"style="position:absolute;left:0px;top:261px;width:80px;height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial Narrow;font-size:15px;
color:#000000;font-weight:bold;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:2px ;border-left-color:#376091;
border-right-width:1px ;border-right-color:#000000;
border-top-width:0px ;border-top-color:#000000;
border-bottom-width:2px ;border-bottom-color:#376091;"
<INPUT STYLE="Text-ALIGN:center";>SUJET
</textarea>
</div>
<div id =" lignes du devis">
<div class="ligne1"><textarea id="A15"name="A15"style="position:absolute;left:0px;top:325px;width:80px;height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial Narrow;font-size:15px;
color:#000000;font-weight:normal;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:1px ;border-left-color:#000000;border-right-width:1px ;border-right-color:#000000;border-top-width:0px ;border-top-color:#000000;border-bottom-width:1px ;border-bottom-color:#000000;"
<INPUT STYLE="Text-ALIGN:center";>
</textarea>
<textarea id="B15"name="B15"style="position:absolute;left:80px;top:325px;width:482px;height:23px;border:1px  #DBE5F1 solid ;
font-family:Arial Narrow;font-size:15px;
color:#000000;font-weight:normal;
background-color:#FFFFFF;overflow:Hidden;
border-left-width:1px ;border-left-color:#000000;border-right-width:1px ;border-right-color:#000000;border-top-width:0px ;border-top-color:#000000;border-bottom-width:1px ;border-bottom-color:#000000;"
<INPUT STYLE="Text-ALIGN:center";>
</textarea>
</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
</div>
</div>
</body>
 
</html>

**rodolphebrd** · 28/06/2013, 15h57

Bonjour,

Je rejoins JérémieL pour les points suivants:
- il y a beaucoup de balises html non fermées (area) et des déclarations Css qui doivent être terminées par un point virgule.

- Le Css inline n'est vraiment pas idéal pour comprendre le code et ensuite pour le maintenir.

N'y a-t-il pas des fautes de frappe pour les identifiants tels que "case coordonnées client" où il semble manquer des traits d'union pour donner plutôt "case-coordonnées-client".

Les boutons fonctionnent au hover...

Ne pas oublier l'encodage après le doctype:

Code html :

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

1
2
3
4
5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
........

**patricktoulon** · 28/06/2013, 16h27

Bonjour rodolphebrd

pour les identifiants ca n'est pas trop grave ,l'ortographe n'est pas tres important on ne le vois pas ,c'est le nom d'une classe

ensuite je vois pas ou les balises ne sont pas fermée

quand je rajoute un ">" comme je crois que tu pense l'object est absent dans l'affichage
je n'y comprend plus rien la

je rappelle que je suis novice dans ce language alors un peu d'indulgence

donne moi un exemple ou la balises n'est pas fermée svp que je comprenne de quoi on parle

merci pour le retour

**rodolphebrd** · 28/06/2013, 16h39

Envoyé par patricktoulon

pour les identifiants ca n'est pas trop grave ,l'ortographe n'est pas tres important on ne le vois pas ,c'est le nom d'une classe

Il ne s'agit pas d'orthographe.
Il ne faut pas confondre identifiant et classe...
Lorsque tu écris <div id="case coordonnées client"> cela suggère que tu appliques 3 identifiants à l'éléments: #case, #coordonnées et #client.

Les balises textarea doivent avoir la syntaxe suivante : <textarea>blabla</textarea>

**patricktoulon** · 28/06/2013, 16h49

Re
merci pour ce renseignement ,je l'ignorais pour le html
j'aurais du m'en douter qu'une variable quelqu'elle soit ne pouvait pas comporter plusieur mot séparé c'est pareil dans tout les languages apparament

j'ai fini par opter pour le <!doctype html> en revoyant les dimentions et coordonnées dans la macro de mon fichier excel qui m'ecrit le code

sa semble plus propre

je vais revoir aussi la fermeture des balises

je revois la copie et je reviens
merci encore

hover sur un input bouton dans le css qui ne fonctionne pas

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager