On se base sur quel code ?
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 ,nosmoking ,rodolphebrd pour m'avoir initié
dans le css ,bien pratique
voila le code de la page au complet
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259 <!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
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 : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 .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 ouvert<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.<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 recevablealors 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
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.Mais si on peut simplifier je suis preneur
exemple
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 <!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 : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46 * { 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/oFtrb
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part #contenu p{margin:0;padding:0;}
met ca me decale la derniere ligne(ligne total)
Code : Sélectionner tout - Visualiser dans une fenêtre à part height:21px
tu es sûr de ton lien Rodolphe ?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.
Lien rétabli...
Re
Nosmoking
je me suis basé sur ton esquisse pour faire le mien et pour en comprendre le fonctionnement
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
rodolphebrd j'essaie ta proposition
Il te suffisais de faire une fusion des 2 sources pour obtenir une structure comme suit
Le résultat ressemble à cela
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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
en attendant j'ai diminueé les ligne du css
il n'y a plus de "a" rien que des "p"
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
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 html : Sélectionner tout - Visualiser dans une fenêtre à part <meta http-equiv="x-ua-compatible" content="ie=8">
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
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33 <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!!)
j'ai un tout petit souci au niveau de la ligne total(decalage des deux cellules)
voila le résultat une idée???
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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 css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 #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
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
que pense tu du css pour la div "contenu" ?? peut on reduire encore plus
je pense que oui au niveau de la gestion des labels/inputs
merci pour le retour
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager