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

Version imprimable

Voir 40 message(s) de cette discussion en une page

03/07/2013, 19h11
rodolphebrd

On se base sur quel code ?
03/07/2013, 19h16
patricktoulon

re

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.
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 }
Les écarts proviennent d'où ?

08/07/2013, 16h25
NoSmoking

Avant de pouvoir comparer il te faut une structure de document correcte, et je note

Citation:

<a class="lignetotal"><input readonly class="ttt"value="Total du Devis"</label><input class="letotal"type="text"></a>

pourquoi une balise A et pas un P, un LABEL fermé mais non ouvert

Citation:

<p><input type='button' id="bouton1" value='Imprimer' onclick="impression()";return false;"></p>

il y a une amuvaise position des guillemets, regarde le return false.
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]
08/07/2013, 16h25
patricktoulon

re

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
08/07/2013, 16h50
patricktoulon

re

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

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

cet argument n'est pas recevable ;)

:faq: http://css.developpez.com/faq/?page=liaison-xhtml

Citation:

Mais si on peut simplifier je suis preneur

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.

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;
}

Code:

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>

http://codepen.io/anon/pen/oFtrb

08/07/2013, 18h26
patricktoulon

re

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

Code:

#contenu p{margin:0;padding:0;}

ceci:

Code:

height:21px

met ca me decale la derniere ligne(ligne total)
08/07/2013, 18h27
NoSmoking

Citation:

Envoyé par rodolphebrd

http://codepen.io/anon/pen/AxBfi

tu es sûr de ton lien Rodolphe ?

@patricktoulon :
Je t'avais mis une esquisse http://www.developpez.net/forums/d13...s/#post7369661, elle ne convenait pas?
08/07/2013, 18h32
rodolphebrd

Palsambleu le dernier codepen a écrasé le précédent. :pingoin2:

Lien rétabli...:whistle:
08/07/2013, 18h44
patricktoulon

re

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:

1 pièce(s) jointe(s)

Il te suffisais de faire une fusion des 2 sources pour obtenir une structure comme suit
Code:

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>
Le résultat ressemble à cela

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>

08/07/2013, 19h57
NoSmoking

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
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>
merci encore pour le temps que tu passe a mon projet:ccool:

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>

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;
}

Attention aux doubles déclarations de largeur....^^

10/07/2013, 15h38
patricktoulon

re

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

Voir 40 message(s) de cette discussion en une page