On se base sur quel code ?
Version imprimable
On se base sur quel code ?
bonjour rodolphebrd
je viens de corriger mon message et aussi mettre le code au complet de la page
j'ai un souci en ".html" c'est apeu pres bon mais en ".hta" ca deraille completement
Bonjour a tous
voila grace a jeremiel ,nosmoking ,rodolphebrd j'ai reussi a créer mon document
j'ai un tout pettit detail qui me gene l'orsque je change le format du fichier de "html" a "hta" simplement , j'ai des petits écarts d'affichages
si une âme charitable veut bien regarder le code afin de corriger sans doute quelques petites fautes par-ci par là se serait super sympa
je remercie encore jeremiel :ccool:,nosmoking :ccool:,rodolphebrd :ccool: pour m'avoir initié
dans le css ,bien pratique
voila le code de la page au complet
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
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 <!DOCTYPE HTML > <html> <head> <link rel="stylesheet" type="text/css" href="print.css" media="print"> <script type="text/javascript"> function fermer() { self.close(); } function impression(){ document.getElementById("feuille").overflow="hidden";sel.print();} </script> <script type="text/vbscript"> sub calcul(name,name2) msgbox name document. end sub </script> <style> .feuille{clear:both;margin:0px;padding:0px;float:left;width:790px;height:600px;overflow:auto;} .MON_MENU{;margin:0px;padding:0px;float:right;width:450px;height:600px;overflow:hidden;background:#9F81F7;} #entete{clear:both;margin:0px;padding:0px;float:left;width:760px;height:250px;} /******************************************************************************************************************/ /* partie gauche du haut de la feuille */ #entete-gauche{margin:0px;padding:0px;float:left;width:290px;height:250px;} #entete-gauche p {height:10px;} .sujet{margin:0px;padding:0px;width:283px;height:21px;border:1px solid #888;border-bottom:0;border-right:2px solid #0B4C5F;border-left:2px solid #0B4C5F;border-top:2px solid #0B4C5F;} .sujetD{width:200px;height:21px;border:1px solid #888;border-bottom:0;border-right:2px solid #0B4C5F;} .sujetG{width:78px;height:21px;border:1px solid #888;text-align:center;border-right:0;border-bottom:0;font-weight:bold;border-left:2px solid #0B4C5F;background:#EEF} #finsujet{border-bottom:2px solid #0B4C5F;} /* fin de partie gauche de la feuille*/ /******************************************************************************************************************/ /*Partie droite du haut de la feuille */ #entete-droite{margin:0px;padding:0px;float:right;width:335px;height:250px;} #entete-droite p {margin:0px;padding:0px;} .Tdate{float:left;width:70px;height:21px;border:1px solid #888;text-align:center;background:#EEF;font-weight:bold;} .date{float:left;width:230px;height:21px;border:1px solid #888;} #vides{visibility:hidden;width:200px;} .addr1{float:right;width:250px;height:21px;border:1px solid #888;border-bottom:0;border-top:2px solid #0B4C5F;border-right:2px solid #0B4C5F;border-left:2px solid #0B4C5F;} .addr{float:right;width:250px;height:21px;border:1px solid #888;border-bottom:0;border-right:2px solid #0B4C5F;border-left:2px solid #0B4C5F;} .CC{float:right;} .Ttel{width:60px;height:21px;border:1px solid #888;border-bottom:0;border-right:0;border-left:2px solid #0B4C5F;font-weight:bold;background:#EEF} .tel{width:187px;height:21px;border:1px solid #888;border-bottom:0;border-right:2px solid #0B4C5F} .TNClient{width:60px;height:21px;border:1px solid #888;border-bottom:2px solid #0B4C5F;border-right:0;border-left:2px solid #0B4C5F;font-weight:bold;background:#EEF} .NClient{width:187px;height:21px;border:1px solid #888;border-bottom:2px solid #0B4C5F;border-right:2px solid #0B4C5F} /*Fin de Partie droite du haut de la feuille */ /*****************************************************************************************************************/ /*Partie contenu devis*/ #contenu{clear:both;float:left;margin:0;padding:0;width:760px;height:840px;} #contenu p {margin:0;padding:0;} #contenu .titre {height:30px;border-top:2px;font-weight:bold;} #contenu input, label { margin:0; padding:0;} #contenu .titre label{ display:inline-block; height:30px; } #contenu .titre label{ background:#EEF; text-align:center;} #contenu a {margin:0; padding:0;height:30px;} #contenu a .acol_1 { width:80px;text-align: center;border-left:2px solid #888;border-top:2px solid #888;border-right:1px solid #888;border-bottom:0;} #contenu a .acol_2{ width:446px;border-top:2px solid #888;border-right:1px solid #888;border-bottom:0; border-left:0;} #contenu a .acol_3{ width:73px;text-align:center;border-top:2px solid #888;border-right:1px solid #888;border-bottom:0; border-left:0;} #contenu a .acol_4{ width:73px;text-align:center;border-top:2px solid #888;border-right:1px solid #888;border-bottom:0; border-left:0;} #contenu a .acol_5{ width:80px;text-align:center;border-top:2px solid #888;border-bottom:0; border-left:0;border-right:2px solid #888;} #contenu p {margin:0; padding:0;height:20px;} #contenu p .col_1 { height:20px;width:80px;text-align: center;border-left:2px solid #888;border-top:1px solid #888;border-right:1px solid #888;border-bottom:0;} #contenu p .col_2{ height:20px; width:446px;border-top:1px solid #888;border-right:1px solid #888;border-bottom:0; border-left:0;} #contenu p .col_3{ height:20px;width:73px;text-align:center;border-top:1px solid #888;border-right:1px solid #888;border-bottom:0; border-left:0;} #contenu p .col_4{ height:20px;width:73px;text-align:center;border-top:1px solid #888;border-right:1px solid #888;border-bottom:0; border-left:0;} #contenu p .col_5{ height:20px; width:80px;text-align:center;border-top:1px solid #888;border-bottom:0; border-left:0;border-right:2px solid #888;} #contenu p .dcol_1 { height:20px; width:80px;text-align: center;border-left:2px solid #888;border-top:1px solid #888;border-right:1px solid #888;border-bottom:2px solid #888;} #contenu p .dcol_2{ height:20px;width:446px;border-top:1px solid #888;border-right:1px solid #888;border-bottom:2px solid #888; border-left:0;} #contenu p .dcol_3{ height:20px;width:73px;text-align:center;border-top:1px solid #888;border-right:1px solid #888;border-bottom:2px solid #888; border-left:0;} #contenu p .dcol_4{ height:20px; width:73px;text-align:center;border-top:1px solid #888;border-right:1px solid #888;border-bottom:2px solid #888; border-left:0;} #contenu p .dcol_5{ height:20px;width:80px;text-align:center;border-top:1px solid #888;border-bottom:2px solid #888; border-left:0;border-right:2px solid #888;} #contenu .lignetotal{margin:0;padding:0;float:right;height:30px;} #contenu a .ttt{height:30px;width:146px;border:1px solid #888;background:#EEF; text-align:center;font-weight:bold;display:inline-block;border-left:2px solid #888;border-top:0;border-bottom:2px solid #888;} #contenu a .letotal{height:30px;width:80px;border:1px solid #888; text-align:center;border-left:0;border-right:2px solid #888;border-top:0;border-bottom:2px solid #888;} #contenu #empied{ text-align:center; margin-bottom:1em; clear:both;} .rouge{ color:#F00;} /**************************************************************************************/ /*LESBOUTONS*/ #bouton1{clear:both;float:right;width:200px;height:41px;background-color: red;color:yellow;} #bouton1:hover{background-color:yellow;color:red; font-weight:bolder; } #bouton2 {clear:both;float:right;width:200px;height:41px;background-color: orange;color:magenta;} #bouton2:hover {background-color:magenta;color:orange; font-weight:bolder;} #bouton3 {clear:both;float:right;width:200px;height:41px;background-color: green;color:red;} #bouton3:hover {background-color:red;color:green; font-weight:bolder;} #bouton4 {clear:both;float:right;width:200px;height:41px;background-color: #0101DF;color:#B40486;} #bouton4:hover {background-color:#B40486;color:#0101DF; font-weight:bolder;} #bouton5 {clear:both;float:right;width:200px;height:41px;background-color: #FF8000;color:#00BFFF;} #bouton5:hover {background-color:#00BFFF;color:#FF8000; font-weight:bolder;} 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-weight:bold } /**************************************************************************************/ </style> </head> <body> <div class="feuille"> <div id="entete"> <!-- Partie gauche de l'entete !--> <div id="entete-gauche"> <img class="logo" src="logo1.jpg" alt="Mon logo"> <p class="sujetgeneral"><input class="sujet" type="text"><input class="sujetG" type="text"value="Devis N°"><input class="sujetD" type="text"><input class="sujetG" id="finsujet"type="text"value="Object :"><input class="sujetD" id="finsujet" type="text"></p> </div> <!--Partie droite de l'entete !--> <div id="entete-droite"> <input readonly class="Tdate" type="text"value="Date :"><input class="date" type="text"> </br></br></br> <p><input class="addr1" type="text"value="-----------------------------------"></p> <p><input class="addr" type="text"value="-----------------------------------"></p> <p><input class="addr" type="text"value="-----------------------------------"></p> <p><input class="addr" type="text"value="-----------------------------------"></p> <p class="CC"><input readonly class="Ttel" type="text "value="Tel:"><input class="tel" type="text"value="__ __ __ __ __ "></p> <p class="CC"><input readonly class="TNClient" type="text "value="N° Client"><input class="NClient" type="text"value="__ __ __ __ __"></p> </div> </div> <!--fin de l'entete !--> <!--Partie contenu devis!--> <div id="contenu"> <a class="titre"><label class="acol_1">Référence</label><label class="acol_2">Désignation des travaux</label><label class="acol_3">Unité</label><label class="acol_4">T Horaire</label><label class="acol_5">Total</label></a> <p class="ligne1"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne2"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne3"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne4"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne5"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne6"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne7"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne8"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne9"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne10"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne11"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne12"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne13"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne14"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne15"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne16"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne17"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne18"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne19"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne20"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne21"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne22"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne23"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne24"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne25"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne26"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne27"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne28"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne29"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3" type="text"><input class="col_4" type="text"><input class="col_5" type="text"></p> <p class="ligne30"><input class="dcol_1" type="text"><input class="dcol_2" type="text"><input class="dcol_3" type="text"><input class="dcol_4" type="text"><input class="dcol_5" type="text"></p> <a class="lignetotal"><input readonly class="ttt"value="Total du Devis"</label><input class="letotal"type="text"></a> </br></br> <div id="empied"> <br><br><strong class="rouge">Achat des matèriaux à la charge du client.</strong> <br>TOTO-SERVICE- 277, Chemin de fond Résidence " lesPoulettes" - 83200 Toulon <br><strong>Tél : XX XX XX XX XX</strong> <br>E-mail:TOTO,service@hotmail,fr <br>Individuelle au capital de 6500 - SIRET : XXX XXX XXX XXXXX - Code APE YYYY A <br>TVA intra : TVA non applicable article 293 B du CGI </div> </div> </div> <div class="MON_MENU"> <p><input type='button' id="bouton1" value='Imprimer' onclick="impression()";return false;"></p> <p><input type='button' id="bouton2" value='Fermer'onclick="fermer()";return false;"/></p> <p><input type='button' id="bouton3" value='Nouveau' onclick="impression()";return false;"></p> <p><input type='button' id="bouton4" value='modifier'onclick="fermer()";return false;"/></p> <p><input type='button' id="bouton5" value='facturer' onclick="impression()";return false;"></p> </div> </body> </html>
merci pour le retour :ccool:
Au plaisir
Bonjour,
Tu peux enlever les préfixes à border-radius : http://caniuse.com/border-radius
S'il n'y a pas d'autre utilité que l'esthétique j'ai simplifié le menu et rajouté un margin-bottom aux input.
Les écarts proviennent d'où ?Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 .MON_MENU { float: right; } input[type=button] { display: inline-block; margin-bottom: 3px; /*rajout*/ 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 }
Avant de pouvoir comparer il te faut une structure de document correcte, et je note
pourquoi une balise A et pas un P, un LABEL fermé mais non ouvertCitation:
<a class="lignetotal"><input readonly class="ttt"value="Total du Devis"</label><input class="letotal"type="text"></a>
il y a une amuvaise position des guillemets, regarde le return false.Citation:
<p><input type='button' id="bouton1" value='Imprimer' onclick="impression()";return false;"></p>
En règle générale, il ne faut pas hésiter à valider le code.
La partie STYLE pourrait être simplifié mais bon ...;)
Une remarque quand même, pourquoi ne pas mettre tous tes boutons dans un bandeau fixe en haut de page, ou bas?
Dernier point sous IE, puisque HTA, tu peux virer tout les préfixes vendeur de tes styles.
[EDIT]Il à du trafic dans l'air, problème de synchronisation :o)[/EDIT]
Bonjour rodolphebrd
ok pour le menu je regarde ca
les ecart se font au niveau de l'entete droite dans les inputs client
quand je change l'extention en "hta" seulement ,un tout petit blanc est visible
Il y a un ecart aussi au niveau de la ligne total(derniere ligne du contenu celle du total),la aussi seulement quand je change l'extention en "hta"
sinon,la presentation resemble trait pour trait a la version excel que j'avais
bon ,le menu évolura certainement, pour le moment il y a que des boutons
mais j'arrive a les placer
merci pour le coup de main
j'aurais une autre question aussi mais je crois que ca va se passer sur un autre forum
le changement dynamique de "l'overflow: auto" en "hidden" de la "<div feuille>"
ainsi que le changement de dimension (le height plus précisément )
en cliquant sur un bouton ,a moins que l'on puisse le faire en CSS
Re
noSmoking
alors le a au leu du pc'est tout simplement parceque dans le css les p sont a 20px( les cellules) la ligne total fait 30px
comme pour simplifier jai fait
contenu p{height:20px;.........} je ne pouvait pas l'inclure
ensuite le label fermer est efectivement une erreur que j'ai corrigé
J'ai utilisé des inputs avec readonly a la places des labels car avec la meme configuration dans le css j'ai un leger décalage voir enchevêtrement des elements
voila la raison du a au lieu du p
Mais si on peut simplifier je suis preneur
car effectivement avec toute ces contraintes quand je demande un apercu avant impression ca mouline
cet argument n'est pas recevable ;)Citation:
alors le a au leu du pc'est tout simplement parceque dans le css les p sont a 20px( les cellules) la ligne total fait 30px
comme pour simplifier jai fait
contenu p{height:20px;.........} je ne pouvait pas l'inclure
:faq: http://css.developpez.com/faq/?page=liaison-xhtml
quand tu écris plusieurs fois la même chose c'est qu'il y surement moyen de créer une class intermédiaire, quitte à supprimer/redéfinir une propriété par la suite.Citation:
Mais si on peut simplifier je suis preneur
exemple
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 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>[...]</title> <style> p{ color:blue; border:1px dotted blue; line-height:2em } .p_1{ color:red; border:1px solid red; } .p_2{ line-height:4em } </style> </head> <body> <p class="p_1">Cibos vehementer vehementer solitarum quod propinquantis Isauri per solitarum quae.</p> <p class="p_2">Cibos vehementer vehementer solitarum quod propinquantis Isauri per solitarum quae.</p> <p class="p_3_">Cibos vehementer vehementer solitarum quod propinquantis Isauri per solitarum quae.</p> </body> </html>
Concernant l'espace que tu mentionnes, c'est un white-space sans entrer dans les détails, je te propose cela (à adapter) :
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
46 * { margin: 0; padding: 0; } body { margin: 1em; } input{ border:none; } /* partie gauche du haut de la feuille */ #entete-gauche { width: 290px; height: 250px; } #entete-gauche p { height: 10px; } .sujet { display:block; width: 100%; height: 21px; background:#fce; } .sujetG { height: 21px; text-align: center; font-weight: bold; background: #EEF } .sujetG { width:20%; height: 21px; display:block; float:left; } .sujetD{ width:80%; height: 21px; float:left; display:block; background: salmon; } .clear{ clear:left; }
http://codepen.io/anon/pen/oFtrbCode:
1
2
3
4
5
6
7
8
9
10
11 <div id="entete"> <div id="entete-gauche"> <img class="logo" src="logo1.jpg" alt="Mon logo"> <div class="sujetgeneral"> <input class="sujet" type="text"> <input class="sujetG" type="text"value="Devis N°"> <input class="sujetD" type="text"> <input class="sujetG clear" id="finsujet"type="text"value="Object :"> <input class="sujetD" id="finsujet" type="text"> </div> </div> </div>
Re
pour une idée plus précise voila un capture d'ecran de l'affichage du fichier quand il est en ".HTA"
pour palier au probleme je rajoute dans
ceci:Code:#contenu p{margin:0;padding:0;}
met ca me decale la derniere ligne(ligne total)Code:height:21px
tu es sûr de ton lien Rodolphe ?Citation:
Envoyé par rodolphebrd
@patricktoulon :
Je t'avais mis une esquisse http://www.developpez.net/forums/d13...s/#post7369661, elle ne convenait pas?
Palsambleu le dernier codepen a écrasé le précédent. :pingoin2:
Lien rétabli...:whistle:
Re
Nosmoking
je me suis basé sur ton esquisse pour faire le mien et pour en comprendre le fonctionnement :ccool:
la difference c'est que la mienne est dans un div la tienne prenait toute la page et je veux pas trop changer de l'original mes clients y sont habitués
j'ai quand meme tout le menu a faire :mouarf:
rodolphebrd j'essaie ta proposition :ccool:
Il te suffisais de faire une fusion des 2 sources pour obtenir une structure comme suit
Le résultat ressemble à celaCode:
1
2
3
4
5
6
7
8
9
10
11
12
13 <div id="facture"> <div id="entete"> <div id="gauche"> </div> <div id="droite"> </div> </div> <div id="contenu"> </div> </div> <div id="empied"> </div> </div>
re
il me semble que c'est apeu pres ce que j'ai fait
vu la capture d'ecran je suis bloffé,je vais revoir tout les posts
je travaille avec notepad alors soyez induljents :mouarf:
en attendant j'ai diminueé les ligne du css
il n'y a plus de "a" rien que des "p" :)
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
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 <!DOCTYPE HTML > <html> <head> <HTA:APPLICATION ApplicationName =DEVIS WindowState =maximize SCROLL =yes SHOWINTASKBAR = yes > <link rel="stylesheet" type="text/css" href="print.css" media="print"> <script type="text/javascript"> function fermer() { self.close(); } function impression(){ document.getElementById("feuille").overflow="hidden";self.print();} </script> <script type="text/vbscript"> sub calcul(elem1,elem2) document.getElementById("f1").value = elem1 + elem2 end sub </script> <style> .feuille{clear:both;margin:0px;padding:0px;float:left;width:790px;height:600px;overflow:auto;} .MON_MENU{;margin:0px;padding:0px;float:right;width:520px;height:600px;overflow:hidden;background:#9F81F7;} #entete{clear:both;margin:0px;padding:0px;float:left;width:760px;height:250px;} /******************************************************************************************************************/ /* partie gauche du haut de la feuille */ #entete-gauche{margin:0px;padding:0px;float:left;width:290px;height:250px;} #entete-gauche p {height:10px;} .sujet{margin:0px;padding:0px;width:283px;height:21px;border:1px solid #888;border-bottom:0;border-right:2px solid #0B4C5F;border-left:2px solid #0B4C5F;border-top:2px solid #0B4C5F;} .sujetD{width:200px;height:21px;border:1px solid #888;border-bottom:0;border-right:2px solid #0B4C5F;} .sujetG{width:78px;height:21px;border:1px solid #888;text-align:center;border-right:0;border-bottom:0;font-weight:bold;border-left:2px solid #0B4C5F;background:#EEF} #finsujet{border-bottom:2px solid #0B4C5F;} /* fin de partie gauche de la feuille*/ /******************************************************************************************************************/ /*Partie droite du haut de la feuille */ #entete-droite{margin:0px;padding:0px;float:right;width:335px;height:250px;} #entete-droite p {margin:0px;padding:0px;} .Tdate{float:left;width:70px;height:21px;border:1px solid #888;text-align:center;background:#EEF;font-weight:bold;} .date{float:left;width:230px;height:21px;border:1px solid #888;} #vides{visibility:hidden;width:200px;} .addr1{float:right;width:250px;height:21px;border:1px solid #888;border-bottom:0;border-top:2px solid #0B4C5F;border-right:2px solid #0B4C5F;border-left:2px solid #0B4C5F;} .addr{float:right;width:250px;height:21px;border:1px solid #888;border-bottom:0;border-right:2px solid #0B4C5F;border-left:2px solid #0B4C5F;} .CC{float:right;} .Ttel{width:60px;height:21px;border:1px solid #888;border-bottom:0;border-right:0;border-left:2px solid #0B4C5F;font-weight:bold;background:#EEF} .tel{width:187px;height:21px;border:1px solid #888;border-bottom:0;border-right:2px solid #0B4C5F} .TNClient{width:60px;height:21px;border:1px solid #888;border-bottom:2px solid #0B4C5F;border-right:0;border-left:2px solid #0B4C5F;font-weight:bold;background:#EEF} .NClient{width:187px;height:21px;border:1px solid #888;border-bottom:2px solid #0B4C5F;border-right:2px solid #0B4C5F} /*Fin de Partie droite du haut de la feuille */ /*****************************************************************************************************************/ /*Partie contenu devis*/ #contenu{clear:both;float:left;margin:0;padding:0;width:760px;height:840px;} #contenu input, label {clear:both; margin:0; padding:0;} .titre { height:30px;border-top:2px;font-weight:bold;background:#EEF; text-align:center;} .titre label{ display:inline-block; height:30px;} #contenu p {margin:0; padding:0;} .acol_1 { height:30px; width:80px;text-align: center;border-left:2px solid #888;border-top:2px solid #888;border-right:1px solid #888;border-bottom:0;} .acol_2{ height:30px; width:446px;border-top:2px solid #888;border-right:1px solid #888;border-bottom:0; border-left:0;} .acol_3_et_4{ height:30px; width:73px;text-align:center;border-top:2px solid #888;border-right:1px solid #888;border-bottom:0; border-left:0;} .acol_5{ height:30px; width:80px;text-align:center;border-top:2px solid #888;border-bottom:0; border-left:0;border-right:2px solid #888;} .col_1 { height:20px;width:80px;text-align: center;border-left:2px solid #888;border-top:1px solid #888;border-right:1px solid #888;border-bottom:0;} .col_2{ height:20px; width:446px;border-top:1px solid #888;border-right:1px solid #888;border-bottom:0; border-left:0;} .col_3_et_4{ height:20px;width:73px;text-align:center;border-top:1px solid #888;border-right:1px solid #888;border-bottom:0; border-left:0;} .col_5{ height:20px; width:80px;text-align:center;border-top:1px solid #888;border-bottom:0; border-left:0;border-right:2px solid #888;} .dcol_1 { height:20px; width:80px;text-align: center;border-left:2px solid #888;border-top:1px solid #888;border-right:1px solid #888;border-bottom:2px solid #888;} .dcol_2{ height:20px;width:446px;border-top:1px solid #888;border-right:1px solid #888;border-bottom:2px solid #888; border-left:0;} .dcol_3_et_4{ height:20px;width:73px;text-align:center;border-top:1px solid #888;border-right:1px solid #888;border-bottom:2px solid #888; border-left:0;} .dcol_5{ height:20px;width:80px;text-align:center;border-top:1px solid #888;border-bottom:2px solid #888; border-left:0;border-right:2px solid #888;} .lignetotal{margin:0;padding:0;float:right;} .ttt{height:40px;width:146px;border:1px solid #888;background:#EEF; text-align:center;font-weight:bold;display:inline-block;border-left:2px solid #888;border-top:0;border-bottom:2px solid #888;} .letotal{height:40px;width:80px;border:1px solid #888; text-align:center;border-left:0;border-right:2px solid #888;border-top:0;border-bottom:2px solid #888;} #contenu #empied{ text-align:center; margin-bottom:1em; clear:both;} .rouge{ color:#F00;} /**************************************************************************************/ /*LESBOUTONS*/ #bouton1{clear:both;float:right;width:200px;height:41px;background-color: red;color:yellow;} #bouton1:hover{background-color:yellow;color:red; font-weight:bolder; } #bouton2 {clear:both;float:right;width:200px;height:41px;background-color: orange;color:magenta;} #bouton2:hover {background-color:magenta;color:orange; font-weight:bolder;} #bouton3 {clear:both;float:right;width:200px;height:41px;background-color: green;color:red;} #bouton3:hover {background-color:red;color:green; font-weight:bolder;} #bouton4 {clear:both;float:right;width:200px;height:41px;background-color: #0101DF;color:#B40486;} #bouton4:hover {background-color:#B40486;color:#0101DF; font-weight:bolder;} #bouton5 {clear:both;float:right;width:200px;height:41px;background-color: #FF8000;color:#00BFFF;} #bouton5:hover {background-color:#00BFFF;color:#FF8000; font-weight:bolder;} .MON_MENU { float: right; } input[type=button] { display: inline-block; margin-bottom: 3px; /*rajout*/ border: 4px solid gray; 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-weight:bold } /**************************************************************************************/ </style> </head> <body> <div class="feuille"> <div id="entete"> <!-- Partie gauche de l'entete !--> <div id="entete-gauche"> <img class="logo" src="logo1.jpg" alt="Mon logo"> <p class="sujetgeneral"><input class="sujet" type="text"><input class="sujetG" type="text"value="Devis N°"><input class="sujetD" type="text"><input class="sujetG" id="finsujet"type="text"value="Object :"><input class="sujetD" id="finsujet" type="text"></p> </div> <!--Partie droite de l'entete !--> <div id="entete-droite"> <input readonly class="Tdate" type="text"value="Date :"><input class="date" type="text"> </br></br></br> <p><input class="addr1" type="text"value="-----------------------------------"></p> <p><input class="addr" type="text"value="-----------------------------------"></p> <p><input class="addr" type="text"value="-----------------------------------"></p> <p><input class="addr" type="text"value="-----------------------------------"></p> <p class="CC"><input readonly class="Ttel" type="text "value="Tel:"><input class="tel" type="text"value="__ __ __ __ __ "></p> <p class="CC"><input readonly class="TNClient" type="text "value="N° Client"><input class="NClient" type="text"value="__ __ __ __ __"></p> </div> </div> <!--fin de l'entete !--> <!--Partie contenu devis!--> <div id="contenu"> <p class="titre"><label class="acol_1">Référence</label><label class="acol_2">Désignation des travaux</label><label class="acol_3_et_4">Unité</label><label class="acol_3_et_4">T Horaire</label><label class="acol_5">Total</label></p> <p class="ligne1"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"id="d1"onchange="calcul(this.value,e1.value)"><input class="col_3_et_4" id="e1"type="text"><input class="col_5" id="f1" type="text"></p> <p class="ligne2"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne3"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne4"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne5"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne6"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne7"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne8"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne9"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne10"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne11"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne12"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne13"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne14"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne15"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne16"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne17"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne18"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne19"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne20"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne21"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne22"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne23"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne24"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne25"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne26"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne27"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne28"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne29"><input class="col_1" type="text"><input class="col_2" type="text"><input class="col_3_et_4" type="text"><input class="col_3_et_4" type="text"><input class="col_5" type="text"></p> <p class="ligne30"><input class="dcol_1" type="text"><input class="dcol_2" type="text"><input class="dcol_3_et_4" type="text"><input class="dcol_3_et_4" type="text"><input class="dcol_5" type="text"></p> <p class="lignetotal"><input readonly class="ttt"value="Total du Devis"><input class="letotal"type="text"></p> </br></br> <div id="empied"> <br><br><strong class="rouge">Achat des matèriaux à la charge du client.</strong> <br>TOTO-SERVICE- 277, Chemin de fond Résidence " lesPoulettes" - 83200 Toulon <br><strong>Tél : XX XX XX XX XX</strong> <br>E-mail:TOTO,service@hotmail,fr <br>Individuelle au capital de 6500 - SIRET : XXX XXX XXX XXXXX - Code APE YYYY A <br>TVA intra : TVA non applicable article 293 B du CGI </div> </div> </div> <!-- PARTIE POUR CREATION DU MENU !--> <div class="MON_MENU"> <p><input type='button' id="bouton1" value='Imprimer' onclick="impression()";return false;"></p> <p><input type='button' id="bouton2" value='Fermer'onclick="fermer()";return false;"/></p> <p><input type='button' id="bouton3" value='Nouveau' onclick="impression()";return false;"></p> <p><input type='button' id="bouton4" value='modifier'onclick="fermer()";return false;"/></p> <p><input type='button' id="bouton5" value='facturer' onclick="impression()";return false;"></p> </div> </body> </html>
Je viens de tester en mode HTA, et effectivement il y a une meta qu'il ne faut pas oublier, ça change complétement le rendu de certains éléments
Code:<meta http-equiv="x-ua-compatible" content="ie=8">
:fleche: http://msdn.microsoft.com/en-us/libr...#Compatibility
bonjour NoSmoking
et bien voila la rien a dire il me fallait le bon meta
le resultat est nickel
je regarde toujours pour reprendre tes deux esquisses(entete,contenu)
mais j'ai du mal a structurer
car la structure est tres importante pour moi car il y aura une autre application en vb qui utilise la librairie IE qui modifira ou recuperera des valeur dans le hta/html
donc en gros
la structure
merci encore pour le temps que tu passe a mon projet:ccool: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 <div class="feuille"> <div id= "entete"> <div id= "entetegauche"> ............... ................ </div> <div id= "entetedroite" .................. .................... </div> </div> <div id="contenu"> ......... .............. ............... .............. </div> <div id="empied"> .............. ............... </div> </div> /* le menu ne fait pas partie de la class feuille*/ <div id="MON_MENU"> ......... ............ </div>
Re
Bon apres avoir suivi vos conseils
je cherche a reduire le code du CSSet je pense avoir reussi au niveau de la grille de la div "contenu"
en effet j'ai revu les esquisses de SnoMoking et j'ai suivi les conseils de rodolphebrd c'est a dire attribuer plusieur class a un meme élément
ca reduit de beaucoup le css a ce niveau
avec le bon meta le resultat est le meme en html ou hta (nickel!!):ccool:
j'ai un tout petit souci au niveau de la ligne total(decalage des deux cellules)
voila le résultat une idée???
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
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 <!DOCTYPE HTML > <html> <head> <meta http-equiv="x-ua-compatible" content="ie=9"> <title> DEVIS </title> <style> html, body{ font-family:Verdana; font-size:100%; margin:0; padding:0;} #facture{ clear:both;font-family:Verdana; font-size:0.8em; width:767px; height:1090px; margin:0; padding0;clear:both;border:1px solid red;}/**/ #entete{width:765px;height:250px;border:1px solid green} #entetegauche{float:left;width:280px;height:249px; border:1px solid magenta;} .sujet{width:99%; border:1px solid #888;height:21px;} .sujetG{width:28%; border:1px solid #888;height:21px;} .sujetD{width:69%; border:1px solid #888;height:21px;} #contenu{clear:both;} #contenu .deb{border-top:2px solid #888;} #contenu p,#contenu input,#contenu label{margin:0; padding:0; display:inline-block; } #contenu label{border:1px solid #888; border-left:0; border-bottom:0; background:#EEF; text-align:center;} #contenu input {height:20px; border:1px solid #888;border-left:0; border-bottom:0;text-align:center; font-family:Verdana; font-size:15px;} #contenu .col_1{width:80px; border-left:2px solid #888;} #contenu .col_2{width:452px;text-align:left;} #contenu .col_3_et_4{width:73px;} #contenu .col_5{width:80px;border-right:2px solid #888;} #contenu .ligne31{clear:both;float:right; margin:0; padding0;} /* dernière ligne de saisie */ #contenu .fin{border-bottom:2px solid #888;} #contenu .ttotal{width:250px;border:2px solid #888; width:150px;} #contenu .letotal{width:80px;border:2px solid #888;} #contenu .lab{height:35px;font-weight:bold;text-align:center;} #empied{ text-align:center; margin-bottom:1em; clear:both;} .rouge{ color:#F00;} </style> </head> <body> <div id="facture"> <div id="entete"> <div id="entetegauche"> <img class="logo" src="logo1.jpg" alt="Mon logo"> </br></br> <input class="sujet" type="text"> <input class="sujetG"type="text"value="Devis N°"><input class="sujetD" type="text"> <input class="sujetG" id="finsujet"type="text"value="Object :"><input class="sujetD" id="finsujet" type="text"> </div> </div> <div id="contenu"> <p><label class="col_1 lab deb ">Référence</label><label class="col_2 lab deb">Désignation des travaux</label><label class="col_3_et_4 lab deb">Unité</label><label class="col_3_et_4 lab deb">T-horaire</label><label class="col_5 lab deb ">Total</label></p> <p class=ligne1"><input class="col_1"id="A1" type="text"><input class="col_2" id="b1"type="text"><input class="col_3_et_4" id="c1" type="text"><input class="col_3_et_4" id="d1"type="text"><input class="col_5" id="e1" type="text"></p> <p class=ligne2"><input class="col_1"id="A2" type="text"><input class="col_2" id="b2"type="text"><input class="col_3_et_4" id="c2" type="text"><input class="col_3_et_4" id="d2" type="text"><input class="col_5" id="e2" type="text"></p> <p class=ligne3"><input class="col_1" id="A3"type="text"><input class="col_2" id="b3"type="text"><input class="col_3_et_4" id="c3" type="text"><input class="col_3_et_4" id="d3" type="text"><input class="col_5" id="e3" type="text"></p> <p class=ligne4"><input class="col_1" id="A4"type="text"><input class="col_2" id="b4"type="text"><input class="col_3_et_4" id="c4" type="text"><input class="col_3_et_4" id="d4" type="text"><input class="col_5" id="e4" type="text"></p> <p class=ligne5"><input class="col_1" id="A5"type="text"><input class="col_2"id="b5" type="text"><input class="col_3_et_4" id="c5" type="text"><input class="col_3_et_4" id="d5"type="text"><input class="col_5" id="e5" type="text"></p> <p class=ligne6"><input class="col_1" id="A6"type="text"><input class="col_2" id="b6"type="text"><input class="col_3_et_4" id="c6" type="text"><input class="col_3_et_4" id="d6"type="text"><input class="col_5" id="e6" type="text"></p> <p class=ligne7"><input class="col_1"id="A7" type="text"><input class="col_2" id="b7"type="text"><input class="col_3_et_4" id="c7" type="text"><input class="col_3_et_4" id="d7"type="text"><input class="col_5" id="e7" type="text"></p> <p class=ligne8"><input class="col_1" id="A8"type="text"><input class="col_2" id="b8"type="text"><input class="col_3_et_4" id="c8" type="text"><input class="col_3_et_4" id="d8"type="text"><input class="col_5" id="e8" type="text"></p> <p class=ligne9"><input class="col_1" id="A9"type="text"><input class="col_2" id="b9"type="text"><input class="col_3_et_4" id="c9" type="text"><input class="col_3_et_4" id="d9"type="text"><input class="col_5" id="e9" type="text"></p> <p class=ligne10"><input class="col_1" id="A10"type="text"><input class="col_2" id="b10"type="text"><input class="col_3_et_4" id="c10" type="text"><input class="col_3_et_4" id="d10"type="text"><input class="col_5" id="e10" type="text"></p> <p class=ligne11"><input class="col_1" id="A11"type="text"><input class="col_2" id="b11"type="text"><input class="col_3_et_4" id="c11" type="text"><input class="col_3_et_4" id="d11"type="text"><input class="col_5" id="e11" type="text"></p> <p class=ligne12"><input class="col_1"id="A12" type="text"><input class="col_2" id="b12"type="text"><input class="col_3_et_4" id="c12" type="text"><input class="col_3_et_4" id="d12"type="text"><input class="col_5" id="e12" type="text"></p> <p class=ligne13"><input class="col_1"id="A13" type="text"><input class="col_2" id="b13"type="text"><input class="col_3_et_4" id="c13" type="text"><input class="col_3_et_4" id="d13"type="text"><input class="col_5" id="e13" type="text"></p> <p class=ligne14"><input class="col_1" id="A14"type="text"><input class="col_2" id="b14"type="text"><input class="col_3_et_4" id="c14" type="text"><input class="col_3_et_4" id="d14"type="text"><input class="col_5" id="e14" type="text"></p> <p class=ligne15"><input class="col_1" id="A15"type="text"><input class="col_2" id="b15"type="text"><input class="col_3_et_4" id="c15" type="text"><input class="col_3_et_4" id="d15"type="text"><input class="col_5" id="e15" type="text"></p> <p class=ligne16"><input class="col_1" id="A16"type="text"><input class="col_2" id="b16"type="text"><input class="col_3_et_4" id="c16" type="text"><input class="col_3_et_4" id="d16"type="text"><input class="col_5" id="e16" type="text"></p> <p class=ligne17"><input class="col_1" id="A17"type="text"><input class="col_2" id="b17"type="text"><input class="col_3_et_4" id="c17" type="text"><input class="col_3_et_4" id="d17"type="text"><input class="col_5" id="e17" type="text"></p> <p class=ligne18"><input class="col_1" id="A18"type="text"><input class="col_2" id="b18"type="text"><input class="col_3_et_4" id="c18" type="text"><input class="col_3_et_4" id="d18"type="text"><input class="col_5" id="e18" type="text"></p> <p class=ligne19"><input class="col_1" id="A19"type="text"><input class="col_2" id="b19"type="text"><input class="col_3_et_4" id="c19" type="text"><input class="col_3_et_4" id="d19"type="text"><input class="col_5" id="e19" type="text"></p> <p class=ligne20"><input class="col_1" id="A20"type="text"><input class="col_2" id="b20"type="text"><input class="col_3_et_4" id="c20" type="text"><input class="col_3_et_4" id="d20"type="text"><input class="col_5" id="e20" type="text"></p> <p class=ligne21"><input class="col_1" id="A21"type="text"><input class="col_2"id="b21" type="text"><input class="col_3_et_4" id="c21" type="text"><input class="col_3_et_4" id="d21"type="text"><input class="col_5" id="e21" type="text"></p> <p class=ligne22"><input class="col_1" id="A22"type="text"><input class="col_2" id="b22"type="text"><input class="col_3_et_4" id="c22" type="text"><input class="col_3_et_4" id="d22"type="text"><input class="col_5" id="e22" type="text"></p> <p class=ligne23"><input class="col_1" id="A23"type="text"><input class="col_2" id="b23"type="text"><input class="col_3_et_4" id="c23" type="text"><input class="col_3_et_4" id="d23"type="text"><input class="col_5" id="e23" type="text"></p> <p class=ligne24"><input class="col_1" id="A24"type="text"><input class="col_2" id="b24"type="text"><input class="col_3_et_4" id="c24" type="text"><input class="col_3_et_4" id="d24"type="text"><input class="col_5" id="e24" type="text"></p> <p class=ligne25"><input class="col_1" id="A25"type="text"><input class="col_2" id="b25"type="text"><input class="col_3_et_4" id="c25" type="text"><input class="col_3_et_4" id="d25"type="text"><input class="col_5" id="e25" type="text"></p> <p class=ligne26"><input class="col_1" id="A26"type="text"><input class="col_2" id="b26"type="text"><input class="col_3_et_4" id="c26" type="text"><input class="col_3_et_4" id="d26"type="text"><input class="col_5" id="e26" type="text"></p> <p class=ligne27"><input class="col_1" id="A27"type="text"><input class="col_2"id="b27" type="text"><input class="col_3_et_4" id="c27" type="text"><input class="col_3_et_4" id="d27"type="text"><input class="col_5" id="e27" type="text"></p> <p class=ligne28"><input class="col_1" id="A28"type="text"><input class="col_2" id="b28"type="text"><input class="col_3_et_4" id="c28" type="text"><input class="col_3_et_4" id="d28"type="text"><input class="col_5" id="e28" type="text"></p> <p class=ligne29"><input class="col_1" id="A29"type="text"><input class="col_2" id="b29"type="text"><input class="col_3_et_4" id="c29" type="text"><input class="col_3_et_4" id="d29"type="text"><input class="col_5" id="e29" type="text"></p> <p class="ligne30"><input class="col_1 fin" id="A30"type="text"><input class="col_2 fin" id="b30"type="text"><input class="col_3_et_4 fin" id="c30" type="text"><input class="col_3_et_4 fin" id="d30"type="text"><input class="col_5 fin" id="30"type="text"></p> </br> <p class="ligne31"><label class="ttotal lab">Total Devis</label><input class="letotal lab" type="text"></p> </div> <div id="empied"> <br><strong class="rouge">Achat des matèriaux à la charge du client.</strong> <br>TOTO-SERVICE- 277, Chemin de fond Résidence " lesPoulettes" - 83200 Toulon <br><strong>Tél : 05 45 78 95 56</strong> <br>E-mail:TOTO,service@hotmail,fr <br>Individuelle au capital de 6500 - SIRET : XXX XXX XXX XXXXX - Code APE YYYY A <br>TVA intra : TVA non applicable article 293 B du CGI </div> </div> </body> </html>
Attention aux doubles déclarations de largeur....^^Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 #contenu .ligne31{ float:right; } #contenu .ttotal{ float: left; display: block; width: 146px; border-top: 0px; border-right: 1px solid #888; border-bottom: 2px solid #888; border-left: 2px solid #888; } #contenu .letotal{ float: left; display: block; width: 80px; margin-right:1px; border-top: 0px; border-right: 2px solid #888; border-bottom: 2px solid #888; border-left: 0px; }
Bonjour rodolphebrd
oui je m'en etait appercu apres pour les doubles declarations de largeur
je fini par ne plus rien voir :mouarf:
je m'etait appercu aussi que je ne gerai pas la class ligne31 seulement ces elements
bon je regarde ton exemple et j'adapte
merci a toi :ccool:
que pense tu du css pour la div "contenu" ?? peut on reduire encore plus :P
je pense que oui au niveau de la gestion des labels/inputs
merci pour le retour
Qu'entends-tu par réduire la div "contenu" ? S'il est question de largeur alors oui.
Attention à l'encodage (je sais je me répète) car regarde le résultat Pièce jointe 122760
Re
je viens de voir ta capture
je pense que tu fait allusion au meta (pour les caracteres speciaux:accents,etc...)
ma question:peux t on mettre plusieurs metas dans une page html
et non quand je parlais de reduction je parlais de reduction du code css pour le contenu
merci encore
Dans ton cas tu peux rajouter:
Code:<meta charset="UTF-8">
Re
le voila fini comme je veux et nickel sans les fonctions
merci pour le coup de main a: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
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 <!DOCTYPE HTML > <html> <head> <meta http-equiv="x-ua-compatible" content="ie=9"> <meta charset="UTF-8"> <title> DEVIS </title> <style> html, body{ font-family:Verdana; font-size:100%; margin:0; padding:0;} #facture{ clear:both;font-family:Verdana; font-size:0.8em; width:790px; height:600px; margin:0; padding0;clear:both;overflow:auto}/*border:1px solid red*/ #entete{width:765px;height:250px;}/*border:1px solid green*/ #entetegauche{float:left;width:280px;height:249px;}/* border:1px solid magenta;*/ .sujet{width:273px; border:1px solid #888;height:21px;border-bottom: 0;border-right:2px solid #888;border-left:2px solid #888;} .sujetG{width:80px; border:1px solid #888;height:21px;border-bottom: 0;border-right:0;border-left:2px solid #888;} .sujetD{width:190px; border:1px solid #888;height:21px;border-bottom: 0;border-right:2px solid #888;} .haut{border-top:2px solid #888;} .bas{border-bottom:2px solid #888;} #entetedroite{float:right;width:400px;height:249px;}/* border:1px solid orange;*/ .lignedate{clear:both;float:left;} .tdate{float:left;border-bottom:2px solid #888;display: block;width: 60px;border-top: 2px solid #888;border-left:2px solid #888;height:22px} .ladate{float:left;border-bottom:2px solid #888;display: block;width: 170px;border-top: 2px solid #888;border-right:2px solid #888;} .addr{clear:both;float:right;height21px;width:260px;border-right:2px solid #888;border-left:2px solid #888;;} .CC{float:right;clear:both;} .titreC{width:80px;border-left:2px solid #888;} .NClient{width:177px;border-right:2px solid #888} .espace{visibility:hidden;width:5px;} #entetedroite p{margin:0;padding:0;} #contenu{clear:both;} #contenu .deb{border-top:2px solid #888;} #contenu p,#contenu input,#contenu label{margin:0; padding:0; display:inline-block; } label{border:1px solid #888; border-left:0; border-bottom:0; background:#EEF; text-align:center;} input {height:20px; border:1px solid #888;border-left:0; border-bottom:0;text-align:center; font-family:Verdana; font-size:15px;} #contenu .col_1{width:80px; border-left:2px solid #888;} #contenu .col_2{width:452px;text-align:left;} #contenu .col_3_et_4{width:73px;} #contenu .col_5{width:80px;border-right:2px solid #888;} /* dernière ligne de saisie */ #contenu .fin{border-bottom:2px solid #888;} #contenu .ligne31{clear:both;margin:0;padding:0;float:right;} #contenu .ttotal{float: left;display: block;width: 146px;border-top: 0px;border-right: 1px solid #888;border-left: 2px solid #888;} #contenu .letotal{float: left;display: block;width: 80px; margin-right:1px;border-top: 0px;border-right: 2px solid #888;border-left: 0px;} #contenu .lab{height:35px;font-weight:bold;text-align:center;} #empied{ text-align:center; margin-bottom:1em; clear:both;} .rouge{ color:#F00;} </style> </head> <body> <div id="facture"> <div id="entete"> <div id="entetegauche"> <img class="logo" src="logo1.jpg" alt="Mon logo"> </br></br> <input class="sujet haut" type="text"> <input class="sujetG"type="text"value="Devis N°"><input class="sujetD" id="numdevis"type="text"> <input class="sujetG bas" id="finsujet"type="text"value="Object :"><input class="sujetD bas" id="objet" type="text"> </div> <div id="entetedroite"> <p class="lignedate"><label class="tdate">Date :</label><input class="ladate" type="text"></p> </br></br></br></br> <p><input class="addr haut" id="address1" type="text"value="-----------------------------------"></p> <p><input class="addr" id="address2" type="text"value="-----------------------------------"></p> <p><input class="addr" id="address3" type="text"value="-----------------------------------"></p> <p><input class="addr "id="address4" type="text"value="-----------------------------------"></p> <p class="CC"><input readonly class="titreC" type="text "value="Tel:"><input class="NClient" id="telclient"type="text"value="__ __ __ __ __ "></p> <p class="CC"><input readonly class="titreC bas" type="text "value="N° Client"><input class="NClient bas" id="numclient"type="text"value="__ __ __ __ __"></p> </div> </div> <div id="contenu"> <p><label class="col_1 lab deb ">Référence</label><label class="col_2 lab deb">Désignation des travaux</label><label class="col_3_et_4 lab deb">Unité</label><label class="col_3_et_4 lab deb">T-horaire</label><label class="col_5 lab deb ">Total</label></p> <p class=ligne1"><input class="col_1"id="A1" type="text"><input class="col_2" id="b1"type="text"><input class="col_3_et_4" id="c1" type="text"><input class="col_3_et_4" id="d1"type="text"><input class="col_5" id="e1" type="text"></p> <p class=ligne2"><input class="col_1"id="A2" type="text"><input class="col_2" id="b2"type="text"><input class="col_3_et_4" id="c2" type="text"><input class="col_3_et_4" id="d2" type="text"><input class="col_5" id="e2" type="text"></p> <p class=ligne3"><input class="col_1" id="A3"type="text"><input class="col_2" id="b3"type="text"><input class="col_3_et_4" id="c3" type="text"><input class="col_3_et_4" id="d3" type="text"><input class="col_5" id="e3" type="text"></p> <p class=ligne4"><input class="col_1" id="A4"type="text"><input class="col_2" id="b4"type="text"><input class="col_3_et_4" id="c4" type="text"><input class="col_3_et_4" id="d4" type="text"><input class="col_5" id="e4" type="text"></p> <p class=ligne5"><input class="col_1" id="A5"type="text"><input class="col_2" id="b5" type="text"><input class="col_3_et_4" id="c5" type="text"><input class="col_3_et_4" id="d5"type="text"><input class="col_5" id="e5" type="text"></p> <p class=ligne6"><input class="col_1" id="A6"type="text"><input class="col_2" id="b6"type="text"><input class="col_3_et_4" id="c6" type="text"><input class="col_3_et_4" id="d6"type="text"><input class="col_5" id="e6" type="text"></p> <p class=ligne7"><input class="col_1"id="A7" type="text"><input class="col_2" id="b7"type="text"><input class="col_3_et_4" id="c7" type="text"><input class="col_3_et_4" id="d7"type="text"><input class="col_5" id="e7" type="text"></p> <p class=ligne8"><input class="col_1" id="A8"type="text"><input class="col_2" id="b8"type="text"><input class="col_3_et_4" id="c8" type="text"><input class="col_3_et_4" id="d8"type="text"><input class="col_5" id="e8" type="text"></p> <p class=ligne9"><input class="col_1" id="A9"type="text"><input class="col_2" id="b9"type="text"><input class="col_3_et_4" id="c9" type="text"><input class="col_3_et_4" id="d9"type="text"><input class="col_5" id="e9" type="text"></p> <p class=ligne10"><input class="col_1" id="A10"type="text"><input class="col_2" id="b10"type="text"><input class="col_3_et_4" id="c10" type="text"><input class="col_3_et_4" id="d10"type="text"><input class="col_5" id="e10" type="text"></p> <p class=ligne11"><input class="col_1" id="A11"type="text"><input class="col_2" id="b11"type="text"><input class="col_3_et_4" id="c11" type="text"><input class="col_3_et_4" id="d11"type="text"><input class="col_5" id="e11" type="text"></p> <p class=ligne12"><input class="col_1"id="A12" type="text"><input class="col_2" id="b12"type="text"><input class="col_3_et_4" id="c12" type="text"><input class="col_3_et_4" id="d12"type="text"><input class="col_5" id="e12" type="text"></p> <p class=ligne13"><input class="col_1"id="A13" type="text"><input class="col_2" id="b13"type="text"><input class="col_3_et_4" id="c13" type="text"><input class="col_3_et_4" id="d13"type="text"><input class="col_5" id="e13" type="text"></p> <p class=ligne14"><input class="col_1" id="A14"type="text"><input class="col_2" id="b14"type="text"><input class="col_3_et_4" id="c14" type="text"><input class="col_3_et_4" id="d14"type="text"><input class="col_5" id="e14" type="text"></p> <p class=ligne15"><input class="col_1" id="A15"type="text"><input class="col_2" id="b15"type="text"><input class="col_3_et_4" id="c15" type="text"><input class="col_3_et_4" id="d15"type="text"><input class="col_5" id="e15" type="text"></p> <p class=ligne16"><input class="col_1" id="A16"type="text"><input class="col_2" id="b16"type="text"><input class="col_3_et_4" id="c16" type="text"><input class="col_3_et_4" id="d16"type="text"><input class="col_5" id="e16" type="text"></p> <p class=ligne17"><input class="col_1" id="A17"type="text"><input class="col_2" id="b17"type="text"><input class="col_3_et_4" id="c17" type="text"><input class="col_3_et_4" id="d17"type="text"><input class="col_5" id="e17" type="text"></p> <p class=ligne18"><input class="col_1" id="A18"type="text"><input class="col_2" id="b18"type="text"><input class="col_3_et_4" id="c18" type="text"><input class="col_3_et_4" id="d18"type="text"><input class="col_5" id="e18" type="text"></p> <p class=ligne19"><input class="col_1" id="A19"type="text"><input class="col_2" id="b19"type="text"><input class="col_3_et_4" id="c19" type="text"><input class="col_3_et_4" id="d19"type="text"><input class="col_5" id="e19" type="text"></p> <p class=ligne20"><input class="col_1" id="A20"type="text"><input class="col_2" id="b20"type="text"><input class="col_3_et_4" id="c20" type="text"><input class="col_3_et_4" id="d20"type="text"><input class="col_5" id="e20" type="text"></p> <p class=ligne21"><input class="col_1" id="A21"type="text"><input class="col_2" id="b21" type="text"><input class="col_3_et_4" id="c21" type="text"><input class="col_3_et_4" id="d21"type="text"><input class="col_5" id="e21" type="text"></p> <p class=ligne22"><input class="col_1" id="A22"type="text"><input class="col_2" id="b22"type="text"><input class="col_3_et_4" id="c22" type="text"><input class="col_3_et_4" id="d22"type="text"><input class="col_5" id="e22" type="text"></p> <p class=ligne23"><input class="col_1" id="A23"type="text"><input class="col_2" id="b23"type="text"><input class="col_3_et_4" id="c23" type="text"><input class="col_3_et_4" id="d23"type="text"><input class="col_5" id="e23" type="text"></p> <p class=ligne24"><input class="col_1" id="A24"type="text"><input class="col_2" id="b24"type="text"><input class="col_3_et_4" id="c24" type="text"><input class="col_3_et_4" id="d24"type="text"><input class="col_5" id="e24" type="text"></p> <p class=ligne25"><input class="col_1" id="A25"type="text"><input class="col_2" id="b25"type="text"><input class="col_3_et_4" id="c25" type="text"><input class="col_3_et_4" id="d25"type="text"><input class="col_5" id="e25" type="text"></p> <p class=ligne26"><input class="col_1" id="A26"type="text"><input class="col_2" id="b26"type="text"><input class="col_3_et_4" id="c26" type="text"><input class="col_3_et_4" id="d26"type="text"><input class="col_5" id="e26" type="text"></p> <p class=ligne27"><input class="col_1" id="A27"type="text"><input class="col_2" id="b27" type="text"><input class="col_3_et_4" id="c27" type="text"><input class="col_3_et_4" id="d27"type="text"><input class="col_5" id="e27" type="text"></p> <p class=ligne28"><input class="col_1" id="A28"type="text"><input class="col_2" id="b28"type="text"><input class="col_3_et_4" id="c28" type="text"><input class="col_3_et_4" id="d28"type="text"><input class="col_5" id="e28" type="text"></p> <p class=ligne29"><input class="col_1" id="A29"type="text"><input class="col_2" id="b29"type="text"><input class="col_3_et_4" id="c29" type="text"><input class="col_3_et_4" id="d29"type="text"><input class="col_5" id="e29" type="text"></p> <p class="ligne30"><input class="col_1 fin" id="A30"type="text"><input class="col_2 fin" id="b30"type="text"><input class="col_3_et_4 fin" id="c30" type="text"><input class="col_3_et_4 fin" id="d30"type="text"><input class="col_5 fin" id="30"type="text"></p> </br> <p class="ligne31"><label class="ttotal lab fin">Total Devis</label><input class="letotal lab fin" type="text"><label class="espace">-</label></p> </div> <div id="empied"> <br><strong class="rouge">Achat des matèriaux à la charge du client.</strong> <br>TOTO-SERVICE- 277, Chemin de fond Résidence " lesPoulettes" - 83200 Toulon <br><strong>Tél : 05 45 78 95 56</strong> <br>E-mail:TOTO,service@hotmail,fr <br>Individuelle au capital de 6500 - SIRET : XXX XXX XXX XXXXX - Code APE YYYY A <br>TVA intra : TVA non applicable article 293 B du CGI </div> </div> </body> </html>
NoSmoking,rodolphebrd,jeremieL :ccool::ccool::ccool:
Re
alors la je comprend plus
j'essaie de remettre mon menu et la je n'arrive plus a le mettre a droite de l'ecran
j'ajoute ceci en haut de declaration css
et ceci juste audessus de la fermeture de bodyCode:
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 .MON_MENU{clear:both;margin:0px;padding:0px;float:right;width:450px;height:600px;overflow:hidden;background:#9F81F7;} /**************************************************************************************/ /*LESBOUTONS*/ #bouton1{clear:both;float:right;width:200px;height:41px;background-color: red;color:yellow;} #bouton1:hover{background-color:yellow;color:red; font-weight:bolder; } #bouton2 {clear:both;float:right;width:200px;height:41px;background-color: orange;color:magenta;} #bouton2:hover {background-color:magenta;color:orange; font-weight:bolder;} #bouton3 {clear:both;float:right;width:200px;height:41px;background-color: green;color:red;} #bouton3:hover {background-color:red;color:green; font-weight:bolder;} #bouton4 {clear:both;float:right;width:200px;height:41px;background-color: #0101DF;color:#B40486;} #bouton4:hover {background-color:#B40486;color:#0101DF; font-weight:bolder;} #bouton5 {clear:both;float:right;width:200px;height:41px;background-color: #FF8000;color:#00BFFF;} #bouton5:hover {background-color:#00BFFF;color:#FF8000; font-weight:bolder;} input[type=button] { display: inline-block; margin-bottom: 3px; /*rajout*/ border: 4px solid gray; 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-weight:bold } /**************************************************************************************/
la je comprend plus rien surtout que je n'ai rien changé:mouarf::aie::mouarf:Code:
1
2
3
4
5
6
7 <div class="MON_MENU"> <p><input type='button' id="bouton1" value='Imprimer' onclick="impression()";return false;"></p> <p><input type='button' id="bouton2" value='Fermer'onclick="fermer()";return false;"/></p> <p><input type='button' id="bouton3" value='Nouveau' onclick="impression()";return false;"></p> <p><input type='button' id="bouton4" value='modifier'onclick="fermer()";return false;"/></p> <p><input type='button' id="bouton5" value='facturer' onclick="impression()";return false;"></p> </div>
une idée ?????
Je rectifie le code que je t'ai donné tout à l'heure car je l'ai fait sans redimensionner ma fenêtre et je m'aperçois que tu n'as pas de largeur de définie.
1 - Donner une largeur de 766 px aux DIV contenu et empied;
2 - créer un élément supplémentaire (class="totaux") comme suit :
avec le code CSS correspondant :Code:<p class="ligne31"><div class="totaux"><label class="ttotal lab">Total Devis</label><input class="letotal lab" type="text"></div></p>
La classe ligne31 ne sert que de conteneur et n'a plus de style je l'ai laissée pour te montrer qu'elle était vide...Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 #contenu .ligne31 {} #contenu .ttotal { float: left; display: block; width: 146px; border-top: 0px solid #888; border-right: 1px solid #888; border-bottom: 2px solid #888; border-left: 2px solid #888; } #contenu .letotal { float: left; display: block; width: 80px; border-top: 0px; border-right: 2px solid #888; border-bottom: 2px solid #888; border-left: 0px; } .totaux{ float:right; }
Pour le menu :
• créer un <div id="wrapper"> qui englobe tout le code compris entre <body> et </body>.
Dans le code CSS du menu j'ai enlevé ce qui ne paraissait pas utile:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13 #wrapper{ width:1216px; position:relative; } .MON_MENU{ padding:0px; width:450px; height:600px; background:#9F81F7; position:absolute; top:19px; right:0 }
Re
je viens de faire la modif au sujet de la class totaux et ca deraille completement sa se chevauche et les dimensions sont pas bonnes
pour le menu je constate que tu utilise "position:absolute"
j'esperais que l'on pouvait le faire en laissant le flux comme dans l'ancien exemple que j'ai gardé d'ailleurs
j'essaie le menu et je reviens :ccool:
Si tu appliques bien ce que je t'ai donné il n'y a pas de problème ;)Citation:
Envoyé par patricktoulon
Je ne pars que du code que tu fournis, rien d'autre.
Re
voila le code modifier selon tes instructions
j'ai mis en commentaire css et html les lignes d'origines
il y a aussi le menu comme ca tu a toutCode:
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 <!DOCTYPE HTML > <html> <head> <meta http-equiv="x-ua-compatible" content="ie=9"> <meta charset="UTF-8"> <title> DEVIS </title> <style> html, body{ font-family:Verdana; font-size:100%; margin:0; padding:0;} .facture{ clear:both;font-family:Verdana; font-size:0.8em; width:790px; height:600px; margin:0; padding0;clear:both;overflow:auto}/*border:1px solid red*/ #entete{width:765px;height:250px;}/*border:1px solid green*/ #entetegauche{float:left;width:280px;height:249px;}/* border:1px solid magenta;*/ .sujet{width:273px; border:1px solid #888;height:21px;border-bottom: 0;border-right:2px solid #888;border-left:2px solid #888;} .sujetG{width:80px; border:1px solid #888;height:21px;border-bottom: 0;border-right:0;border-left:2px solid #888;} .sujetD{width:190px; border:1px solid #888;height:21px;border-bottom: 0;border-right:2px solid #888;} .haut{border-top:2px solid #888;} .bas{border-bottom:2px solid #888;} #entetedroite{float:right;width:400px;height:249px;}/* border:1px solid orange;*/ .lignedate{clear:both;float:left;} .tdate{float:left;border-bottom:2px solid #888;display: block;width: 60px;border-top: 2px solid #888;border-left:2px solid #888;height:22px} .ladate{float:left;border-bottom:2px solid #888;display: block;width: 170px;border-top: 2px solid #888;border-right:2px solid #888;} .addr{clear:both;float:right;height21px;width:260px;border-right:2px solid #888;border-left:2px solid #888;;} .CC{float:right;clear:both;} .titreC{width:80px;border-left:2px solid #888;} .NClient{width:177px;border-right:2px solid #888} .espace{visibility:hidden;width:5px;} #entetedroite p{margin:0;padding:0;} #contenu{clear:both;} #contenu .deb{border-top:2px solid #888;} #contenu p,#contenu input,#contenu label{margin:0; padding:0; display:inline-block; } label{border:1px solid #888; border-left:0; border-bottom:0; background:#EEF; text-align:center;} input {height:20px; border:1px solid #888;border-left:0; border-bottom:0;text-align:center; font-family:Verdana; font-size:15px;} #contenu .col_1{width:80px; border-left:2px solid #888;} #contenu .col_2{width:452px;text-align:left;} #contenu .col_3_et_4{width:73px;} #contenu .col_5{width:80px;border-right:2px solid #888;} /* dernière ligne de saisie */ #contenu .fin{border-bottom:2px solid #888;} /#contenu .ligne31{clear:both;margin:0;padding:0;float:right;}/ /#contenu .ttotal{float: left;display: block;width: 146px;border-top: 0px;border-right: 1px solid #888;border-left: 2px solid #888;}/ /#contenu .letotal{float: left;display: block;width: 80px; margin-right:1px;border-top: 0px;border-right: 2px solid #888;border-left: 0px;}/ #contenu .lab{height:35px;font-weight:bold;text-align:center;} #contenu .ttotal {float: left;display: block;width: 146px;border-top: 0px solid #888;border-right: 1px solid #888; border-bottom: 2px solid #888;border-left: 2px solid #888;} #contenu .letotal { float: left; display: block;width: 80px;border-top: 0px;border-right: 2px solid #888;border-bottom: 2px solid #888;border-left: 0px;} .totaux{ float:right} /********************************************************************************************** /************************************************************************************************#contenu .ligne31 {} #empied{ text-align:center; margin-bottom:1em; clear:both;} .rouge{ color:#F00;} .MON_MENU{clear:both;margin:0px;padding:0px;float:right;width:450px;height:600px;overflow:hidden;background:#9F81F7;} /**************************************************************************************/ /*LESBOUTONS*/ #bouton1{clear:both;float:right;width:200px;height:41px;background-color: red;color:yellow;} #bouton1:hover{background-color:yellow;color:red; font-weight:bolder; } #bouton2 {clear:both;float:right;width:200px;height:41px;background-color: orange;color:magenta;} #bouton2:hover {background-color:magenta;color:orange; font-weight:bolder;} #bouton3 {clear:both;float:right;width:200px;height:41px;background-color: green;color:red;} #bouton3:hover {background-color:red;color:green; font-weight:bolder;} #bouton4 {clear:both;float:right;width:200px;height:41px;background-color: #0101DF;color:#B40486;} #bouton4:hover {background-color:#B40486;color:#0101DF; font-weight:bolder;} #bouton5 {clear:both;float:right;width:200px;height:41px;background-color: #FF8000;color:#00BFFF;} #bouton5:hover {background-color:#00BFFF;color:#FF8000; font-weight:bolder;} input[type=button] { display: inline-block; margin-bottom: 3px; /*rajout*/ border: 4px solid gray; 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-weight:bold } /**************************************************************************************/ </style> </head> <body> <div class="facture"> <div id="entete"> <div id="entetegauche"> <img class="logo" src="logo1.jpg" alt="Mon logo"> </br></br> <input class="sujet haut" type="text"> <input class="sujetG"type="text"value="Devis N°"><input class="sujetD" id="numdevis"type="text"> <input class="sujetG bas" id="finsujet"type="text"value="Object :"><input class="sujetD bas" id="objet" type="text"> </div> <div id="entetedroite"> <p class="lignedate"><label class="tdate">Date :</label><input class="ladate" type="text"></p> </br></br></br></br> <p><input class="addr haut" id="address1" type="text"value="-----------------------------------"></p> <p><input class="addr" id="address2" type="text"value="-----------------------------------"></p> <p><input class="addr" id="address3" type="text"value="-----------------------------------"></p> <p><input class="addr "id="address4" type="text"value="-----------------------------------"></p> <p class="CC"><input readonly class="titreC" type="text "value="Tel:"><input class="NClient" id="telclient"type="text"value="__ __ __ __ __ "></p> <p class="CC"><input readonly class="titreC bas" type="text "value="N° Client"><input class="NClient bas" id="numclient"type="text"value="__ __ __ __ __"></p> </div> </div> <div id="contenu"> <p><label class="col_1 lab deb ">Référence</label><label class="col_2 lab deb">Désignation des travaux</label><label class="col_3_et_4 lab deb">Unité</label><label class="col_3_et_4 lab deb">T-horaire</label><label class="col_5 lab deb ">Total</label></p> <p class=ligne1"><input class="col_1"id="A1" type="text"><input class="col_2" id="b1"type="text"><input class="col_3_et_4" id="c1" type="text"><input class="col_3_et_4" id="d1"type="text"><input class="col_5" id="e1" type="text"></p> <p class=ligne2"><input class="col_1"id="A2" type="text"><input class="col_2" id="b2"type="text"><input class="col_3_et_4" id="c2" type="text"><input class="col_3_et_4" id="d2" type="text"><input class="col_5" id="e2" type="text"></p> <p class=ligne3"><input class="col_1" id="A3"type="text"><input class="col_2" id="b3"type="text"><input class="col_3_et_4" id="c3" type="text"><input class="col_3_et_4" id="d3" type="text"><input class="col_5" id="e3" type="text"></p> <p class=ligne4"><input class="col_1" id="A4"type="text"><input class="col_2" id="b4"type="text"><input class="col_3_et_4" id="c4" type="text"><input class="col_3_et_4" id="d4" type="text"><input class="col_5" id="e4" type="text"></p> <p class=ligne5"><input class="col_1" id="A5"type="text"><input class="col_2" id="b5" type="text"><input class="col_3_et_4" id="c5" type="text"><input class="col_3_et_4" id="d5"type="text"><input class="col_5" id="e5" type="text"></p> <p class=ligne6"><input class="col_1" id="A6"type="text"><input class="col_2" id="b6"type="text"><input class="col_3_et_4" id="c6" type="text"><input class="col_3_et_4" id="d6"type="text"><input class="col_5" id="e6" type="text"></p> <p class=ligne7"><input class="col_1"id="A7" type="text"><input class="col_2" id="b7"type="text"><input class="col_3_et_4" id="c7" type="text"><input class="col_3_et_4" id="d7"type="text"><input class="col_5" id="e7" type="text"></p> <p class=ligne8"><input class="col_1" id="A8"type="text"><input class="col_2" id="b8"type="text"><input class="col_3_et_4" id="c8" type="text"><input class="col_3_et_4" id="d8"type="text"><input class="col_5" id="e8" type="text"></p> <p class=ligne9"><input class="col_1" id="A9"type="text"><input class="col_2" id="b9"type="text"><input class="col_3_et_4" id="c9" type="text"><input class="col_3_et_4" id="d9"type="text"><input class="col_5" id="e9" type="text"></p> <p class=ligne10"><input class="col_1" id="A10"type="text"><input class="col_2" id="b10"type="text"><input class="col_3_et_4" id="c10" type="text"><input class="col_3_et_4" id="d10"type="text"><input class="col_5" id="e10" type="text"></p> <p class=ligne11"><input class="col_1" id="A11"type="text"><input class="col_2" id="b11"type="text"><input class="col_3_et_4" id="c11" type="text"><input class="col_3_et_4" id="d11"type="text"><input class="col_5" id="e11" type="text"></p> <p class=ligne12"><input class="col_1"id="A12" type="text"><input class="col_2" id="b12"type="text"><input class="col_3_et_4" id="c12" type="text"><input class="col_3_et_4" id="d12"type="text"><input class="col_5" id="e12" type="text"></p> <p class=ligne13"><input class="col_1"id="A13" type="text"><input class="col_2" id="b13"type="text"><input class="col_3_et_4" id="c13" type="text"><input class="col_3_et_4" id="d13"type="text"><input class="col_5" id="e13" type="text"></p> <p class=ligne14"><input class="col_1" id="A14"type="text"><input class="col_2" id="b14"type="text"><input class="col_3_et_4" id="c14" type="text"><input class="col_3_et_4" id="d14"type="text"><input class="col_5" id="e14" type="text"></p> <p class=ligne15"><input class="col_1" id="A15"type="text"><input class="col_2" id="b15"type="text"><input class="col_3_et_4" id="c15" type="text"><input class="col_3_et_4" id="d15"type="text"><input class="col_5" id="e15" type="text"></p> <p class=ligne16"><input class="col_1" id="A16"type="text"><input class="col_2" id="b16"type="text"><input class="col_3_et_4" id="c16" type="text"><input class="col_3_et_4" id="d16"type="text"><input class="col_5" id="e16" type="text"></p> <p class=ligne17"><input class="col_1" id="A17"type="text"><input class="col_2" id="b17"type="text"><input class="col_3_et_4" id="c17" type="text"><input class="col_3_et_4" id="d17"type="text"><input class="col_5" id="e17" type="text"></p> <p class=ligne18"><input class="col_1" id="A18"type="text"><input class="col_2" id="b18"type="text"><input class="col_3_et_4" id="c18" type="text"><input class="col_3_et_4" id="d18"type="text"><input class="col_5" id="e18" type="text"></p> <p class=ligne19"><input class="col_1" id="A19"type="text"><input class="col_2" id="b19"type="text"><input class="col_3_et_4" id="c19" type="text"><input class="col_3_et_4" id="d19"type="text"><input class="col_5" id="e19" type="text"></p> <p class=ligne20"><input class="col_1" id="A20"type="text"><input class="col_2" id="b20"type="text"><input class="col_3_et_4" id="c20" type="text"><input class="col_3_et_4" id="d20"type="text"><input class="col_5" id="e20" type="text"></p> <p class=ligne21"><input class="col_1" id="A21"type="text"><input class="col_2" id="b21" type="text"><input class="col_3_et_4" id="c21" type="text"><input class="col_3_et_4" id="d21"type="text"><input class="col_5" id="e21" type="text"></p> <p class=ligne22"><input class="col_1" id="A22"type="text"><input class="col_2" id="b22"type="text"><input class="col_3_et_4" id="c22" type="text"><input class="col_3_et_4" id="d22"type="text"><input class="col_5" id="e22" type="text"></p> <p class=ligne23"><input class="col_1" id="A23"type="text"><input class="col_2" id="b23"type="text"><input class="col_3_et_4" id="c23" type="text"><input class="col_3_et_4" id="d23"type="text"><input class="col_5" id="e23" type="text"></p> <p class=ligne24"><input class="col_1" id="A24"type="text"><input class="col_2" id="b24"type="text"><input class="col_3_et_4" id="c24" type="text"><input class="col_3_et_4" id="d24"type="text"><input class="col_5" id="e24" type="text"></p> <p class=ligne25"><input class="col_1" id="A25"type="text"><input class="col_2" id="b25"type="text"><input class="col_3_et_4" id="c25" type="text"><input class="col_3_et_4" id="d25"type="text"><input class="col_5" id="e25" type="text"></p> <p class=ligne26"><input class="col_1" id="A26"type="text"><input class="col_2" id="b26"type="text"><input class="col_3_et_4" id="c26" type="text"><input class="col_3_et_4" id="d26"type="text"><input class="col_5" id="e26" type="text"></p> <p class=ligne27"><input class="col_1" id="A27"type="text"><input class="col_2" id="b27" type="text"><input class="col_3_et_4" id="c27" type="text"><input class="col_3_et_4" id="d27"type="text"><input class="col_5" id="e27" type="text"></p> <p class=ligne28"><input class="col_1" id="A28"type="text"><input class="col_2" id="b28"type="text"><input class="col_3_et_4" id="c28" type="text"><input class="col_3_et_4" id="d28"type="text"><input class="col_5" id="e28" type="text"></p> <p class=ligne29"><input class="col_1" id="A29"type="text"><input class="col_2" id="b29"type="text"><input class="col_3_et_4" id="c29" type="text"><input class="col_3_et_4" id="d29"type="text"><input class="col_5" id="e29" type="text"></p> <p class="ligne30"><input class="col_1 fin" id="A30"type="text"><input class="col_2 fin" id="b30"type="text"><input class="col_3_et_4 fin" id="c30" type="text"><input class="col_3_et_4 fin" id="d30"type="text"><input class="col_5 fin" id="30"type="text"></p> </br> <!--<p class="ligne31"><label class="ttotal lab fin">Total Devis</label><input class="letotal lab fin" type="text"><label class="espace">-</label></p>!--> <p class="ligne31"><div class="totaux"><label class="ttotal lab">Total Devis</label><input class="letotal lab" type="text"></div></p> </div> <div id="empied"> <br><strong class="rouge">Achat des matèriaux à la charge du client.</strong> <br>TOTO-SERVICE- 277, Chemin de fond Résidence " lesPoulettes" - 83200 Toulon <br><strong>Tél : 05 45 78 95 56</strong> <br>E-mail:TOTO,service@hotmail,fr <br>Individuelle au capital de 6500 - SIRET : XXX XXX XXX XXXXX - Code APE YYYY A <br>TVA intra : TVA non applicable article 293 B du CGI </div> </div> <!-- PARTIE POUR CREATION DU MENU !--> <div class="MON_MENU"> <p><input type='button' id="bouton1" value='Imprimer' onclick="impression()";return false;"></p> <p><input type='button' id="bouton2" value='Fermer'onclick="fermer()";return false;"/></p> <p><input type='button' id="bouton3" value='Nouveau' onclick="impression()";return false;"></p> <p><input type='button' id="bouton4" value='modifier'onclick="fermer()";return false;"/></p> <p><input type='button' id="bouton5" value='facturer' onclick="impression()";return false;"></p> </div> </body> </html>
ton code est pétri d'erreur <p class=ligne2"> ou autre onclick="impression()";return false;", cela ne réglera pas ton problème mais il est impératif de corriger cela.
PS1 : laisse tomber ton éditeur actuel et prend en un avec la coloration syntaxique.
PS2 : regarde celle du forum quand tu postes tes message.
PS3 : pas achetée :mrgreen:
A ajouter dans le codeCode:
1
2 #contenu .ttotal {height:20px;} .totaux{;margin-right: 9px;}
Bien vu NoSmoking j'ai oublié pour la correction du code. :ccool:
Je ne rajoute que des rustines, hein ! je ne rentre pas dans les erreurs de code.
Ça prend déjà tellement de temps. :pc:
PS: Ça devient une discussion "fleuve".
Re
je sais que je fait beaucoup d'erreurs je debute dans ce language
et c'est vrai qu'avec notpad je n'ai pas de coloration syntaxique ce qui m'aiderait je crois
c'est assez étonant que les lignesX sans guillemet fonctionnaient
merci a tout les deux en tout cas pour les rustines :)
allez j'essais de mettre ca au propre
pour l'enpied au fait je n'avais pas mis de dimension car il est dans la div feuille
bon allez je vais faire encore couler de l'eau dans le fleuve
:ccool:
J'ai donné des dimensions à l'empied (qu'on peut appeler conventionnellement "footer" ^^) car je n'avais pas tout le code.
Après concernant le fait que tu fasses des erreurs, c'est totalement normal..
Ce que je veux dire c'est que je ne peux pas tout corriger (ça prendrait un temps fou !).
Ta démarche qui t'est propre, implique une réflexion sur les éléments à choisir. Ce choix n'est pas forcément celui que je prendrais.
Maintenant je m'adapte à ce que tu proposes.
Re
et je t'en remercie en tout je comprends bien que c'est pas une obligation de me filer un coup de main
moi meme dans mon language habituel j'ai parfois du mal a repondre a la demande
en tout cas j'ai commencer a corriger les fautes
et j'ai enlevé le overflow de la div feuille et je l'ai agrandie pour un apercu global
et voila le resultat
Je pense avoir corrigé ton menu en conservant les propriétés que tu avais définies auparavant.
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
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 <!DOCTYPE HTML > <html> <head> <meta http-equiv="x-ua-compatible" content="ie=9"> <meta charset="UTF-8"> <title> DEVIS </title> <style> html, body{ font-family:Verdana; font-size:100%; margin:0; padding:0;} .facture{ float:left;font-family:Verdana; font-size:0.8em; width:790px; height:600px; margin:0; padding0;clear:both;overflow:auto}/*border:1px solid red*/ .facture:after{content:"";display:block;clear:both;} #entete{width:765px;height:250px;}/*border:1px solid green*/ #entetegauche{float:left;width:280px;height:249px;}/* border:1px solid magenta;*/ .sujet{width:273px; border:1px solid #888;height:21px;border-bottom: 0;border-right:2px solid #888;border-left:2px solid #888;} .sujetG{width:80px; border:1px solid #888;height:21px;border-bottom: 0;border-right:0;border-left:2px solid #888;} .sujetD{width:190px; border:1px solid #888;height:21px;border-bottom: 0;border-right:2px solid #888;} .haut{border-top:2px solid #888;} .bas{border-bottom:2px solid #888;} #entetedroite{float:right;width:400px;height:249px;}/* border:1px solid orange;*/ .lignedate{clear:both;float:left;} .tdate{float:left;border-bottom:2px solid #888;display: block;width: 60px;border-top: 2px solid #888;border-left:2px solid #888;height:22px} .ladate{float:left;border-bottom:2px solid #888;display: block;width: 170px;border-top: 2px solid #888;border-right:2px solid #888;} .addr{clear:both;float:right;height21px;width:260px;border-right:2px solid #888;border-left:2px solid #888;;} .CC{float:right;clear:both;} .titreC{width:80px;border-left:2px solid #888;} .NClient{width:177px;border-right:2px solid #888} .espace{visibility:hidden;width:5px;} #entetedroite p{margin:0;padding:0;} #contenu{clear:both;} #contenu .deb{border-top:2px solid #888;} #contenu p,#contenu input,#contenu label{margin:0; padding:0; display:inline-block; } label{border:1px solid #888; border-left:0; border-bottom:0; background:#EEF; text-align:center;} input {height:20px; border:1px solid #888;border-left:0; border-bottom:0;text-align:center; font-family:Verdana; font-size:15px;} #contenu .col_1{width:80px; border-left:2px solid #888;} #contenu .col_2{width:452px;text-align:left;} #contenu .col_3_et_4{width:73px;} #contenu .col_5{width:80px;border-right:2px solid #888;} /* dernière ligne de saisie */ #contenu .fin{border-bottom:2px solid #888;} /#contenu .ligne31{clear:both;margin:0;padding:0;float:right;}/ /#contenu .ttotal{float: left;display: block;width: 146px;border-top: 0px;border-right: 1px solid #888;border-left: 2px solid #888;}/ /#contenu .letotal{float: left;display: block;width: 80px; margin-right:1px;border-top: 0px;border-right: 2px solid #888;border-left: 0px;}/ #contenu .lab{height:35px;font-weight:bold;text-align:center;} #contenu .ttotal {float: left;display: block;width: 146px;border-top: 0px solid #888;border-right: 1px solid #888; border-bottom: 2px solid #888;border-left: 2px solid #888;height:20px;} #contenu .letotal { float: left; display: block;width: 80px;border-top: 0px;border-right: 2px solid #888;border-bottom: 2px solid #888;border-left: 0px;} .totaux{float:right;margin-right: 9px;} /********************************************************************************************** /************************************************************************************************#contenu .ligne31 {} #empied{ text-align:center; margin-bottom:1em; clear:both;} .rouge{ color:#F00;}*/ .MON_MENU{float:left;width:450px;height:600px;overflow:hidden;background:#9F81F7;} #bouton1{clear:both;float:right;width:200px;height:41px;background-color: red;color:yellow;} #bouton1:hover{background-color:yellow;color:red; font-weight:bolder; } #bouton2 {clear:both;float:right;width:200px;height:41px;background-color: orange;color:magenta;} #bouton2:hover {background-color:magenta;color:orange; font-weight:bolder;} #bouton3 {clear:both;float:right;width:200px;height:41px;background-color: green;color:red;} #bouton3:hover {background-color:red;color:green; font-weight:bolder;} #bouton4 {clear:both;float:right;width:200px;height:41px;background-color: #0101DF;color:#B40486;} #bouton4:hover {background-color:#B40486;color:#0101DF; font-weight:bolder;} #bouton5 {clear:both;float:right;width:200px;height:41px;background-color: #FF8000;color:#00BFFF;} #bouton5:hover {background-color:#00BFFF;color:#FF8000; font-weight:bolder;} input[type=button] { display: inline-block; margin-bottom: 3px; /*rajout*/ border: 4px solid gray; 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-weight:bold } /**************************************************************************************/ </style> </head> <body> <div class="facture"> <div id="entete"> <div id="entetegauche"> <img class="logo" src="logo1.jpg" alt="Mon logo"> </br></br> <input class="sujet haut" type="text"> <input class="sujetG"type="text"value="Devis N°"><input class="sujetD" id="numdevis"type="text"> <input class="sujetG bas" id="finsujet"type="text"value="Object :"><input class="sujetD bas" id="objet" type="text"> </div> <div id="entetedroite"> <p class="lignedate"><label class="tdate">Date :</label><input class="ladate" type="text"></p> </br></br></br></br> <p><input class="addr haut" id="address1" type="text"value="-----------------------------------"></p> <p><input class="addr" id="address2" type="text"value="-----------------------------------"></p> <p><input class="addr" id="address3" type="text"value="-----------------------------------"></p> <p><input class="addr "id="address4" type="text"value="-----------------------------------"></p> <p class="CC"><input readonly class="titreC" type="text "value="Tel:"><input class="NClient" id="telclient"type="text"value="__ __ __ __ __ "></p> <p class="CC"><input readonly class="titreC bas" type="text "value="N° Client"><input class="NClient bas" id="numclient"type="text"value="__ __ __ __ __"></p> </div> </div> <div id="contenu"> <p><label class="col_1 lab deb ">Référence</label><label class="col_2 lab deb">Désignation des travaux</label><label class="col_3_et_4 lab deb">Unité</label><label class="col_3_et_4 lab deb">T-horaire</label><label class="col_5 lab deb ">Total</label></p> <p class=ligne1"><input class="col_1"id="A1" type="text"><input class="col_2" id="b1"type="text"><input class="col_3_et_4" id="c1" type="text"><input class="col_3_et_4" id="d1"type="text"><input class="col_5" id="e1" type="text"></p> <p class=ligne2"><input class="col_1"id="A2" type="text"><input class="col_2" id="b2"type="text"><input class="col_3_et_4" id="c2" type="text"><input class="col_3_et_4" id="d2" type="text"><input class="col_5" id="e2" type="text"></p> <p class=ligne3"><input class="col_1" id="A3"type="text"><input class="col_2" id="b3"type="text"><input class="col_3_et_4" id="c3" type="text"><input class="col_3_et_4" id="d3" type="text"><input class="col_5" id="e3" type="text"></p> <p class=ligne4"><input class="col_1" id="A4"type="text"><input class="col_2" id="b4"type="text"><input class="col_3_et_4" id="c4" type="text"><input class="col_3_et_4" id="d4" type="text"><input class="col_5" id="e4" type="text"></p> <p class=ligne5"><input class="col_1" id="A5"type="text"><input class="col_2" id="b5" type="text"><input class="col_3_et_4" id="c5" type="text"><input class="col_3_et_4" id="d5"type="text"><input class="col_5" id="e5" type="text"></p> <p class=ligne6"><input class="col_1" id="A6"type="text"><input class="col_2" id="b6"type="text"><input class="col_3_et_4" id="c6" type="text"><input class="col_3_et_4" id="d6"type="text"><input class="col_5" id="e6" type="text"></p> <p class=ligne7"><input class="col_1"id="A7" type="text"><input class="col_2" id="b7"type="text"><input class="col_3_et_4" id="c7" type="text"><input class="col_3_et_4" id="d7"type="text"><input class="col_5" id="e7" type="text"></p> <p class=ligne8"><input class="col_1" id="A8"type="text"><input class="col_2" id="b8"type="text"><input class="col_3_et_4" id="c8" type="text"><input class="col_3_et_4" id="d8"type="text"><input class="col_5" id="e8" type="text"></p> <p class=ligne9"><input class="col_1" id="A9"type="text"><input class="col_2" id="b9"type="text"><input class="col_3_et_4" id="c9" type="text"><input class="col_3_et_4" id="d9"type="text"><input class="col_5" id="e9" type="text"></p> <p class=ligne10"><input class="col_1" id="A10"type="text"><input class="col_2" id="b10"type="text"><input class="col_3_et_4" id="c10" type="text"><input class="col_3_et_4" id="d10"type="text"><input class="col_5" id="e10" type="text"></p> <p class=ligne11"><input class="col_1" id="A11"type="text"><input class="col_2" id="b11"type="text"><input class="col_3_et_4" id="c11" type="text"><input class="col_3_et_4" id="d11"type="text"><input class="col_5" id="e11" type="text"></p> <p class=ligne12"><input class="col_1"id="A12" type="text"><input class="col_2" id="b12"type="text"><input class="col_3_et_4" id="c12" type="text"><input class="col_3_et_4" id="d12"type="text"><input class="col_5" id="e12" type="text"></p> <p class=ligne13"><input class="col_1"id="A13" type="text"><input class="col_2" id="b13"type="text"><input class="col_3_et_4" id="c13" type="text"><input class="col_3_et_4" id="d13"type="text"><input class="col_5" id="e13" type="text"></p> <p class=ligne14"><input class="col_1" id="A14"type="text"><input class="col_2" id="b14"type="text"><input class="col_3_et_4" id="c14" type="text"><input class="col_3_et_4" id="d14"type="text"><input class="col_5" id="e14" type="text"></p> <p class=ligne15"><input class="col_1" id="A15"type="text"><input class="col_2" id="b15"type="text"><input class="col_3_et_4" id="c15" type="text"><input class="col_3_et_4" id="d15"type="text"><input class="col_5" id="e15" type="text"></p> <p class=ligne16"><input class="col_1" id="A16"type="text"><input class="col_2" id="b16"type="text"><input class="col_3_et_4" id="c16" type="text"><input class="col_3_et_4" id="d16"type="text"><input class="col_5" id="e16" type="text"></p> <p class=ligne17"><input class="col_1" id="A17"type="text"><input class="col_2" id="b17"type="text"><input class="col_3_et_4" id="c17" type="text"><input class="col_3_et_4" id="d17"type="text"><input class="col_5" id="e17" type="text"></p> <p class=ligne18"><input class="col_1" id="A18"type="text"><input class="col_2" id="b18"type="text"><input class="col_3_et_4" id="c18" type="text"><input class="col_3_et_4" id="d18"type="text"><input class="col_5" id="e18" type="text"></p> <p class=ligne19"><input class="col_1" id="A19"type="text"><input class="col_2" id="b19"type="text"><input class="col_3_et_4" id="c19" type="text"><input class="col_3_et_4" id="d19"type="text"><input class="col_5" id="e19" type="text"></p> <p class=ligne20"><input class="col_1" id="A20"type="text"><input class="col_2" id="b20"type="text"><input class="col_3_et_4" id="c20" type="text"><input class="col_3_et_4" id="d20"type="text"><input class="col_5" id="e20" type="text"></p> <p class=ligne21"><input class="col_1" id="A21"type="text"><input class="col_2" id="b21" type="text"><input class="col_3_et_4" id="c21" type="text"><input class="col_3_et_4" id="d21"type="text"><input class="col_5" id="e21" type="text"></p> <p class=ligne22"><input class="col_1" id="A22"type="text"><input class="col_2" id="b22"type="text"><input class="col_3_et_4" id="c22" type="text"><input class="col_3_et_4" id="d22"type="text"><input class="col_5" id="e22" type="text"></p> <p class=ligne23"><input class="col_1" id="A23"type="text"><input class="col_2" id="b23"type="text"><input class="col_3_et_4" id="c23" type="text"><input class="col_3_et_4" id="d23"type="text"><input class="col_5" id="e23" type="text"></p> <p class=ligne24"><input class="col_1" id="A24"type="text"><input class="col_2" id="b24"type="text"><input class="col_3_et_4" id="c24" type="text"><input class="col_3_et_4" id="d24"type="text"><input class="col_5" id="e24" type="text"></p> <p class=ligne25"><input class="col_1" id="A25"type="text"><input class="col_2" id="b25"type="text"><input class="col_3_et_4" id="c25" type="text"><input class="col_3_et_4" id="d25"type="text"><input class="col_5" id="e25" type="text"></p> <p class=ligne26"><input class="col_1" id="A26"type="text"><input class="col_2" id="b26"type="text"><input class="col_3_et_4" id="c26" type="text"><input class="col_3_et_4" id="d26"type="text"><input class="col_5" id="e26" type="text"></p> <p class=ligne27"><input class="col_1" id="A27"type="text"><input class="col_2" id="b27" type="text"><input class="col_3_et_4" id="c27" type="text"><input class="col_3_et_4" id="d27"type="text"><input class="col_5" id="e27" type="text"></p> <p class=ligne28"><input class="col_1" id="A28"type="text"><input class="col_2" id="b28"type="text"><input class="col_3_et_4" id="c28" type="text"><input class="col_3_et_4" id="d28"type="text"><input class="col_5" id="e28" type="text"></p> <p class=ligne29"><input class="col_1" id="A29"type="text"><input class="col_2" id="b29"type="text"><input class="col_3_et_4" id="c29" type="text"><input class="col_3_et_4" id="d29"type="text"><input class="col_5" id="e29" type="text"></p> <p class="ligne30"><input class="col_1 fin" id="A30"type="text"><input class="col_2 fin" id="b30"type="text"><input class="col_3_et_4 fin" id="c30" type="text"><input class="col_3_et_4 fin" id="d30"type="text"><input class="col_5 fin" id="30"type="text"></p> </br> <!--<p class="ligne31"><label class="ttotal lab fin">Total Devis</label><input class="letotal lab fin" type="text"><label class="espace">-</label></p>!--> <p class="ligne31"><div class="totaux"><label class="ttotal lab">Total Devis</label><input class="letotal lab" type="text"></div></p> </div> <div id="empied"> <br><strong class="rouge">Achat des matèriaux à la charge du client.</strong> <br>TOTO-SERVICE- 277, Chemin de fond Résidence " lesPoulettes" - 83200 Toulon <br><strong>Tél : 05 45 78 95 56</strong> <br>E-mail:TOTO,service@hotmail,fr <br>Individuelle au capital de 6500 - SIRET : XXX XXX XXX XXXXX - Code APE YYYY A <br>TVA intra : TVA non applicable article 293 B du CGI </div> </div> <!-- PARTIE POUR CREATION DU MENU !--> <div class="MON_MENU"> <p><input type='button' id="bouton1" value='Imprimer' onclick="impression()";return false;"></p> <p><input type='button' id="bouton2" value='Fermer'onclick="fermer()";return false;"/></p> <p><input type='button' id="bouton3" value='Nouveau' onclick="impression()";return false;"></p> <p><input type='button' id="bouton4" value='modifier'onclick="fermer()";return false;"/></p> <p><input type='button' id="bouton5" value='facturer' onclick="impression()";return false;"></p> </div> </body> </html>
Re
Bonjour rodolphebrd je viens d'essayer ta derniere version
nickel le menu collé a la scroll sa me laisse meme un espace a droite pour y faire un second menu style sidebar mais ca on verra plus tard
par contre il est vrai que je ne comprend plus rien le float left positionne a gauche normalement le menu lui est en float left et est bien positionné
ensuite le pied de page tout a gauche je me suis contenté de mettre un <center></center>dans la div mais la classe rouge n'est pas pris en compte
ensuite toujours le meme probleme avec la ligne 31 (pour le total )les elements se placent mal
c'est a devenir dingue vraiment
je regrette un peu le temps de mes position absolute partout:mouarf::mouarf:
voila un apercu du rendu
As-tu pris exactement le code que je t'ai fourni ?
Je vois que tu as toujours des problèmes d'encodage (testes-tu le même fichier ?).
re
oui j'ai copier coller tout ton code tel quel dans un .text sauver en .html
le resultat est celui de la capture d'ecran
j'avoue qu'il y a des choses qui m'echape est tu sur d'employer le meme doctype
j'avoue que la je suis perdu j'eessaie de reprendre le dernier exemple qui s'affichait parfaitement bien mais le menu reste en dessous je n'arrive pas a le mettre a droite sans le position absolute
ce code affiche la feuille devis parfaitement c'est le menu qui reste en dessous a droite
avec ton code le empied n'est plus géré dans le css apparament
la ligne total non plus ainsi que la class "lab" qui me permet de modifier le format des labels ainsi que la ligne total
ci dessous les captures de ton code et celle du mien
et mon code est celui ci :
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
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 <!DOCTYPE HTML > <html> <head> <meta http-equiv="x-ua-compatible" content="ie=9"> <meta charset="UTF-8"> <title> DEVIS </title> <style> html, body{ clear:both; font-family:Verdana; font-size:100%; margin:0; padding:0;} .facture{ clear:both;font-family:Verdana; font-size:0.8em; width:773px; height:1090px; margin:0; padding0;clear:both;overflow:auto}/*border:1px solid red*/ #MON_MENU{clear:both;float:right;margin:0px;padding:0px;width:400px;height:600px;overflow:hidden;background:#9F81F7;} #entete{width:765px;height:250px;}/*border:1px solid green*/ #entetegauche{float:left;width:280px;height:249px;}/* border:1px solid magenta;*/ .sujet{width:273px; border:1px solid #888;height:21px;border-bottom: 0;border-right:2px solid #888;border-left:2px solid #888;} .sujetG{width:80px; border:1px solid #888;height:21px;border-bottom: 0;border-right:0;border-left:2px solid #888;} .sujetD{width:190px; border:1px solid #888;height:21px;border-bottom: 0;border-right:2px solid #888;} .haut{border-top:2px solid #888;} .bas{border-bottom:2px solid #888;} #entetedroite{float:right;width:400px;height:249px;}/* border:1px solid orange;*/ .lignedate{clear:both;float:left;} .tdate{float:left;border-bottom:2px solid #888;display: block;width: 60px;border-top: 2px solid #888;border-left:2px solid #888;height:22px} .ladate{float:left;border-bottom:2px solid #888;display: block;width: 170px;border-top: 2px solid #888;border-right:2px solid #888;} .addr{clear:both;float:right;height21px;width:260px;border-right:2px solid #888;border-left:2px solid #888;;} .CC{float:right;clear:both;} .titreC{width:80px;border-left:2px solid #888;} .NClient{width:177px;border-right:2px solid #888} .espace{visibility:hidden;width:5px;} #entetedroite p{margin:0;padding:0;} #contenu{clear:both;} #contenu .deb{border-top:2px solid #888;} #contenu p,#contenu input,#contenu label{margin:0; padding:0; display:inline-block; } label{border:1px solid #888; border-left:0; border-bottom:0; background:#EEF; text-align:center;} input {height:20px; border:1px solid #888;border-left:0; border-bottom:0;text-align:center; font-family:Verdana; font-size:15px;} #contenu .col_1{width:80px; border-left:2px solid #888;} #contenu .col_2{width:452px;text-align:left;} #contenu .col_3_et_4{width:73px;} #contenu .col_5{width:80px;border-right:2px solid #888;} /* dernière ligne de saisie */ #contenu .fin{border-bottom:2px solid #888;} /#contenu .ligne31{clear:both;margin:0;padding:0;float:right;}/ /#contenu .ttotal{float: left;display: block;width: 146px;border-top: 0px;border-right: 1px solid #888;border-left: 2px solid #888;}/ /#contenu .letotal{float: left;display: block;width: 80px; margin-right:1px;border-top: 0px;border-right: 2px solid #888;border-left: 0px;}/ /#contenu .ligne31{} .totaux{float:right;;margin-right: 7px;} #contenu .ttotal {float: left;display: block;width: 146px;border-top: 0px solid #888;border-right: 1px solid #888;border-bottom: 2px solid #888;border-left: 2px solid #888;} #contenu .letotal {float: left; display: block;width: 80px;border-top: 0px;border-right: 2px solid #888;border-bottom: 2px solid #888;border-left: 0px;} #contenu .lab{height:35px;font-weight:bold;text-align:center;} #empied{ text-align:center; margin-bottom:1em; clear:both;} .rouge{ color:#F00;} </style> <script type="text/vbscript"> sub calcul(elem) dim ligne for i=1 to len(elem.id) if isnumeric (mid(elem.id,i,1))then ligne= ligne & mid(elem.id,i,1) next nom1="c" & ligne nom2="d" & ligne nom3="e" & ligne if elem.id =nom1 then document.getElementById(nom2).value=30 document.getElementById(nom3).value =document.getElementById(nom1).value *document.getElementById(nom2).value end sub </script> </head> <body> <div class="facture"> <div id="entete"> <div id="entetegauche"> <img class="logo" src="logo1.jpg" alt="Mon logo"> </br></br> <input class="sujet haut" type="text"> <input class="sujetG"type="text"value="Devis N°"><input class="sujetD" id="numdevis"type="text"> <input class="sujetG bas" id="finsujet"type="text"value="Object :"><input class="sujetD bas" id="objet" type="text"> </div> <div id="entetedroite"> <p class="lignedate"><label class="tdate">Date :</label><input class="ladate" type="text"></p> </br></br></br></br> <p><input class="addr haut" id="address1" type="text"value="-----------------------------------"></p> <p><input class="addr" id="address2" type="text"value="-----------------------------------"></p> <p><input class="addr" id="address3" type="text"value="-----------------------------------"></p> <p><input class="addr "id="address4" type="text"value="-----------------------------------"></p> <p class="CC"><input readonly class="titreC" type="text "value="Tel:"><input class="NClient" id="telclient"type="text"value="__ __ __ __ __ "></p> <p class="CC"><input readonly class="titreC bas" type="text "value="N° Client"><input class="NClient bas" id="numclient"type="text"value="__ __ __ __ __"></p> </div> </div> <div id="contenu"> <p><label class="col_1 lab deb ">Référence</label><label class="col_2 lab deb">Désignation des travaux</label><label class="col_3_et_4 lab deb">Unité</label><label class="col_3_et_4 lab deb">T-horaire</label><label class="col_5 lab deb ">Total</label></p> <p class="ligne1"><input class="col_1"id="A1" type="text"><input class="col_2" id="b1"type="text"><input class="col_3_et_4" id="c1" onkeyup="calcul(this)" type="text"><input class="col_3_et_4" id="d1"onkeyup="calcul(this)" type="text"><input class="col_5" id="e1" type="text"></p> <p class="ligne2"><input class="col_1"id="A2" type="text"><input class="col_2" id="b2"type="text"><input class="col_3_et_4" id="c2" onkeyup="calcul(this)" type="text"><input class="col_3_et_4" id="d2" onkeyup="calcul(this)" type="text"><input class="col_5" id="e2" type="text"></p> <p class="ligne3"><input class="col_1" id="A3"type="text"><input class="col_2" id="b3"type="text"><input class="col_3_et_4" id="c3" onkeyup="calcul(this)" type="text"><input class="col_3_et_4" id="d3" onkeyup="calcul(this)" type="text"><input class="col_5" id="e3" type="text"></p> <p class="ligne4"><input class="col_1" id="A4"type="text"><input class="col_2" id="b4"type="text"><input class="col_3_et_4" id="c4" onkeyup="calcul(this)" type="text"><input class="col_3_et_4" id="d4" onkeyup="calcul(this)" type="text"><input class="col_5" id="e4" type="text"></p> <p class="ligne5"><input class="col_1" id="A5"type="text"><input class="col_2" id="b5" type="text"><input class="col_3_et_4" id="c5" onkeyup="calcul(this)" type="text"><input class="col_3_et_4" id="d5"onkeyup="calcul(this)" type="text"><input class="col_5" id="e5" type="text"></p> <p class="ligne6"><input class="col_1" id="A6"type="text"><input class="col_2" id="b6"type="text"><input class="col_3_et_4" id="c6" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d6"onkeyup="calcul(this)" type="text"><input class="col_5" id="e6" type="text"></p> <p class="ligne7"><input class="col_1"id="A7" type="text"><input class="col_2" id="b7"type="text"><input class="col_3_et_4" id="c7" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d7"onkeyup="calcul(this)" type="text"><input class="col_5" id="e7" type="text"></p> <p class="ligne8"><input class="col_1" id="A8"type="text"><input class="col_2" id="b8"type="text"><input class="col_3_et_4" id="c8" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d8"onkeyup="calcul(this)" type="text"><input class="col_5" id="e8" type="text"></p> <p class="ligne9"><input class="col_1" id="A9"type="text"><input class="col_2" id="b9"type="text"><input class="col_3_et_4" id="c9" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d9"onkeyup="calcul(this)" type="text"><input class="col_5" id="e9" type="text"></p> <p class="ligne10"><input class="col_1" id="A10"type="text"><input class="col_2" id="b10"type="text"><input class="col_3_et_4" id="c10" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d10"onkeyup="calcul(this)" type="text"><input class="col_5" id="e10" type="text"></p> <p class="ligne11"><input class="col_1" id="A11"type="text"><input class="col_2" id="b11"type="text"><input class="col_3_et_4" id="c11" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d11"onkeyup="calcul(this)"type="text"><input class="col_5" id="e11" type="text"></p> <p class="ligne12"><input class="col_1"id="A12" type="text"><input class="col_2" id="b12"type="text"><input class="col_3_et_4" id="c12" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d12"onkeyup="calcul(this)"type="text"><input class="col_5" id="e12" type="text"></p> <p class="ligne13"><input class="col_1"id="A13" type="text"><input class="col_2" id="b13"type="text"><input class="col_3_et_4" id="c13" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d13"onkeyup="calcul(this)"type="text"><input class="col_5" id="e13" type="text"></p> <p class="ligne14"><input class="col_1" id="A14"type="text"><input class="col_2" id="b14"type="text"><input class="col_3_et_4" id="c14" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d14"onkeyup="calcul(this)"type="text"><input class="col_5" id="e14" type="text"></p> <p class="ligne15"><input class="col_1" id="A15"type="text"><input class="col_2" id="b15"type="text"><input class="col_3_et_4" id="c15" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d15"onkeyup="calcul(this)"type="text"><input class="col_5" id="e15" type="text"></p> <p class="ligne16"><input class="col_1" id="A16"type="text"><input class="col_2" id="b16"type="text"><input class="col_3_et_4" id="c16" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d16"onkeyup="calcul(this)"type="text"><input class="col_5" id="e16" type="text"></p> <p class="ligne17"><input class="col_1" id="A17"type="text"><input class="col_2" id="b17"type="text"><input class="col_3_et_4" id="c17" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d17"onkeyup="calcul(this)"type="text"><input class="col_5" id="e17" type="text"></p> <p class="ligne18"><input class="col_1" id="A18"type="text"><input class="col_2" id="b18"type="text"><input class="col_3_et_4" id="c18" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d18"onkeyup="calcul(this)"type="text"><input class="col_5" id="e18" type="text"></p> <p class="ligne19"><input class="col_1" id="A19"type="text"><input class="col_2" id="b19"type="text"><input class="col_3_et_4" id="c19" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d19"onkeyup="calcul(this)"type="text"><input class="col_5" id="e19" type="text"></p> <p class="ligne20"><input class="col_1" id="A20"type="text"><input class="col_2" id="b20"type="text"><input class="col_3_et_4" id="c20" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d20"onkeyup="calcul(this)"type="text"><input class="col_5" id="e20" type="text"></p> <p class="ligne21"><input class="col_1" id="A21"type="text"><input class="col_2" id="b21" type="text"><input class="col_3_et_4" id="c21" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d21"onkeyup="calcul(this)"type="text"><input class="col_5" id="e21" type="text"></p> <p class="ligne22"><input class="col_1" id="A22"type="text"><input class="col_2" id="b22"type="text"><input class="col_3_et_4" id="c22" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d22"onkeyup="calcul(this)"type="text"><input class="col_5" id="e22" type="text"></p> <p class="ligne23"><input class="col_1" id="A23"type="text"><input class="col_2" id="b23"type="text"><input class="col_3_et_4" id="c23" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d23"onkeyup="calcul(this)"type="text"><input class="col_5" id="e23" type="text"></p> <p class="ligne24"><input class="col_1" id="A24"type="text"><input class="col_2" id="b24"type="text"><input class="col_3_et_4" id="c24" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d24"onkeyup="calcul(this)"type="text"><input class="col_5" id="e24" type="text"></p> <p class="ligne25"><input class="col_1" id="A25"type="text"><input class="col_2" id="b25"type="text"><input class="col_3_et_4" id="c25" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d25"onkeyup="calcul(this)"type="text"><input class="col_5" id="e25" type="text"></p> <p class="ligne26"><input class="col_1" id="A26"type="text"><input class="col_2" id="b26"type="text"><input class="col_3_et_4" id="c26" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d26"onkeyup="calcul(this)"type="text"><input class="col_5" id="e26" type="text"></p> <p class="ligne27"><input class="col_1" id="A27"type="text"><input class="col_2" id="b27" type="text"><input class="col_3_et_4" id="c27" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d27"onkeyup="calcul(this)"type="text"><input class="col_5" id="e27" type="text"></p> <p class="ligne28"><input class="col_1" id="A28"type="text"><input class="col_2" id="b28"type="text"><input class="col_3_et_4" id="c28" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d28"onkeyup="calcul(this)"type="text"><input class="col_5" id="e28" type="text"></p> <p class="ligne29"><input class="col_1" id="A29"type="text"><input class="col_2" id="b29"type="text"><input class="col_3_et_4" id="c29" onkeyup="calcul(this)"type="text"><input class="col_3_et_4" id="d29"onkeyup="calcul(this)"type="text"><input class="col_5" id="e29" type="text"></p> <p class="ligne30"><input class="col_1 fin" id="A30"type="text"><input class="col_2 fin" id="b30"type="text"><input class="col_3_et_4 fin" id="c30" onkeyup="calcul(this)"type="text"><input class="col_3_et_4 fin" id="d30"onkeyup="calcul(this)"type="text"><input class="col_5 fin" id="30"type="text"></p> </br> <!--<p class="ligne31"><label class="ttotal lab fin">Total Devis</label><input class="letotal lab fin" type="text"><label class="espace">-</label></p>!--> <p class="ligne31"><div class="totaux"><label class="ttotal lab">Total Devis</label><input class="letotal lab" type="text"></div></p> </div> <div id="empied"> <br><strong class="rouge">Achat des matèriaux à la charge du client.</strong> <br>TOTO-SERVICE- 277, Chemin de fond Résidence " lesPoulettes" - 83200 Toulon <br><strong>Tél : 05 45 78 95 56</strong> <br>E-mail:TOTO,service@hotmail,fr <br>Individuelle au capital de 6500 - SIRET : XXX XXX XXX XXXXX - Code APE YYYY A <br>TVA intra : TVA non applicable article 293 B du CGI </div> </div> <!-- PARTIE POUR CREATION DU MENU !--> <div id="MON_MENU"> <p><input type='button' id="bouton1" value='Imprimer' onclick="impression()";return false;"></p> <p><input type='button' id="bouton2" value='Fermer'onclick="fermer()";return false;"/></p> <p><input type='button' id="bouton3" value='Nouveau' onclick="impression()";return false;"></p> <p><input type='button' id="bouton4" value='modifier'onclick="fermer()";return false;"/></p> <p><input type='button' id="bouton5" value='facturer' onclick="impression()";return false;"></p> </div> </body> </html>