Taille et/ou famille de police

Version imprimable

14/11/2019, 17h08
L'AMI Yves

Taille et/ou famille de police

Bonjour à tous.

Je développe un site pour usage interne sur mon réseau local (Windows 10, Firefox à jour). Il sert à gérer une base de données MySQL, il est écrit en PHP/MySQL/HTML/CSS/Javascript.

Comme je l'ai déjà publié plusieurs fois à diverses occasions, je suis plutôt fâché avec le "responsive design". Aujourd'hui, je tombe sur un nouveau problème (lié au responsive design ou non : je ne sais pas) : suivant que ce qui est écrit dans les champs de mon site (des cellules de tableau, des <div> classiques, des <input>... vient de MySQL, ou du code PHP ou peut-être du clavier..., la police n'est pas la même, et surtout, la taille des caractères (toujours définie à 1rem en CSS) n'est pas la même. Je n'y avais pas fait attention, jusqu'à aujourd'hui où je galère comme un malade pour égaliser les champs et aligner les colonnes (les en-tête viennent du programme, et les données, de la base MySQL).

Est-ce que ce problème est bien connu (en particulier sous Firefox) et est-ce qu'on sait le contourner ?

Merci d'avance.

AMIcalement.
15/11/2019, 11h20
Invité
Bonjour,

si seulement on pouvait VOIR et/ou TESTER* !

Mais là, sans la moindre bribe de code,.....
:cristal:

* Avec :
- TOUS les codes nécessaires et suffisant pour reproduire le problème
- une page en ligne ? (même "simplifiée")
- copie d'écran,... (quoi que... ça n'apporterait pas grand chose)
N.B. On peut tout-de-suite supprimer de la liste des suspects :
- PHP
- MySQL
- Javascript (à moins qu'il ne modifie des styles CSS ?)
Il reste :
- HTML (s'il y a des styles CSS "en ligne")
- CSS
Et y ajouter :
- le développeur (donc, TOI !)
15/11/2019, 14h37
L'AMI Yves

1 pièce(s) jointe(s)

Cher Jérôme,

bien sûr, ça n'est pas la première fois que je m'attire cette remarque - et pas que par toi. Mais je ne sais pas comment y répondre : mon site n'est pas en ligne; il y a 11 fichiers dans le répertoire racine (des fichiers php qui "s'include" les uns les autres; il y a 6 sous-répertoires; le problème apparaît lors de l'invocation d'un module php de l'un de ces sous-répertoires; ce module accède à la base de données, et affiche son contenu; cela représente un tableau de plus de 1500 lignes; quand le consulte le code source de la page, j'obtiens 20000 lignes (environ); le problème apparait lors qu’après avoir cliqué dans une ligne, un formulaire s'affiche, permettant le dialogue pour modifier l'enregistrement correspondant de la BDD.

Crois-tu que si je publie ces codes, "vous", les braves contributeurs de ce forum, comprendrez mieux ce qui se passe qu'avec mes explications ?

Voici la fenêtre où apparait le problème :

Pièce jointe 517737

AMIcalement.
15/11/2019, 14h44
Invité
Je te retourne la question :

Citation:

"Comment veux-tu qu'on puisse apporter la moindre correction sans pouvoir TESTER, ni CHERCHER où pourrait se trouver le problème ?"
- On ne sait même pas si ton code HTML est correctement construit.
- On ne sait rien no plus du CSS appliqué...
N.B. Tout ce que je peux dire de ta copie d'écran, c'est que les COULEURS piquent les yeux !! :cry:
15/11/2019, 15h25
L'AMI Yves

Eh bien je suis un peu déçu...

Je veux bien que les couleurs piquent les yeux, mais c'est complètement hors sujet.

Aurait-il fallu que tes yeux ne piquassent pas pour que tu voies clairement que le texte écrit dans les cellules de tableau jaunes est plus gros que celui écrit dans les zones vertes ? Et que ces zones vertes, incluses dans d'autres cellules de tableau jaunes, ne les remplissent pas complètement ?

Y a-t-il besoin de voir du code pour imaginer ce qu'il y a derrière ? Je ne suis pas sûr que mon code HTML recevrait ton imprimatur, mais fais-moi au moins le crédit d'imaginer qu'il n'est pas complètement bidon.

Je demandais juste la confirmation que si ces zones arboraient des tailles de caractères différentes, c'était dû au fait que Firefox ne respectait pas ce qui était programmé en CSS, pour s'adapter au conteneur.

Il y a aussi (c'est également bien visible) des polices de caractères différentes, ce qui n'est programmé nulle part. J'ai fait l'hypothèse que, d'une façon ou d'une autre (mais j'aimerais bien savoir laquelle) le texte en provenance du clavier, ou du code PHP/HTML, ou de la base MySQL, garde la trace de sa police d'origine (aussi bien la base MySQL que mon code prévoient que tout se passe en UTF8).

Toujours AMIcalement.
15/11/2019, 16h24
Invité
Oui, on voit bien que les caractères sont de différentes tailles et typo.

Citation:

Envoyé par L'AMI Yves

Y a-t-il besoin de voir du code pour imaginer ce qu'il y a derrière ?

La réponse est clairement : OUI.

Car les raisons d'un dysfonctionnement peuvent être multiples et variées.

Citation:

...la confirmation que [...] c'était dû au fait que Firefox ne respectait pas ce qui était programmé ...

C'est tellement facile d'accuser le navigateur !! :roll:

Dans 99,99 % des cas, c'est uniquement la faute du PROGRAMMEUR !!
- Soit une erreur dans la structure HTML du document (ou sa configuration : DOCTYPE,... ?)
- Soit une erreur dans le CSS ?
- Soit une incompatibilité ? une instruction qui en écrase une autre ?
- Soit ..... ?
SANS VOIR ni TESTER le code, on ne peut faire QUE des suppositions.
15/11/2019, 16h29
Invité
Bon. On ne va pas se fâcher...

Puisque nous n'en saurons pas plus, tu vas devoir te débrouiller seul.
Pour ça :
- regarde dans l'"inspecteur" de la page (touche clavier "F12")
- inspecte les différents éléments (onglet "inspecteur")
- et regarde les règles CSS appliquées à chacun de ces éléments
A toi de trouver ce qui cloche.

Non, non, ne nous fâchons pas !

Je n'ai pas trop l'habitude d'utiliser les touches de fonctions du navigateur, mais j'use et abuse du clic droit/"Examiner l'élément" et "Code source de la page". C'est quand ces deux actions ne me permettent plus d'avancer que je me tourne vers le Web.

Oui, j'accuse le navigateur, et oui, c'est peut-être à tort : j'ai appris maintes fois à reconnaître mes erreurs et mes fausses accusations, mais si je dis ça aujoiurd'hui, c'est que, justement, en "explorant l'élément", j'ai vu qu'il n'y avait ps d'erreur détectée par lui (ou des trucs qui s'affichent en rouge dans le code source), et qu'il indiquait pour cet élément, un "font-size:1.3rem", comme pour l'élément d'à côté, alors qu'à l'écran, ils n'ont manifestement pas la même taille de police. Et je n'ai toujours pas compris non plus pourquoi ils n'avaient pas non plus la même police.

Pour résoudre (ou plutôt "améliorer") le problème des <input> à l'intérieur des <td>, j'ai codé du CSS pour spécifier le "height" des td input {} : j'y arrive à peu près, mais ça ne résout pas la question de la taille de police : l'inspecteur m'indique que le champs hérite de la font-size du <body> :1.3rem, alors que ça n'est évidemment pas vrai. Mais si alors je mets aussi "font-size:1.3rem; dans le CSS qui s'applique à ce champs, j'ai bien la bonne taille.

Il n'est JAMAIS question de font-family ou autres, ni dans le code, ni dans le CSS, et pourtant...

Mais si tu as envie de t'amuser (je reste sceptique) voici le code (je suis obligé de publier quatre gros fichiers, tu l'auras voulu)

1) la "racine" : ligne.php (239 lignes)

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
<?php   
//Ces modules fonctionnent avec passage de paramètres en POST. Il y a toujours
//d'abord deux agruments : $Fonct et $Act, qui désignent le module qui sera 
//"include" tout en bas, et jusqu'à NBVAR arguments $var0 à $varxx, qui sont les 
//paramètres (tous valant 0 par défaut).
//Pour respecter ce mécanisme, chaque module "$Fonct-$Act.php" doit mettre en 
//place les valeurs adéquates pour la suite des traitements.
  define('NBVAR', 25);    //de $var0 à $var24
  define('AJ', 10); // ajustement pour le nombre de caractères dans "dixa"
  define('DOSSIER', '../');
  include DOSSIER.'include.php';
//Construction du tableau "$args" ($var0, $var1, $var2 etc..
  $args=array("Fonct", "Act");
  for($i=0;$i<NBVAR;$i++) $args[]="var".$i;
//$args=["Fonct",""Act",'var0","var1" ,...,"var(NBVAR-1)"]
 
//les $var0...$var15 sont les valeurs des colonnes;
//Sauf Compte, sous-compte et les noms : index...! 
//$var16 est le N° du bouton cliqué
  lis_POST($args);
  $Fonct="ligne";
  for ($i=0;$i<NBVAR;$i++)
  {
    $var="var$i";
    $v="v$i";
    $$v=securise($$var);      //echappe les apostrophes (MySQL)
  }
//  dump($args);
//Les $vari sont sécurisées vis à vis de MySQL, et $vi vis à vis de HTML  
//echo("$Fonct $Act "); for($i=0;$i<NBVAR;$i++){$v="var$i"; echo(" $v=".$$v);}
//Dans les tables, il faut afficher $vi dans une cellule visible et utiliser
//$vari dans une cellule invisible pour les mettre dans des requètes MySQL  
//___Met à jour la table des mises à jour des tables de la BdD________________
function MiseAJour()
{
  global $db;
  $request="UPDATE MisesAJour SET quand='" . date("Y-m-d H:i:s").
           "' WHERE quelletable='Ecritures'";
  $db->query($request) 
            or error('UPDATE misesajour', __FILE__, __LINE__, $db->error());
}
En_Tete_HTML()
?>  
    <meta http-equiv="Content-Language" content="fr">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="ligne.js"></script>
    <link rel="stylesheet" href="comptabilite.css" type="text/css">   
<?php //calcul des taille de caractères et de colonnes
//    $tot=floor(($_SESSION["larg"]*AJ) / $_SESSION["dixa"]);//tout l'écran
define('TOT',119);
    $char=floor($_SESSION["larg"]/TOT);
    $nume= 4*$char;                 // Nb : 1*4    4  4   
    $jour= 6*$char;                 // Nb : 2*6   12 16  
    $chif= 7*$char;                 // Nb : 3*7   21 37 
    $oper= 9*$char;                 // Nb : 1*9    9 46
    $comp= 13*$char;                // N0 : 2*13  26 72  
    $reste=$_SESSION["larg"]-(78*$char);    // un peu de place pour l'ascenseur
    $rest=floor($reste/2); // en fait, la moitié du reste (en px.)
    $vari=$reste-$rest;  
    //et la place qui reste à la fin, avec une réserve
/*    if ($reste<16)
    {
      echo"</head><body> <script type='text/javascript'>\n";
      echo"alert('Largeur : ".$_SESSION["larg"].", Dixa : ".$_SESSION["dixa"].
            " taille de caractères trop grande, agissez sur CTRL+-');\n";
      echo"document.location='../index.php';\n";
      echo"</script></body></html>";
      exit;
    }
    $rest= floor($reste*$_SESSION["dixa"]/10);            // N0      : 5    
*/     echo "<!--Largeur=". $_SESSION["larg"] .", 10 car. = ". $_SESSION["dixa"].
         "-->\n";
    $reste=($_SESSION["larg"]/$char)-72;
    $tot=72+2*($reste);
    echo "<!--On met $tot caractères dans une ligne. -->\n";
    echo "<!--Ce qui laisse $reste positions pour les Tiers et pour les Commentaires.-->\n";
    echo"<style type='text/css'>\n";
    echo".col1{width:". $nume . "px;}\n";
    echo".col2{width:". $oper . "px;}\n";
    echo".col3{width:". $jour . "px;}\n";
    echo".col4{width:". $comp . "px;}\n";
    echo".col5{width:". $comp . "px;}\n";
    echo".col6{width:". $vari . "px;}\n";
    echo".col7{width:". $jour . "px;}\n";
    echo".col8{width:". $chif . "px;}\n";
    echo".col9{width:". $chif . "px;}\n";
    echo".col10{width:". $rest . "px;}\n";
    echo".col11{width:". $chif . "px;}\n";
    echo".col12{width:". $oper . "px;}\n";
    echo".col13{width:". $jour . "px;}\n";
    echo".col14{width:". $oper . "px;}\n";
    echo".col15{width:". $oper . "px;}\n";
    echo".col16{width:". $jour . "px;}\n";
    echo".zero{display:none;}\n";
    echo"</style>\n";
//Gestion php et javascript des Comptes et Sous-Comptes
  $Comptes=array();        
  $SCompte=array();       
  $req="SELECT * FROM Comptes";
  $r=$db->query($req) 
                 or error('SELECT Comptes', __FILE__, __LINE__, $db->error());
  while($l=$db->fetch_array($r))
  {
    $Comptes[$l["Numero"]]=array();
    $SComptes[$l["Numero"]]=array();
    $Comptes[$l["Numero"]]["Compte"]=$l["Compte"];
    $Comptes[$l["Numero"]]["Genre"]=$l["Genre"];
  }
  $db->free_result($r); 
  $req="SELECT * FROM Sous_Comptes";
  $r=$db->query($req) 
            or error('SELECT Sous_Comptes', __FILE__, __LINE__, $db->error());
  while($l=$db->fetch_array($r))
  {
      $SComptes[$l["Compte"]][$l["Numero"]]=$l["Sous_compte"];
  }
  $db->free_result($r);
  //Création des tableaux Comptes (Com["C"][i], Com["G"][i]) 
  //et Sous-comptes (SCo[c][j]), et quelques variables en javascript
        echo("<!--ligne.php-->");
  echo "<script>\n";
  echo "var Com=new Array(); Com['C']=new Array(); Com['G']=new Array(); 
            var SCo=new Array();";
  foreach ($Comptes as $i=>$Com) 
  {
    echo "\nCom[$i]=new Array(); ";
    echo "Com['C'][$i]='" . str_replace("'","\'",$Com["Compte"]) . "';";    
    echo "Com['G'][$i]='" . $Com["Genre"] . "';\n";
    if ($SComptes[$i])
    { 
      echo "SCo[$i]=new Array();";
      foreach($SComptes[$i] as $j=>$SCO[$i])
      {
          echo "SCo[$i][$j]='" . str_replace("'","\'",$SCO[$i]) . "';";          
      }
    }  
  }
  echo "</script>\n";
//Gestion php et javascript des lignes ventilées        
  $req="SELECT DISTINCT Ecriture FROM Ventilations          ";
  $r=$db->query($req) 
                 or error('SELECT 1 Ventilations', __FILE__, __LINE__, $db->error());
  while($l=$db->fetch_array($r))
  {
    $Ventilations[$l["Ecriture"]]= array();
    $Ventilations[$l["Ecriture"]]["Compte"]=array();
    $Ventilations[$l["Ecriture"]]["SCompte"]=array();
    $Ventilations[$l["Ecriture"]]["Tiers"]=array();
    $Ventilations[$l["Ecriture"]]["Debit"]=array();
    $Ventilations[$l["Ecriture"]]["Credit"]=array();
    $Ventilations[$l["Ecriture"]]["Comment"]=array();
    $req1="SELECT * FROM Ventilations WHERE Ecriture=" . $l["Ecriture"] . " ORDER BY Numero";
    $r1=$db->query($req1) 
                   or error('SELECT 2 Ventilations', __FILE__, __LINE__, $db->error());
    while ($l1=$db->fetch_array($r1))
    {
      $Ventilations[$l["Ecriture"]]["Compte"][$l1["Numero"]]=$l1["Compte"];
      $Ventilations[$l["Ecriture"]]["SCompte"][$l1["Numero"]]=$l1["Sous_Compte"];
      $Ventilations[$l["Ecriture"]]["Tiers"][$l1["Numero"]]="'".$l1["Tiers"]."'";
      $Ventilations[$l["Ecriture"]]["Debit"][$l1["Numero"]]=NullZero($l1["Debit"]);
      $Ventilations[$l["Ecriture"]]["Credit"][$l1["Numero"]]=NullZero($l1["Credit"]);
      $Ventilations[$l["Ecriture"]]["Comment"][$l1["Numero"]]="'".$l1["Commentaire"]."'";
    }
    $db->free_result($r1);
  }
  $db->free_result($r);        
  //Création du tableau Ventilations[] de l'espace javascript 
  echo "<script>\n";
  echo "var Ventil=new Array()";  
  foreach ($Ventilations as $E=>$B) 
  {//$E, clé de $Ventilation, est un numéro de ligne dans la table Ecrritures
   //$B est un bloc d'informations sur une ventilation. La clé est une rubrique (compte, 
   //sous-compte...), et les valeurs des lignes de venti:ation sont en colonnes.
   //   
    echo "\nVentil[$E]=new Array(); ";
    echo "\nVentil[$E]['Compte']=new Array();";  
    echo "\nVentil[$E]['SCompte']=new Array();";  
    echo "\nVentil[$E]['Tiers']=new Array();";  
    echo "\nVentil[$E]['Debit']=new Array();";  
    echo "\nVentil[$E]['Credit']=new Array();";  
    echo "\nVentil[$E]['Comment']=new Array();";  
    foreach ($B as $N=>$L)
    {
      foreach($L as $O=>$T)
        echo "\nVentil[$E]['$N'][$O]=" . Nullblanc($T) . "; ";
    }
  }
  echo("\nvar16=$var16;");
  echo("NoNom=".$_SESSION["NoNom"].";");
  echo("</script>\n");
//Gestion PHP et Javascript des noms 
  $req="SELECT * FROM noms";
  $r=$db->query($req)
                   or  error('SELECT noms', __FILE__, __LINE__, $db->error());
  while($l=$db->fetch_array($r))
  {
    $Noms[$l["Numero"]]=$l["Nom"];
  }
  $db->free_result($r);
//Création du tableau Noms[] javascript
  echo("<script>\n");
  echo("Noms=new Array();Noms[0]='Inconnu';");
  foreach($Noms as $i=>$nom)
  {
    echo ("Noms[$i]='$nom';");
  }
  echo("</script>\n");
?>   
    <title>Comptabilité</title>
    <!--Principe : cette procédure gère les interactions avec les tables 
        "lignes","Comptes", "Souscomptes" et "Ventilations". 
        Les aiguillages sont faits en fonction des variables $Fonct et $Act  -->
  </head>
  <body>  <!--  moyen=> font-size:2.6rem -->
<?php
foreach($Ventilations as $E=>$B)
{
  echo"<!--Ventilation ligne N° $E :-->\n";
  foreach ($B as $r=>$liste)
    {
      echo "<!--$r    : ";
      foreach($liste as $i=>$v)
        echo" $i : $v.";
      echo"-->\n";
    }
}
//echo("$Fonct $Act "); for($i=1;$i<12;$i++){$v="var$i"; echo(" $v=".$$v);}
//Ici, toutes les variables $Act et $vari qui ne sont pas en $_POST valent "0"
//$Fonct est initialisé à "ligne"
      if(file_exists("$Fonct-$Act.php"))include "$Fonct-$Act.php"; 
      else
                        {       echo("<br /><span class='gros'><b>$Fonct.$Act : module à développer.</b></span>");
        retour("../bienvenue.php");
                        }
 
?>  
<!--</div>-->
  </body>
</html>

2) le module sur lequel je travaille : ligne-0.php (455 lignes)

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
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
<?php
//les variables $var0 à $var9 sont les valeurs de la ligne actuellement 
//sélectionnée. var10, solde courant, varie suivant le tri, est peu 
//significative (voire "clôture"...). Il y a en plus $var11 à $var15, 
//invisibles dans la table, pour les saisies et vérification,et $var16 qui est 
//mise en place par un clic sur les en-tête de col., pour trier les lignes.
//Ces variables servent pour le dialogue entre les différents modules et sont 
//conservées par défaut. La variable $var0 contient le N° de ligne en cours,
//qui est utilisé pour placer (si possible) cette ligne en tête de fenêtre. 
//(Ca n'est pas possible si elle appartient à la dernière page...)
//Diverses variables de session sont utilisées :
//$_SESSION["Nom"] et $_SESSION["NoNom"] pour l'utilisateur connecté
//Spécificité de ce module : la variable "Fonct" peut valoir "ligne" pour les 
// lignes simples, ou "ventile" pour ventiler une ligne.
$PremLigne=$var0;
echo("<script>var var16=$var16;</script>\n<!-- ligne-0.php -->");
?>
<!--Saisie des écritures au jour le jour.-->
    <div class="grand-container">
      <div class="en-tete"> </div>
      <div class="interieur">
       <table class="journal">
        <thead>
         <tr>
            <th class='col1'><div onclick='Tri(0)'>No</div></th>
            <th class='col2'><div onclick='Tri(1)'>OP</div></th>
            <th class='col3'><div onclick='Tri(2)'>Date</div></th>
            <th class='col4'><div onclick='Tri(3)'>Compte</div></th>
            <th class='col5'><div onclick='Tri(4)'>Sous-compte</div></th>
            <th class='col6'><div onclick='Tri(5)'>Tiers</div></th>
            <th class='col7'><div onclick='Tri(6)'>Relevé</div></th>
            <th class='col8'><div onclick='Tri(7)'>Débit</div></th>
            <th class='col9'><div onclick='Tri(8)'>Crédit</div></th>
            <th class='col10'><div onclick='Tri(9)'>Commentaire</div></th>
            <th class='col11'><div>Solde</div></th>
            <th class='zero'></th><th class='zero'></th><th class='zero'></th><th class='zero'></th><th class='zero'><th class='zero'></th><th class='zero'></th>
<!-- attention, cette ligne longue est voulue -->
          </tr>
      </thead> 
      <tbody id="latable">
<?php      
    $req="SELECT E.Numero as N, E.Operation as O, E.DateOP as D, 
            E.Tiers as T, E.Releve as R, E.Debit as d, E.Credit as c, 
            E.Commentaire as Com, E.Compte as NoC, E.Sous_Compte as NoS,
            Comptes.Compte as CC, Sous_Comptes.Sous_compte as SC, Comptes.Genre as G,
            Saisi_par as S_P, Saisi_le as S_L, Saisi_avec as S_A, 
            Valide_par as V_P, Valide_le as V_L
        FROM Ecritures as E 
        INNER JOIN Comptes on Comptes.Numero = E.Compte
        INNER JOIN Sous_Comptes ON Sous_Comptes.Compte = E.Compte 
                           AND Sous_Comptes.Numero = E.Sous_Compte 
        ORDER BY ";
switch($var16)
{
    case 0:   //Numéro
      $req .= "E.Numero ASC";
          
        break;
    case 1:  //Opération
      $req .= "O, DateOP";
        break;
    case 2:  //DateOp  Le solde ne sera vallable que dans ce cas
      $req .= "DateOP, G, O";
        break;
    case 3:  //Compte
    case 4:  //Sous-Compte
      $req .= "NoC, NoS, T";
        break;
    case 5:  //Tiers
      $req .= "T, DateOP";
        break;
    case 6:  //Relevé
      $req .= "R, DateOP, O";
        break;
    case 7:   //Débit
      $req .= "E.Credit, E.Debit, DateOP, O";
        break;
    case 8:   //Crédit
      $req .= "E.Debit, E.Credit, DateOP, O";
        break;
    case 9:  //Commentaire
      $req .= "Com, DateOP, O";
        break;
    default : // Dans tous les autres cas : pas de tri
      $req .= "DateOP, R";
}    
//    echo $req;
  echo("<!--$req-->\n");
      $r=$db->query($req) 
               or error('SELECT Ecritures', __FILE__, __LINE__, $db->error());
      $solde=0;
      $Cumul=array("CB-D"=>0, "CB-Y"=>0);
      while ($Ligne=$db->fetch_array($r))
      {
        $No=$Ligne["N"];
        $L="L" . $No;
        $ch2=($Ligne["CC"]=="Ventilation")?"SelV":"Sel";
        $ch1=' onclick="' .$ch2. '(' . $L . ')">';
        $ch3='<td class="debug" onclick="' .$ch2. '(' . $L . ')';
        $ch2="\n";
        echo "<tr id='$L' class='" . (($Ligne["V_P"]>0) ? "a_val'" : "val'") . $ch1;
        if($Ligne["CC"]=="Ventilation")
        { //Traitement de la ligne de ventilation
          //colonne Numéro (1 seule ligne)               
          echo '<td>' .Nullblanc($Ligne["N"]) . $ch2;
          //colonne Oération (1 seule ligne)
          echo '<td>' .Nullblanc( $Ligne["O"]) . $ch2;
          //colonne date (1 seule ligne)
          $d=formatdate($Ligne["D"]);
          echo '<td>'  . $d . $ch2;
          //Colonne Compte ("Ventilation", puis les valeurs CC
          echo '<td><div>Ventilation</div>';
          foreach($Ventilations[$No]["Compte"] as $c)
          {
              echo "<div>" . $Comptes[$c]["Compte"]."</div>";
          }
          echo $ch2;
          //Colonne Sous_Compte (" ", puis les valeurs SC)
          echo '<td><div>&nbsp;</div>';
          foreach($Ventilations[$No]["SCompte"] as $i=>$sc)
          {
              $c=$Ventilations[$No]["Compte"][$i];
              echo "<div>" . Nullblanc($SComptes[$c][$sc]) ."</div>";
          }
          echo $ch2;
          //Colonne Tiers
          echo '<td><div>' . Nullblanc($Ligne['T']) . "</div>";
          foreach($Ventilations[$No]["Tiers"] as $c)
          {
              echo "<div>" . Nullblanc(trim($c,"'")) . "</div>";
          }
          echo $ch2;
          //Colonne Relevé (1 seule ligne)
          $d=formatdate($Ligne["R"]);
          echo '<td>' . $d . "</td>\n";
          //Colonne Débit (Le total, puis les détails)
          $d=formatnombre($Ligne["d"]);
          echo '<td><div>' . Nullblanc($Ligne['d']) . "</div>";
          foreach($Ventilations[$No]["Debit"] as $c)
          {
              $d=formatnombre($c);
              echo "<div>$d</div>";
          }
          echo $ch2;
          //Colonne Crédit (Le total, puis les détails)
          $d=formatnombre($Ligne["c"]);
          echo '<td><div>'.Nullblanc($Ligne['c'])."</div>";
          foreach($Ventilations[$No]["Credit"] as $c)
          {
              $d=formatnombre($c);
              echo "<div>$d</div>";
          }
          echo $ch2;
          //Colonne Commentaires
          echo '<td><div>'.Nullblsp($Ligne['Com'])."</div>";
          foreach($Ventilations[$No]["Comment"] as $c)
          {
              echo "<div>" . Nullblanc(trim($c,"'")) . "</div>";
          }
          echo $ch2;
          //Colonne Solde (1 seule ligne)
          $solde=(substr($Ligne["O"],0,3)=="CB-") 
                    ? $solde : $solde+$Ligne["c"]-$Ligne["d"];
          $d=formatnombre($solde);
          echo '<td>' . $d . $ch2;
// lignes invisibles           
          echo "<td class='zero'>" . Nullblanc($Ligne["S_P"]) . "</td>";  //11
          $d=formatdate($Ligne["S_L"]);
          echo "<td class='zero'>$d</td>";                                //12
          echo "<td class='zero'>" . Nullblanc($Ligne["S_A"]) . "</td>";  //13
          echo "<td class='zero'>" . Nullblanc($Ligne["V_P"]) . "</td>";  //14
          $d1=formatdate($Ligne["V_L"]);
          echo "<td class='zero'>$d1</td>";                               //15
          echo "<td class='zero'><div>" . $Ligne["NoC"] . "</div>";       //16
          foreach($Ventilations[$No]["Compte"] as $c)
          {
              echo "<div>$c</div>";
          }
          echo "</td>";                //  : N° de compte
 
          echo "<td class='zero'><div>" . $Ligne["NoS"] . "</div>";       //17
          foreach($Ventilations[$No]["SCompte"] as $c)
          {
              echo "<div>$c</div>";
          }
          echo "</td>";                // 18 : N° de sous-compte
          $Vent=NULL; //RAZ
        }
        else
        { //cette ligne n'est pas une ventilation
          echo '<td>' . Nullblanc($Ligne["N"]) . $ch2;// 0  N0 de ligne
          echo '<td>' . Nullblanc($Ligne["O"]) . $ch2;// 1  Opération
          $d=formatdate($Ligne["D"]);                        // 2  Date
          echo '<td>' . $d . $ch2;
          if ($Ligne["CC"]=="A compléter")
            echo '<td><i>' . $Ligne["CC"] . "</i>" . $ch2;        
          else                                          // 3 Libellé du Compte
            echo '<td>' . Nullblanc($Ligne["CC"]). $ch2;
          if ($Ligne["SC"]=="A compléter")
            echo '<td><i>'. $Ligne["SC"] . "</i>" . $ch2;         
          else                                    // 4  Libellé du Sous-compte
            echo '<td>' . Nullblanc($Ligne["SC"]). $ch2;
          echo '<td>' . Nullblanc($Ligne["T"]). $ch2; // 5  Tiers
          $d=formatdate($Ligne["R"]);
          echo '<td>' . $d. $ch2;                     // 6  Relevé
          $d=formatnombre($Ligne["d"]);
          echo '<td>' . $d . $ch2;                    // 7  Débit
          $c=formatnombre($Ligne["c"]);                      
          echo '<td>' . $c. $ch2;                     // 8  Crédit
// Traitement du cumul des CB          
          if (substr($Ligne["O"],0,3)=="CB-")  //L'opération se fait sur CB
          {
            if(trim($Ligne["CC"])=="Relevé différé")
            {
              $Cumul[$Ligne["O"]]-=($Ligne["d"]-$Ligne["c"]);
              $solde-=($Ligne["d"]-$Ligne["c"]);
              echo '<td>' . $Cumul[$Ligne["O"]]. $ch2;// 9 Commentaire
            }
            else
            {
              $Cumul[$Ligne["O"]]+=($Ligne["d"]-$Ligne["c"]);
              echo '<td>' . Nullblanc($Ligne["Com"]). $ch2;// 9 Commentaire
              // ici, le solde du compte est inchangé
            }
          }
          else
          {
            $solde-=($Ligne["d"]-$Ligne["c"]);
            echo '<td>' . Nullblanc($Ligne["Com"]). $ch2;// 9 Commentaire
//
          }
          $d=formatnombre($solde);
          echo '<td>' . $d. $ch2;                    // 10 Solde
// lignes invisibles           
          echo "<td class='zero'>" . Nullblanc($Ligne["S_P"]) . "</td>";      
          $d=formatdate($Ligne["S_L"]);                      // 11 Saisi par
          echo "<td class='zero'>$d</td>";                   // 12 Saisi le
          echo "<td class='zero'>" . Nullblanc($Ligne["S_A"]) . "</td>";      
          echo "<td class='zero'>" . Nullblanc($Ligne["V_P"]) . "</td>";
                                               // 13 Saisi avec 14 Vérifié par
          $d=formatdate($Ligne["V_L"]);                    
          echo "<td class='zero'>$d</td>";                    // 15 Vérifié le 
          echo "<td class='zero'>" . $Ligne["NoC"] . "</td>";// 16 N° compte
          echo "<td class='zero'>" . $Ligne["NoS"] . "</td>";// 17 N° s-compte
        }
        echo "</tr>";
        echo("\n");
      }
      $db->free_result($r);
  ?>
      </tbody>  
    </table>
  </div> <!-- class 'interieur'          -->
  </div> <!-- class 'grand_conteneur'    -->
  <div class="pied">
          Cliquez sur un numéro de ligne pour ouvrir une fenêtre de saisie.
          <span class='debug'>
            var0=<?php echo $var0;?> et var16=<?php echo $var16;?>
            message=<?php $_SESSION["Message"];?></span>
          <div class='droite'>
            <button name='Retour' onclick="Retour()">Retour</button></div>
  </div>
<!-- Formulaire concernant une ligne "normale". Pour une ventilation, cf. + bas.  -->
  <div id='laligne' class='non uneligne z1'>
	  <form name="Saisie" action="" method="post">
      <div class='sous-titre'>
          Formulaire de saisie des écritures, à partir de la ligne N° 
                                <input type="text" name="var0" readonly>.
          <br /><br />
      </div>
      <input type="hidden" name="Fonct">
      <input type="hidden" name="Act">
 
      <input type="hidden" name="var10">   <!-- Solde -->
      <input type="hidden" name="var11">   <!-- Numéro de "Saisi_par" -->
      <input type="hidden" name="var14">   <!-- Numéro de "Vérifié_par" -->
      <input type="hidden" name="var16">   <!-- Tri -->
        <table class='table1'>
  	        <tr><td>Opération : </td><td><input type="text" name="var1">
	            <td>Date : <td><input type="text" name="var2"></tr>
<!--     Attention : var3 et var4 contiennent les NUMEROS de compte et de 
         sous-compte, mais affichent les libellés-->                
	        <tr><td>Compte : 
                <td><select name="var3" onchange="Go()"></select></td>
	            <td>Sous-compte :
                <td><select name="var4"></select></tr>
	        <tr><td>Tiers : 
                <td colspan=3><input type="text" name="var5">
	        <tr><td>Relevé : 
                <td><input type="text" name="var6"><td colspan=2></tr>
	        <tr><td>Débit : 
                <td><input type="text" name="var7">
	            <td>Crédit : 
                <td><input type="text" name="var8"></tr>
	        <tr><td>Commentaire : 
                <td colspan=3><input type="text" name="var9"></tr>
            <tr><td class='noir' colspan=4></tr>
	        <tr><td>Saisi par : 
                <td id="Saisi_par"><!--var11-->
	            <td>Date : 
                <td><input type="text" name="var12"></tr>
	        <tr><td>Méthode : 
                <td colspan=3><input type="text" name="var13">
	        <tr><td>Vérifié par : 
                <td id="Verif_par" onclick='verifie()'> <!--var14: nom-->
	            <td>Date : 
                <td><input type="text" name="var15"></tr>
            <tr><td class='noir' colspan=4></tr>
        </table>
        <table id='boutons' class='table2'>
          <caption>Après avoir modifié cette écriture, vous pouvez :</caption>
          <tr><td id='bouton1'>
              <td><input type='button' name='A' value='1' onclick='executer(1)'>
              <td id='bouton5'>
              <td><input type='button' name='B' value='5' onclick='executer(5)'>
          </tr>
          <tr><td id='bouton2'>
              <td><input type='button' name='C' value='2' onclick='executer(2)'>
              <td id='bouton6'>
              <td><input type='button' name='D' value='6' onclick='executer(6)'>
          </tr>
          <tr><td id='bouton3'>
              <td><input type='button' name='E' value='3' onclick='executer(3)'>
              <td id='bouton7'>
              <td><input type='button' name='F' value='7' onclick='executer(7)'>
          </tr>
          <tr><td id='bouton4'>
              <td><input type='button' name='G' value='4' onclick='executer(4)'>
              <td id='bouton8'>
              <td><input type='button' name='H' value='8' onclick='executer(8)'>
          </tr>
       </table>
       <br />
       <input type='button' name='bouton' value='Ventiler' 
            onclick="Ventiler()">
       <input type='button' name='bouton' value='Annuler' 
            onclick="Annuler('laligne')">
       <button class='baide' onclick="Afficher('aide_laligne', true)" form=''>
        Aide
       </button> 
   	</form>
  </div>
<?php include "aide_laligne.php";?> 
<!--Formulaire pour une ventilation -->
  <div id='ventile' class='non ventilation z1'>
	  <form name="SaisieV" action="" method="post">
      <div class='HautV'>
        <table>
          <caption>
            Ventilation de l'écriture, ligne N° 
            <input type="text" name="var0" readonly>
          </caption>
          <thead><tr>
            <th class="th0">OP</th>
            <th class="th1">Date</th>
            <th class="th2">Tiers</th>
            <th class="th3">Débit</th>
            <th class="th4">Crédit</th>
            <th class="th5">Commentaire</th></tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="text" name="var1"><!--OP-->
              <td><input type="text" name="var2"><!--Date-->
              <td><input type="text" name="var5"><!--Tiers-->
              <td><input type="text" name="var7"><!--Debit-->
              <td><input type="text" name="var8"><!--Credi-->
              <td><input type="text" name="var9"><!--Comme-->
            </tr>
          </tbody>
        </table>
        <input type="hidden" name="var6"><!--Relevé-->
        <input type="hidden" name="Fonct" value="Ventile">     
        <input type="hidden" name="var3">   <!-- Compte = 1 -->
        <input type="hidden" name="var4">   <!-- Sous-compte = 0 -->
        <input type="hidden" name="var10">   <!-- Solde -->
        <input type="hidden" name="var11">   <!-- Numéro de "Saisi_par" -->
        <input type="hidden" name="var14">   <!-- Numéro de "Vérifié_par" -->
        <input type="hidden" name="var16">   <!-- Tri -->
      </div><!-- HautV -->
      <div class="petit-container">
        <div class="en-teteV"> </div>    
        <div class="interieurV">        
	       <table classe='tablev'>
            <thead>  <tr>
                <th class=div0><div class=div0>&nbsp;</div></th>
                <th class=div1><div class=div1>Compte</div></th>
                <th class=div2><div class=div2>Sous-Compte</div></th>
                <th class=div3><div class=div3>Tiers</div></th>
                <th class=div4><div class=div4>Débit</div></th>  
                <th class=div5><div class=div5>Crédit</div></th>
                <th class=div6><div class=div6>Commentaire</div></th>
                <th class=div7></th> <!-- N0 de compte invisible -->
                <th class=div7></th> <!-- N0 de SS-compte invisib-->
            </tr></thead><tbody>
<!--     Attention : var4 et var5 contiennent les NUMEROS de compte et de 
         sous-compte, mais affichent les libellés-->
<?php // A la transmission du formulaire, les "vari" ci-dessous seront des tableaux.                        
      for($i=1;$i<10;$i++)
        {   echo("<tr id='lv$i'>"); ?> 
          <td><?php echo $i;?></td>
          <td><select name="var17" onchange="Go(<?php echo($i)?>)"></select></td>
	        <td><select name="var18"></select></td>
	        <td><input type="text" name="var19"></td>
	        <td><input type="text" name="var20"></td>
	        <td><input type="text" name="var21"></td>
	        <td><input type="text" name="var22"></td>
	        <td class=div6><input type="hidden" name="var23"></td>
	        <td class=div7><input type="hidden" name="var24"></td>
            </tr>
<?php   }   ?>
            </tbody></table>
            </div> <!-- interieurV --> 
       <div class="piedV"> 
       <table class="tablev"><tr>
          <td class="div03">Totaux :</td>
          <td class="div4"><input type="text" name="totD"></td>
          <td class="div5"><input type="text" name="totC"></td>
          <td class="div06 invis"></td>
        </tr></table></div> <!--piedV -->
       </div> <!--petit-container  -->    
       <table class='table1'>
          <tr><td class='noir' colspan=4></td></tr>
          <tr><td>Saisi par : </td>
              <td id="Saisi_par"><input type="text" name="var11"></td>
              <td>Date : </td>
              <td><input type="text" name="var12"></td>
          </tr>
          <tr><td>Méthode : </td><td colspan=3>
                  <input type="text" name="var13"></td>
          <tr><td>Vérifié par : </td>
              <td id="Verif_par"><input type="text" name="var14"></td>
              <td>Date : </td><td><input type="text" name="var15"></td></tr>
          <tr><td class='noir' colspan=4></td></tr>
       </table>
       <table id='boutons' class='table2'>
          <caption>Après avoir modifié cette écriture, vous pouvez :</caption>
          <tr><td id='bouton1'></td><td>
                    <input type='button' name='Act' value='1' onclick='ventilerb(1)'></td>
              <td id='bouton3'></td><td>
                    <input type='button' name='Act' value='3' onclick='ventilerb(1)'></td></tr>
          <tr><td id='bouton2'></td><td>
                    <input type='button' name='Act' value='2' onclick='ventilerb(1)'></td>
              <td id='bouton4'></td><td>
                    <input type='button' name='Act' value='4' onclick='ventilerb(1)'></td></tr>
       </table>
       <button class='bouton' name='bouton' value='Annuler' 
            onclick="Annuler('ventile')">Annuler</button>
   	</form>
  </div>      
<?php
 echo('<script type="text/javascript">');
      echo('document.all.L' . $PremLigne . '.scrollIntoView(true);');
 echo('</script>');
?>

3) le CSS (assez brouillon, je sais, je n'ai pas encore eu le temps de faire le ménage) : comptabilite.css(218 lignes)

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
/*body div:nth-child(1) {border:1px solid black; margin:0px; border-collapse:collapse;}
body div:nth-child(2) {border:1px solid orange; margin:0px; border-collapse:collapse;}
body div:nth-child(3) {border:1px solid cyan; margin:0px; border-collapse:collapse;}*/
body {font-size:1.3rem; zoom: normal; margin:0;}
.gros    {font-size: 2.5rem;}
.haut    {position: absolute; width:96rem;  left: 1rem;   overflow:  hidden;}
.hautb   {position: absolute; width:96rem;  left: 1rem;   overflow-Y:auto;}
.milieu  {position: absolute; width:97rem;  left: 1rem;   overflow-Y:auto;}
.milieuc {position: absolute; width:96rem;  left: 1rem;   overflow:  hidden;}
.milieug {position: absolute; width:49rem;  left: 1rem;   overflow:  scroll;}
.milieud {position: absolute; width:49rem;  right:1rem;   overflow:  auto;}
.bas     {position: absolute; width:96rem;  left: 1rem;   overflow:  hidden;}
.basg    {position: absolute; width:49rem;  left: 1rem;   overflow:  auto;}
.basd    {position: absolute; width:49rem;  right:1rem;   overflow-Y:auto;}
.droite  {position: absolute; top:0.5vh; right:3vh; height:90%;}
.droite button{width:6rem; height: 3.5vh;font-size:1.3rem;border:1px solid red;
            background-color:aqua; border-style:outset;}
.droite button:hover {background-color:fuchsia; color:yellow; }
.cannR   {position: absolute; width:5rem;   left: 0rem;   font-size: 1rem; }
.ccomp   {position: absolute; width:17.1rem;left: 0rem;   font-size: 1rem; }
.ctiers  {position: absolute; width:27.1rem;left: 0rem;   font-size: 1rem; }
.ctiersR {position: absolute; width:91rem;  left: 5rem;   font-size: 1rem;}
.cannees {position: absolute; width:78.5rem;left:17.1rem; font-size: 1rem;}
.cmois   {position: absolute; width:78.5rem;left:17.1rem; font-size: 1rem;}
.ctannees{position: absolute; width:68.5rem;left:27.1rem; font-size: 1rem;}
.ctmois  {position: absolute; width:68.5rem;left:27.1rem; font-size: 1rem;}
.a_val   {color:green; font-weight:bold;}
.debug   {color:red;}
.val     {color:black; font-weight:bold;}
/*Règles pour la table à en-tête fixe, et corps défilant.  */
.grand-container {position:absolute; width:99.9vw; height:91.6vh; ; 
          padding-top:3vh; padding-left:1px;margin-left:-1px;}
.petit-container {position:relative; width:99.5%; height:27vh; 
          padding-top:3vh; padding-left:1px;margin-left:-1px;}
.en-tete {position:absolute;top:0;right:1px;left:1px;
            background-color:pink; height:3vh; /* height of header */}
.hautV   {position:absolute;top:2px;right:1px;left:1px; 
            background-color:pink;  /* height of header */}
.piedV    {position:absolute;bottom:0;right:1px;left:1px; width:96.5%;
            background-color:lightcyan; height:4vh; /* height of header */}
.invis  {background-color:lightcyan;}            
.interieur {overflow-x:hidden; overflow-y:auto; height:100%;padding-left:2px;margin-left:-2px;}
.interieurV {overflow-x:hidden; overflow-y:auto; height:23vh;padding-left:2px;margin-left:-2px;}
.en-teteV {position:absolute;top:0;right:1px;left:1px;
            background-color:pink; height:4vh; /* height of header */}
.div0        {width:1rem; min-width:1rem; max-width:1rem;}
.div1, .div2 {width:12rem; min-width:12rem; max-width:12rem;}
.div3, .div6 {width:16.5rem; min-width:16.5rem; max-width:16.5rem;}
.div03       {width:42rem; min-width:42rem; max-width:42em;text-align:right;}
.div4, .div5 {width:5rem; min-width:5rem; max-width:5rem;}
.div06       {width:14rem; min-width:14rem; max-width:14rem;}
.div7    {display:none}
.th0    {width:6rem; min-width:6rem; max-width:6rem; text-align:center}
.th1    {width:6rem; min-width:6rem; max-width:6rem;}
.th2    {width:13rem; min-width:13rem; max-width:13rem;}
.th3, .th4 {width:5rem; min-width:5rem; max-width:5rem;}
.th5    {width:12rem; min-width:12rem; max-width:12rem;}
thead   {top:0; }
tbody   {bottom:1px; }
thead div {position:absolute; top:0; text-align:center; }
.pied   {position: absolute;  width: 99vw; height: 4vh; bottom:0; left:1vh; padding-top: 3px;
       border: 1px solid red;  padding-left:2px;margin-left:-2px;
        background-color: pink;}
.non    {display: none; padding:0; margin:0; width:0;}        
.z1 {z-index:1; }
.z2 {z-index:2; }
.journal {table-layout:fixed; width:99%; overflow-x:hidden; overflow-y:auto; border:1px solid red ;}
.journal td  {border-left:1px solid red ;border-bottom:1px solid red; overflow:hidden; white-space:nowrap;
		          height:2vh; border-collapse:collapse; text-align:left; vertical-align:top; }
.journal td th {font-size:1.2rem;}        
 
.journal td:nth-child(1),              .journal td:nth-child(8), 
.journal td:nth-child(9),              .journal td:nth-child(11) 
          {text-align:right;}
.journal td:nth-child(3),              .journal td:nth-child(7) 
          {text-align:center;}
.journal td input{display:inline-block;}
.aide   {position:absolute; width:80vw;left:9vw;top:10vh; height:80vh; margin:1rem; padding: 1rem; 
         border: 2px solid green; background-color:MintCream; font-size: 1.7rem;text-align:center;}
.baide  {right:1px; width:5rem; height:100%;text-align:center;}
.uneligne {position:absolute; width:64vw;left:13vw;top:15vh; height:70vh; margin:1rem;
            border: 1px solid black; background-color:yellow; text-align:center;}
.uneligne input, select, button{background-color:lime; width: 100%; height: 1.5rem; }
.bouton {width:8rem;}            
.ventilation {position:relative; width:64vw;left:13vw;top:10vh; height:75vh; margin:1rem; 
              border: 1px solid black; background-color:lightcyan; text-align:center;}
.ventilation input, select {background-color:lime; width: 99%; border: 1px solid black; 
                            height:2rem; font-size:1rem; }            
.ventilation caption input {width:3em; text-align:right;} 
.ventilation table {width:100%;}
.ventilation td, .ventilation tr {padding:0; margin:0}
.ventilation .noir {height:2px; background-color:black;}
input:read-only {background-color:azure;}            
input:-moz-read-only {background-color:azure;}            
.uneligne div:first-of-type input {width:3em; text-align:right;}
.uneligne table, .ventilation table {width:100%;padding:0; border-collapse:collapse;}
.uneligne .noir {height:2px; background-color:black;}
.test, .test1    {padding:0; border-collapse:collapse;}
.test td, .test1 td {border:1px solid black;}
.HautV tbody td {border:0}
.HautV table td {text-align:right;}
.HautV table td:nth-child(4) input {text-align:right}
.HautV table td:nth-child(5) input {text-align:right}
.table1 td, .table2 td, .ventilation td {border:1px solid red;}
.table1 td:nth-child(odd) {text-align:right; width:9rem; min-width:9rem;max-width:9rem;}
.table1 td:nth-child(even) {text-align:left;}
.table2 td:nth-child(odd) {width:40%;min-width:40%;max-width:40%;text-align:right; overflow:hidden;}
/*.uneligne #boutons td:nth-child(1), .uneligne #boutons td:nth-child(3) {width:15rem;min-width:15rem;max-width:15rem;}
*/
input[type='button'], .bouton button  {width:8rem; border:2px solid black; border-style:outset;background-color:aqua }          
.bouton {height:2.5rem;  font-size:1.3rem}
button [disabled] {background-color:aqua; color: black;}
td input[type='button'] {width:3rem; font-size:1.3rem}
#laligne tr, #laligne td {padding:0px; margin:0px;}          
input[type='button']:hover, button:hover {background-color:fuchsia; color:yellow; }
input[disabled]:hover, button[disabled]:hover {background-color:aqua; color: black;}
/*.table2 td:nth-child(2), .table2  td:nth-child(4) {width:7rem; min-width:7rem; max-width:7rem;text-align:left;}*/
/*.journal {overflow:scroll;} */
/*Cellules des tables*/
.totaux		{width:5rem !important; min-width:5rem !important; max-width:5rem !important;}
/* */
@media screen and (device-aspect-ratio:16/9){
.haut    {height:3.8rem;top: 0.5rem; }
.hautb   {height:2.1rem; top: 1.7rem;}
.milieu  {height: 37.4rem; top: 4.3rem;}
.milieuc {height: 32rem; top: 4.3rem;}
.milieug {height: 32rem; top: 4.3em; }
.milieud {height: 32rem; top: 4.3rem;}
.bas     {position:absolute; bottom:0;}
.basg    {height:  3rem; top: 38rem; }
.basd    {height:  3rem; top: 38rem; }
.cannR   {height:37.4rem; }
.ccomp   {height:37.4rem; }
.ctiers  {height:37.4rem; }
.ctiersR {height:37.4rem; }
.cannees {height:37.4rem; }
.cmois   {height:37.4rem; }
.ctannees{height:37.4rem; }
.ctmois  {height:37.4rem; }
}
@media screen and (device-aspect-ratio:5/4){
.haut    {height:5rem; top: 0.5rem; }
.hautb   {height:2.1rem; top: 1.7rem; }
.milieu  {height: 59rem; top: 5.5rem; }
.milieuc {height: 32rem; top: 4.3rem; }
.milieug {height: 32rem; top: 4.3em;  }
.milieud {height: 32rem; top: 4.3rem; }
.bas     {height:  4rem; top:64.5rem; }
.basg    {height:  4rem; top:64.5rem; }
.basd    {height:  4rem; top:64.5rem; }
.cannR   {height:59rem; }
.ccomp   {height:59rem; }
.ctiers  {height:59rem; }
.ctiersR {height:59rem; }
.cannees {height:59rem; }
.cmois   {height:59rem; }
.ctannees{height:59rem; }
.ctmois  {height:59rem; }
}
/* Divisions des comptes/sous-comptes, mois ou années*/
#A {overflow-X: hidden;overflow-Y: scroll;}
#B {overflow-X: scroll;overflow-Y: hidden;}
#C {overflow: scroll;}
/*Tables*/
.annee, .annR, .comptes, .tannees, .mois, .tiers
					{ table-layout:fixed; border-collapse:collapse; overflow:hidden;font-size:1rem;}
/*Cellules des tables des années/revenus*/
.annR th, .annR td
					{width:5rem;min-width:5rem;max-width:5rem;}
.annR th:nth-child(1), .annR td:nth-child(1)
					{width:5rem;min-width:5rem;max-width:5rem;}
/*Cellules des tables des mois ou des années*/
.annees th, .annees td, .tannees th, .tannees td, .mois th, .mois td
					{width:4rem; max-width:4rem; min-width:4rem; }
.mois th:nth-child(13), .mois td:nth-child(13),
.mois th:nth-child(14), .mois td:nth-child(14)
					{width:6rem !important;  max-width:6rem !important; min-width:6rem !important;}
/*Cellules des tables des comptes/souscomptes*/
.comptes th, .comptes td
          { border:1px solid red; height:1.3rem; min-height:1.3rem; max-height:1.3rem;
            white-space:nowrap;overflow:hidden; }
.comptes th:nth-child(1), .comptes td:nth-child(1)
					{width:7rem;min-width:7rem;max-width:7rem;}
.comptes th:nth-child(2), .comptes td:nth-child(2)
					{width:10rem;min-width:10rem;max-width:10rem;}
.comptes th:nth-child(3), .comptes td:nth-child(3)
					{width:10rem;min-width:10rem;max-width:10rem;}
/*Cellules des tables des tiers*/
.tiers th, .tiers td
          { border:1px solid red; height:1.3rem; min-height:1.3rem; max-height:1.3rem;
						width:7rem; max-width:7rem; min-width:7rem;
            white-space:nowrap;overflow:hidden; }
.tiers th:nth-child(2), .tiers td:nth-child(2)
					{width:10rem;min-width:10rem;max-width:10rem;}
.tiers th:nth-child(3), .tiers td:nth-child(3)
					{width:10rem;min-width:10rem;max-width:10rem;}
.tiersR th, .tiersR td
          { border:1px solid red; height:1.3rem; min-height:1.3rem; max-height:1.3rem;
						width:7.5rem; max-width:7.5rem; min-width:7.5rem;
            white-space:nowrap;overflow:hidden; }
/*autres------------------------------------*/
.t00 th, .t00 td { border:0 ; overflow:hidden; white-space:nowrap; padding:.5rem; ;
										height:2rem; min-height:2rem; max-height:2rem;text-align:left; }
.t00 input {width:5rem;}
/*.test td, .test th
					{width:8rem !important; max-width:8rem !important; min-width:8rem !important; }*/
.dbl{line-height:200%;}
.enl {display: inline-block; height:40%;}
.enl form {display: inline-block; height:1.5rem; }
.enl100 {display: inline-block; width:100%;height:35%; }
 
 
 input, select  {white-space:nowrap; overflow:hidden; margin:0; border:0}
 .gauche {text-align:left;}
.noov{overflow:auto;}
 
.petit input, .petit select {font-size:1.6rem;}
.moyen {font-size:2.2rem;}

Et enfin 4) le javascript : ligne.js (229 lignes)

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
// JavaScript Document
  function Afficher(div, ok)
  { 
    if (ok) 
      document.getElementById(div).style.display="block";
    else 
      document.getElementById(div).style.display='none';
 //   return false;
  }
  function Annuler(id)
  { 
    document.getElementById(id).style.display="none";
  } 
// Fonction Executer(n) : clic sur l'un des boutons du formulaire
  function executer(bouton)
  { 
    document.Saisie.Fonct.value='ligne';
    document.Saisie.Act.value=bouton;
//    alert("Exécuter " +  document.Saisie.Fonct.value + " " 
//           + document.Saisie.Act.value);
    document.Saisie.submit();
  }     
// Fonction Go() exécutée quand le compte change
// Change la liste d'options "Sous-compte" quand compte est changé
  function Go()   
  {
    var c, v, i=0;  
    document.Saisie.var4.options.length=0;    // RAZ la liste
    for (c in SCo[document.Saisie.var3.value])
    {
        v=SCo[document.Saisie.var3.value][i];
        document.Saisie.var4.options.add(new Option(v,i));
        i++;
    }
  }
  function Retour()
  {
    document.location="../bienvenue.php";
  }
// Fonction Sel : clic dans une ligne simple du tableau : 
// désélectionne toutes les lignes, et sélectionne celle du clic, 
// puis remplit le formulaire "Saisie"    
  function Sel(lien)
  { // alert("Sel(lien)");  // lien : l'objet DOM ligne de la table où l'on a cliqué
    var i,j,table,cible,nc,nsc;
    table=document.getElementById("latable");
    for (i = 0 ; i < table.getElementsByTagName('tr').length ; i++)
    { table.getElementsByTagName('tr')[i].style.backgroundColor="#FFFFFF";}
    lien.style.backgroundColor="#00FFFF";
    lien.scrollIntoView(true);
    cible=document.Saisie;
    cible.reset() ;
//Numéro
    cible.var0.value=lien.getElementsByTagName('td')[0].firstChild.nodeValue ;                 
//Opération
    if (lien.getElementsByTagName('td')[1].firstChild.nodeValue=='')
     cible.var1.value=0; //Opération
    else 
     cible.var1.value=lien.getElementsByTagName('td')[1].firstChild.nodeValue;
//Date Op
    if (lien.getElementsByTagName('td')[2].firstChild.nodeValue=='')
     cible.var2.value=0; //Date
    else 
     cible.var2.value=lien.getElementsByTagName('td')[2].firstChild.nodeValue;
//Compte
    i=0;  
    cible.var3.options.length=0;    // RAZ la liste
    for (c in Com['C'])
    {
        cible.var3.options.add (new Option(Com['C'][c],i));    
        if (i==lien.getElementsByTagName('td')[16].firstChild.nodeValue)  
         cible.var3.options[i].selected=true;
        i++;
    }
  //Sous-compte
    cible.var4.options.length=0;
 //Tiers
    if (lien.getElementsByTagName('td')[5].firstChild.nodeValue=='')cible.var5.value=0; //Tiers
    else cible.var5.value=lien.getElementsByTagName('td')[5].firstChild.nodeValue ;
//Date de relevé
    if (lien.getElementsByTagName('td')[6].firstChild.nodeValue=='')cible.var6.value=0;
    else cible.var6.value=lien.getElementsByTagName('td')[6].firstChild.nodeValue;
//Débit
    if (lien.getElementsByTagName('td')[7].firstChild.nodeValue=='')cible.var7.value=0;
    else cible.var7.value=lien.getElementsByTagName('td')[7].firstChild.nodeValue;
//Crédit
    if (lien.getElementsByTagName('td')[8].firstChild.nodeValue=='')cible.var8.value=0;
    else cible.var8.value=lien.getElementsByTagName('td')[8].firstChild.nodeValue;
//Commentaire
    if (lien.getElementsByTagName('td')[9].firstChild.nodeValue=='')cible.var9.value=0;
    else cible.var9.value=lien.getElementsByTagName('td')[9].firstChild.nodeValue;
//Solde
//    if (lien.getElementsByTagName('td')[10].firstChild.nodeValue=='')cible.var10.value=0;
//    else cible.var10.value=lien.getElementsByTagName('td')[10].firstChild.nodeValue;
//Saisi par
    if (lien.getElementsByTagName('td')[11].firstChild.nodeValue=='')cible.var11.innerHTML='';
    else cible.var11.value=lien.getElementsByTagName('td')[11].firstChild.nodeValue;
    document.getElementById("Saisi_par").innerHTML=Noms[cible.var11.value];
//Saisi le
    if (lien.getElementsByTagName('td')[12].firstChild.nodeValue=='')cible.var12.value=0;
    else cible.var12.value=lien.getElementsByTagName('td')[12].firstChild.nodeValue;
//Saisi avec
    if (lien.getElementsByTagName('td')[13].firstChild.nodeValue=='')cible.var13.value=0;
    else cible.var13.value=lien.getElementsByTagName('td')[13].firstChild.nodeValue;
//Vérifié par
    if (lien.getElementsByTagName('td')[14].firstChild.nodeValue=='')cible.var14.value=0;
    else cible.var14.value=lien.getElementsByTagName('td')[14].firstChild.nodeValue;
//alert("sel");    
    document.getElementById("Verif_par").innerHTML=Noms[cible.var14.value];
//Vérifié le
    if (lien.getElementsByTagName('td')[15].firstChild.nodeValue=='')cible.var15.value=0;
    else cible.var15.value=lien.getElementsByTagName('td')[15].firstChild.nodeValue;
//colonne de tri
//    cible.var16.value=<?php echo($var16)?>;
// Attention, v16 doit être définie globalement.
    cible.var16.value=var16;
// Table des boutons
    document.getElementById('bouton1').innerHTML='la sauvegarder :';    
    document.getElementById('bouton5').innerHTML='test 1 :';    
    document.getElementById('bouton2').innerHTML='en créer une nouvelle :';    
    document.getElementById('bouton6').innerHTML='test 2 :';    
    document.getElementById('bouton3').innerHTML=
        'compl. tous les "' +cible.var5.value + '" :';
        document.getElementById('bouton8').innerHTML='la supprimer :';
    document.getElementById("laligne").style.display="block";
  } //Sel(Id)
// Fonction Ventile : clic dans une ligne de ventilation du tableau : 
// désélectionne toutes les lignes, et sélectionne celle du clic, 
// puis remplit le formulaire "Ventile"    
  function SelV(lien) // lien : l'objet DOM représentant la ligne de ventilation où l'on a cliqué
  { // alert("SelV('Id')");
    var i,j,table,cible,ventile,nc,nsc, No;
    table=document.getElementById("latable");
    for (i = 0 ; i < table.getElementsByTagName('tr').length ; i++)
    { table.getElementsByTagName('tr')[i].style.backgroundColor="#FFFFFF";}
    lien.style.backgroundColor="#00FFFF";
    lien.scrollIntoView(true);
    cible=document.SaisieV;
    cible.reset() ;
//Remplit les champs du formulaire    
//Numéro (premier indice dans le tableau Ventile-voir ligne.php)
    No=lien.getElementsByTagName('td')[0].firstChild.nodeValue ;                 
    cible.var0.value=No;                 
//Opération
    if (lien.getElementsByTagName('td')[1].firstChild.nodeValue=='')
     cible.var1.value=0; //Opération
    else 
     cible.var1.value=lien.getElementsByTagName('td')[1].firstChild.nodeValue;
//Date Op
    if (lien.getElementsByTagName('td')[2].firstChild.nodeValue=='')
     cible.var2.value=0; //Date
    else 
     cible.var2.value='Ventilation';
//Compte  // C'est évidemment "Ventilation". Ensuite, il faut remplir le tableau...
    cible.var3.value=lien.getElementsByTagName('td')[3].firstChild.nodeValue;
  //Sous-compte
    cible.var4.value="";
//Tiers
    if (lien.getElementsByTagName('td')[5].firstChild.innerHTML=='')cible.var5.value=0; //Tiers
    else cible.var5.value=lien.getElementsByTagName('td')[5].firstChild.innerHTML ;
//Date de relevé
    if (lien.getElementsByTagName('td')[6].firstChild.nodeValue=='')cible.var6.value=0;
    else cible.var6.value=lien.getElementsByTagName('td')[6].firstChild.nodeValue;
//Débit
    if (lien.getElementsByTagName('td')[7].firstChild.innerHTML=='')cible.var7.value=0;
    else cible.var7.value=lien.getElementsByTagName('td')[7].firstChild.innerHTML;
 
//Crédit
    if (lien.getElementsByTagName('td')[8].firstChild.innerHTML=='')cible.var8.value=0;
    else cible.var8.value=lien.getElementsByTagName('td')[8].firstChild.innerHTML;
//Commentaire
    if (lien.getElementsByTagName('td')[9].firstChild.innerHTML=='')cible.var9.value=0;
    else cible.var9.value=lien.getElementsByTagName('td')[9].firstChild.innerHTML;
//Solde
//    if (lien.getElementsByTagName('td')[10].firstChild.nodeValue=='')cible.var10.value=0;
//    else cible.var10.value=lien.getElementsByTagName('td')[10].firstChild.nodeValue;
//Saisi par
    if (lien.getElementsByTagName('td')[11].firstChild.nodeValue=='')cible.var11.innerHTML='';
    else cible.var11.value=lien.getElementsByTagName('td')[11].firstChild.nodeValue;
    document.getElementById("Saisi_par").innerHTML=Noms[cible.var11.value];
//Saisi le
    if (lien.getElementsByTagName('td')[12].firstChild.nodeValue=='')cible.var12.value=0;
    else cible.var12.value=lien.getElementsByTagName('td')[12].firstChild.nodeValue;
//Saisi avec
    if (lien.getElementsByTagName('td')[13].firstChild.nodeValue=='')cible.var13.value=0;
    else cible.var13.value=lien.getElementsByTagName('td')[13].firstChild.nodeValue;
//Vérifié par
    if (lien.getElementsByTagName('td')[14].firstChild.nodeValue=='')cible.var14.value=0;
    else cible.var14.value=lien.getElementsByTagName('td')[14].firstChild.nodeValue;
//alert("sel");    
    document.getElementById("Verif_par").innerHTML=Noms[cible.var14.value];
//Vérifié le
    if (lien.getElementsByTagName('td')[15].firstChild.nodeValue=='')cible.var15.value=0;
    else cible.var15.value=lien.getElementsByTagName('td')[15].firstChild.nodeValue;
//colonne de tri
//    cible.var16.value=<?php echo($var16)?>;
// Attention, v16 doit être définie globalement.
    cible.var16.value=var16;
// Table des boutons
    document.getElementById('bouton1').innerHTML='la sauvegarder :';    
    document.getElementById('bouton2').innerHTML='en créer une nouvelle :';    
    document.getElementById('bouton3').innerHTML=
        'compl. tous les "' +cible.var5.value + '" :';
    document.getElementById("ventile").style.display="block";
  } //SelV(Id, col)
  function Tri(col)
  { var cible;
    cible=document.Saisie;
    cible.var16.value=col;
    cible.Fonct.value="ligne";    
    cible.Act.value="0";    
    cible.submit();
  }  
  function Ventiler(id)
  { 
    document.getElementById('laligne').style.display="none";
    document.getElementById('ventile').style.display="block";
  }
  function verifie()
  { var d,j,m,a;   
 //alert("verifie");
    document.Saisie.var14.value=NoNom;
    document.getElementById("Verif_par").innerHTML=Noms[document.Saisie.var14.value];
    d=new Date();
    j="0"+d.getDate();
    m="0"+(d.getMonth()+1);
    a=" "+d.getFullYear();
    document.Saisie.var15.value=j.slice(-2)+"/"+m.slice(-2)+"/"+a.slice(-2);
  }

Bonne lecture !

AMIcalement.

16/11/2019, 11h25
Invité
Bonjour,

1- les codes contenant du PHP n'ont aucun intérêt ici.
Il faut montrer le code source généré ("Ctrl"+"U").

2- 1ers soucis :
- je ne vois aucun <!DOCTYPE...>
- où est la balise <head> ?
- En_Tete_HTML() (ligne 42) :koi: ? (c'est une fonction ? un commentaire ? ... ?)
- on voit des <th class='col1'>, <th class='col2'>, <td class='zero'>,... mais rien dans le fichier CSS concernant ces classes .col1, .col2, .zero,...
Je veux bien être de "bonne volonté", mais là, il y a de l'abus.
J'attends de voir le code généré... 8O

[EDIT] Franchement, je me demande comment tu arrives à t'y retrouver...
- $r, $L, $var1, $var2,...., $ch1, $ch2,.... : des noms de variables sans signification claire
- un code "en vrac"... : pas de séparations claires entre les différents blocs de traitement,... Une chatte y perdrait ses petits.
- ...

Eh bien tu étais prévenu...

Oui, En_Tete_HTML est une fonction. Tu verras son effet ci-dessous : extraits du "code de la page" :

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
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
<!DOCTYPE html>
<html><head>
 
<!--    <meta name='viewport' content='width=device-width, initial-scale=1.0' />  -->
    <style type='text/css'>
     body{font-size:10px;}
<!--     font-family:Verdana, Arial, Helvetica, sans-serif;} -->
     </style>  
    <meta http-equiv="Content-Language" content="fr">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="ligne.js"></script>
    <link rel="stylesheet" href="comptabilite.css" type="text/css">   
<!--Largeur=1070, 10 car. = 77-->
<!--On met 195.5 caractères dans une ligne. -->
<!--Ce qui laisse 61.75 positions pour les Tiers et pour les Commentaires.-->
<style type='text/css'>
.col1{width:32px;}
.col2{width:72px;}
.col3{width:48px;}
 
---[couic]
 
.col16{width:48px;}
.zero{display:none;}
</style>
<!--ligne.php--><script>
var Com=new Array(); Com['C']=new Array(); Com['G']=new Array(); 
            var SCo=new Array();
Com[0]=new Array(); Com['C'][0]='A compléter';Com['G'][0]='';
SCo[0]=new Array();SCo[0][0]='A compléter';
Com[1]=new Array(); Com['C'][1]='Ventilation';Com['G'][1]='';
SCo[1]=new Array();SCo[1][0]=' ';
Com[2]=new Array(); Com['C'][2]='Aliment. Autres';Com['G'][2]='D';
SCo[2]=new Array();SCo[2][0]='';SCo[2][1]='Gateaux';SCo[2][2]='Nourriture';SCo[2][3]='Plats à emporter';SCo[2][4]='Restaurant';SCo[2][5]='Vin';SCo[2][6]='Goûter, café, thé...';
 
  ....[couic]
  
Com[33]=new Array(); Com['C'][33]='Revenu d\'épargne';Com['G'][33]='C';
SCo[33]=new Array();SCo[33][0]='';SCo[33][1]='CEL';SCo[33][2]='Livret A Yves';SCo[33][3]='Livret A Dany';SCo[33][4]='Livret Yves';SCo[33][5]='Livret Dany';SCo[33][6]='Autre';</script>
<script>
var Ventil=new Array()
Ventil[731]=new Array(); 
Ventil[731]['Compte']=new Array();
Ventil[731]['SCompte']=new Array();
Ventil[731]['Tiers']=new Array();
Ventil[731]['Debit']=new Array();
Ventil[731]['Credit']=new Array();
 
...[couic]
 
Ventil[834]['Comment'][4]='12 b. Château Les Tuileries'; 
Ventil[834]['Comment'][5]=' &nbsp6 b. Château Les Tuileries'; 
Ventil[834]['Comment'][6]='12 b. Château Les Tuileries'; 
var16=2;NoNom=1;</script>
<script>
Noms=new Array();Noms[0]='Inconnu';Noms[1]='yves';Noms[2]='dany';Noms[3]='moi';</script>
 
    <title>Comptabilité</title>
    <!--Principe : cette procédure gère les interactions avec les tables 
        "lignes","Comptes", "Souscomptes" et "Ventilations". 
        Les aiguillages sont faits en fonction des variables $Fonct et $Act  -->
  </head>
  <body>  <!--  moyen=> font-size:2.6rem -->
<script>var var16=2;</script>
<!-- ligne-0.php --><!--Saisie des écritures au jour le jour.-->
    <div class="grand-container">
      <div class="en-tete"> </div>
      <div class="interieur">
       <table class="journal">
        <thead>
         <tr>
            <th class='col1'><div onclick='Tri(0)'>No</div></th>
            <th class='col2'><div onclick='Tri(1)'>OP</div></th>
            <th class='col3'><div onclick='Tri(2)'>Date</div></th>
            <th class='col4'><div onclick='Tri(3)'>Compte</div></th>
            <th class='col5'><div onclick='Tri(4)'>Sous-compte</div></th>
            <th class='col6'><div onclick='Tri(5)'>Tiers</div></th>
            <th class='col7'><div onclick='Tri(6)'>Relevé</div></th>
            <th class='col8'><div onclick='Tri(7)'>Débit</div></th>
            <th class='col9'><div onclick='Tri(8)'>Crédit</div></th>
            <th class='col10'><div onclick='Tri(9)'>Commentaire</div></th>
            <th class='col11'><div>Solde</div></th>
            <th class='zero'></th><th class='zero'></th><th class='zero'></th><th class='zero'></th><th class='zero'><th class='zero'></th><th class='zero'></th>
<!-- attention, cette ligne longue est voulue -->
          </tr>
      </thead> 
      <tbody id="latable">
<tr id='L1' class='a_val' onclick="Sel(L1)"><td>1
<td>VIR
<td>14/02/18
<td>Autres revenus
<td>Divers
<td>compte SG : création du compte
<td>14/02/18
<td> 
<td>300.00
<td> 
<td>300.00
<td class='zero'>1</td><td class='zero'>16/05/19</td><td class='zero'>Excel</td><td class='zero'>1</td><td class='zero'>05/11/19</td><td class='zero'>27</td><td class='zero'>4</td></tr>
<tr id='L2' class='a_val' onclick="Sel(L2)"><td>2
<td>VIR
<td>14/02/18
<td>Epargne
<td>Livret Dany
<td>création compte sur livret
<td>14/02/18
<td>10.00
<td> 
<td> 
<td>290.00
<td class='zero'>1</td><td class='zero'>16/05/19</td><td class='zero'>Excel</td><td class='zero'>1</td><td class='zero'>14/11/19</td><td class='zero'>12</td><td class='zero'>5</td></tr>
 
   ...[couic]
 
<tr id='L1623' class='a_val' onclick="Sel(L1623)"><td>1623
<td>CB-D
<td>30/10/19
<td>Aliment. Dany
<td>Super Marché
<td>78 PICARD SA  0217
<td> 
<td>33.65
<td> 
<td> 
<td>-318.45
<td class='zero'>1</td><td class='zero'>04/11/19</td><td class='zero'>CB-D-04-11-2019_08-20-24.csv</td><td class='zero'>2</td><td class='zero'>08/11/19</td><td class='zero'>3</td><td class='zero'>1</td></tr>
<tr id='L1629' class='a_val' onclick="Sel(L1629)"><td>1629
<td>7797400
<td>04/11/19
<td>Loisirs
<td>Sport
<td>Club de golf
<td> 
<td>10.00
<td> 
<td> Compétition
<td>-328.45
<td class='zero'>1</td><td class='zero'>05/11/19</td><td class='zero'>ligne-2.php</td><td class='zero'>1</td><td class='zero'>05/11/19</td><td class='zero'>19</td><td class='zero'>7</td></tr>
<tr id='L1631' class='a_val' onclick="Sel(L1631)"><td>1631
<td>7797401
<td>06/11/19
<td>Loisirs
<td>Sport
<td>Christophe Faucon
<td> 
<td>24.00
<td> 
<td> Cours de golf
<td>-352.45
<td class='zero'>1</td><td class='zero'>07/11/19</td><td class='zero'>ligne-2.php</td><td class='zero'>1</td><td class='zero'>07/11/19</td><td class='zero'>19</td><td class='zero'>7</td></tr>
<tr id='L1630' class='val' onclick="Sel(L1630)"><td>1630
<td>PRLV SEPA
<td>12/11/19
<td>L'Espérance
<td> 
<td>Engie
<td> 
<td>58.21
<td> 
<td> 
<td>-410.66
<td class='zero'>1</td><td class='zero'>05/11/19</td><td class='zero'>ligne-2.php</td><td class='zero'>0</td><td class='zero'> </td><td class='zero'>16</td><td class='zero'>0</td></tr>
      </tbody>  
    </table>
  </div> <!-- class 'interieur'          -->
  </div> <!-- class 'grand_conteneur'    -->
  <div class="pied">
          Cliquez sur un numéro de ligne pour ouvrir une fenêtre de saisie.
          <span class='debug'>
            var0=0 et var16=2            message=</span>
          <div class='droite'>
            <button name='Retour' onclick="Retour()">Retour</button></div>
  </div>
<!-- Formulaire concernant une ligne "normale". Pour une ventilation, cf. + bas.  -->
  <div id='laligne' class='non uneligne z1'>
	  <form name="Saisie" action="" method="post">
      <div class='sous-titre'>
          Formulaire de saisie des écritures, à partir de la ligne N° 
                                <input type="text" name="var0" readonly>.
          <br /><br />
      </div>
      <input type="hidden" name="Fonct">
      <input type="hidden" name="Act">
      <input type="hidden" name="var10">   <!-- Solde -->
      <input type="hidden" name="var11">   <!-- Numéro de "Saisi_par" -->
      <input type="hidden" name="var14">   <!-- Numéro de "Vérifié_par" -->
      <input type="hidden" name="var16">   <!-- Tri -->
        <table class='table1'>
  	        <tr><td>Opération : </td><td><input type="text" name="var1">
	            <td>Date : <td><input type="text" name="var2"></tr>
<!--     Attention : var3 et var4 contiennent les NUMEROS de compte et de 
         sous-compte, mais affichent les libellés-->                
	        <tr><td>Compte : 
                <td><select name="var3" onchange="Go()"></select></td>
	            <td>Sous-compte :
                <td><select name="var4"></select></tr>
	        <tr><td>Tiers : 
                <td colspan=3><input type="text" name="var5">
	        <tr><td>Relevé : 
                <td><input type="text" name="var6"><td colspan=2></tr>
	        <tr><td>Débit : 
                <td><input type="text" name="var7">
	            <td>Crédit : 
                <td><input type="text" name="var8"></tr>
	        <tr><td>Commentaire : 
                <td colspan=3><input type="text" name="var9"></tr>
            <tr><td class='noir' colspan=4></tr>
	        <tr><td>Saisi par : 
                <td id="Saisi_par"><!--var11-->
	            <td>Date : 
                <td><input type="text" name="var12"></tr>
	        <tr><td>Méthode : 
                <td colspan=3><input type="text" name="var13">
	        <tr><td>Vérifié par : 
                <td id="Verif_par" onclick='verifie()'> <!--var14: nom-->
	            <td>Date : 
                <td><input type="text" name="var15"></tr>
            <tr><td class='noir' colspan=4></tr>
        </table>
        <table id='boutons' class='table2'>
          <caption>Après avoir modifié cette écriture, vous pouvez :</caption>
          <tr><td id='bouton1'>
              <td><input type='button' name='A' value='1' onclick='executer(1)'>
              <td id='bouton5'>
              <td><input type='button' name='B' value='5' onclick='executer(5)'>
          </tr>
          <tr><td id='bouton2'>
              <td><input type='button' name='C' value='2' onclick='executer(2)'>
              <td id='bouton6'>
              <td><input type='button' name='D' value='6' onclick='executer(6)'>
          </tr>
          <tr><td id='bouton3'>
              <td><input type='button' name='E' value='3' onclick='executer(3)'>
              <td id='bouton7'>
              <td><input type='button' name='F' value='7' onclick='executer(7)'>
          </tr>
          <tr><td id='bouton4'>
              <td><input type='button' name='G' value='4' onclick='executer(4)'>
              <td id='bouton8'>
              <td><input type='button' name='H' value='8' onclick='executer(8)'>
          </tr>
       </table>
       <br />
       <input type='button' name='bouton' value='Ventiler' 
            onclick="Ventiler()">
       <input type='button' name='bouton' value='Annuler' 
            onclick="Annuler('laligne')">
       <button class='baide' onclick="Afficher('aide_laligne', true)" form=''>
        Aide
       </button> 
   	</form>
  </div>
<!-- Affichage de l'aide pour une ligne normale.  
-->  <div id='aide_laligne' class='non aide z2'>
      <div class='sous-titre'>
          Aide pour ce que l'on peut faire après avoir sélectionné un ligne 
          d'écriture "normale"
          (par oppostion à une ventilation).
          <br /><br />
      </div>
      <div class='gauche'>
        La première partie de la zone reprend en détail les différents champs 
 
...[couic]
 
         Enfin, il y a trois boutons dont la signification est assez claire...
               <button onclick="Afficher('aide_laligne', false)">OK</button>
    </diV>
  </div>
 
<!--Formulaire pour une ventilation -->
  <div id='ventile' class='non ventilation z1'>
	  <form name="SaisieV" action="" method="post">
      <div class='HautV'>
        <table>
          <caption>
            Ventilation de l'écriture, ligne N° 
            <input type="text" name="var0" readonly>
          </caption>
          <thead><tr>
            <th class="th0">OP</th>
            <th class="th1">Date</th>
            <th class="th2">Tiers</th>
            <th class="th3">Débit</th>
            <th class="th4">Crédit</th>
            <th class="th5">Commentaire</th></tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="text" name="var1"><!--OP-->
              <td><input type="text" name="var2"><!--Date-->
              <td><input type="text" name="var5"><!--Tiers-->
              <td><input type="text" name="var7"><!--Debit-->
              <td><input type="text" name="var8"><!--Credi-->
              <td><input type="text" name="var9"><!--Comme-->
            </tr>
          </tbody>
        </table>
        <input type="hidden" name="var6"><!--Relevé-->
        <input type="hidden" name="Fonct" value="Ventile">     
        <input type="hidden" name="var3">   <!-- Compte = 1 -->
        <input type="hidden" name="var4">   <!-- Sous-compte = 0 -->
        <input type="hidden" name="var10">   <!-- Solde -->
        <input type="hidden" name="var11">   <!-- Numéro de "Saisi_par" -->
        <input type="hidden" name="var14">   <!-- Numéro de "Vérifié_par" -->
        <input type="hidden" name="var16">   <!-- Tri -->
      </div><!-- HautV -->
      <div class="petit-container">
        <div class="en-teteV"> </div>    
        <div class="interieurV">        
	       <table classe='tablev'>
            <thead>  <tr>
                <th class=div0><div class=div0>&nbsp;</div></th>
                <th class=div1><div class=div1>Compte</div></th>
                <th class=div2><div class=div2>Sous-Compte</div></th>
                <th class=div3><div class=div3>Tiers</div></th>
                <th class=div4><div class=div4>Débit</div></th>  
                <th class=div5><div class=div5>Crédit</div></th>
                <th class=div6><div class=div6>Commentaire</div></th>
                <th class=div7></th> <!-- N0 de compte invisible -->
                <th class=div7></th> <!-- N0 de SS-compte invisib-->
            </tr></thead><tbody>
<!--     Attention : var4 et var5 contiennent les NUMEROS de compte et de 
         sous-compte, mais affichent les libellés-->
<tr id='lv1'> 
          <td>1</td>
          <td><select name="var17" onchange="Go(1)"></select></td>
	        <td><select name="var18"></select></td>
	        <td><input type="text" name="var19"></td>
	        <td><input type="text" name="var20"></td>
	        <td><input type="text" name="var21"></td>
	        <td><input type="text" name="var22"></td>
	        <td class=div6><input type="hidden" name="var23"></td>
	        <td class=div7><input type="hidden" name="var24"></td>
            </tr>
<tr id='lv2'> 
          <td>2</td>
          <td><select name="var17" onchange="Go(2)"></select></td>
	        <td><select name="var18"></select></td>
	        <td><input type="text" name="var19"></td>
	        <td><input type="text" name="var20"></td>
	        <td><input type="text" name="var21"></td>
	        <td><input type="text" name="var22"></td>
	        <td class=div6><input type="hidden" name="var23"></td>
	        <td class=div7><input type="hidden" name="var24"></td>
            </tr>
 
...[couic]
 
<tr id='lv9'> 
          <td>9</td>
          <td><select name="var17" onchange="Go(9)"></select></td>
	        <td><select name="var18"></select></td>
	        <td><input type="text" name="var19"></td>
	        <td><input type="text" name="var20"></td>
	        <td><input type="text" name="var21"></td>
	        <td><input type="text" name="var22"></td>
	        <td class=div6><input type="hidden" name="var23"></td>
	        <td class=div7><input type="hidden" name="var24"></td>
            </tr>
            </tbody></table>
            </div> <!-- interieurV --> 
       <div class="piedV"> 
       <table class="tablev"><tr>
          <td class="div03">Totaux :</td>
          <td class="div4"><input type="text" name="totD"></td>
          <td class="div5"><input type="text" name="totC"></td>
          <td class="div06 invis"></td>
        </tr></table></div> <!--piedV -->
       </div> <!--petit-container  -->    
       <table class='table1'>
          <tr><td class='noir' colspan=4></td></tr>
          <tr><td>Saisi par : </td>
              <td id="Saisi_par"><input type="text" name="var11"></td>
              <td>Date : </td>
              <td><input type="text" name="var12"></td>
          </tr>
          <tr><td>Méthode : </td><td colspan=3>
                  <input type="text" name="var13"></td>
          <tr><td>Vérifié par : </td>
              <td id="Verif_par"><input type="text" name="var14"></td>
              <td>Date : </td><td><input type="text" name="var15"></td></tr>
          <tr><td class='noir' colspan=4></td></tr>
       </table>
       <table id='boutons' class='table2'>
          <caption>Après avoir modifié cette écriture, vous pouvez :</caption>
          <tr><td id='bouton1'></td><td>
                    <input type='button' name='Act' value='1' onclick='ventilerb(1)'></td>
              <td id='bouton3'></td><td>
                    <input type='button' name='Act' value='3' onclick='ventilerb(1)'></td></tr>
          <tr><td id='bouton2'></td><td>
                    <input type='button' name='Act' value='2' onclick='ventilerb(1)'></td>
              <td id='bouton4'></td><td>
                    <input type='button' name='Act' value='4' onclick='ventilerb(1)'></td></tr>
       </table>
       <button class='bouton' name='bouton' value='Annuler' 
            onclick="Annuler('ventile')">Annuler</button>
   	</form>
  </div>      
<script type="text/javascript">document.all.L0.scrollIntoView(true);</script>  
<!--</div>-->
  </body>
</html><!-- A ce jour, le code généré comporte 20112 lignes...-->

AMIcalement.

17/11/2019, 11h29
Invité

Bonjour,

Code:

---[couic]

OK. Donc, manifestement, tu n'as pas vraiment envie qu'on t'aide à résoudre le problème.

Bon dimanche.

N.B. Les <td> sont censés être fermés par un </td>.
17/11/2019, 15h28
L'AMI Yves

Ah mais alors là, pardon !

Tu aurais vraiment voulu que j'envoie sur le forum les 20112 lignes du code généré ? J'ai éliminé (et remplacé par ces [couic]) à plusieurs endroits un grand nombre de lignes exactement semblables (aux variantes près dans les données) et sans intérêt pour comprendre le code.

Je suis déçu, je n'aurais jamais pensé que ça puisse poser problème. C'est vrai que je n'ai pas regardé au millimètre où exactement je coupais le code, mais franchement... regarde de plus près, quoi !

Quant aux </td>, j'ai lu (grâce à notre ami commun Google) qu'il était facultatif. Vu la quantité de tableaux qu'il y a dans mes pages, je me suis dit que l'économie ne serait pas mince (même si, en proportion, ça ne change pas grand chose).

Allez, courage !

AMIcalement.
18/11/2019, 14h49
Invité
Bonjour,

Bon.
- Les <input>, <select> et <textarea> ne suivent pas la règle :
  
  Code:
  
  body {font-size:1.3rem; .....}
- D'autre part, aucune police n'est définie.
Il faut définir explicitement la taille et la police pour ces balises :
Code:

1 2 3 4 5 body, input, select, textarea { margin:0; font-size:1.3rem; font-family:Verdana, Arial, Helvetica, sans-serif; }
"Tout ça pour si peu ?" me diras-tu ?
Ben oui... :aie:

Bonjour,

Citation:

Envoyé par jreaux62

Les <input>, <select> et <textarea> ne suivent pas la règle :

Je confirme et je me permets d'ajouter que les éléments <buttom> sont à mettre dans le lot.

En ce qui concerne les éléments de contrôle comme les <input>, <select>, <textarea> ou autre <button> la propriété font n'est pas héritée, elle ne cascade pas.

Nota : Pour une propriété CSS donnée d'un élément et en utilisant comme valeur inherit la valeur calculée de cette propriété sera identique à la valeur calculée de son parent.

Attention dans le cas des options sous Firefox il faut spécifier également la font pour les <option>.

Code:

1
2
3
4
5
6
7
button, input, select, textarea {
  font: inherit;                    /* pour que cela marche */
}
/* en plus pour FireFox */
option {
  font-family: nom-de-la-fonte;     /* il faut reporter la valeur */
}

Un petit fichier pour voir ce qui se passe :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Font par défaut</title>
<style>
.style-1 {
  font-size: 1.25em;
}
.style-2 {
  font-family: "Courier New";
  font-size: 1.5em;
}
.style-2 button,
.style-2 input,
.style-2 select {
  font: inherit;                    /* pour que cela marche */
/*  font-family: Courier New;       /* ne marche pas seul */
}
/* en plus pour FireFox */
.style-2 option {
/*  font-size: inherit;             /* ne marche pas */
  font-family: Courier New;         /* il faut reporter la valeur */
}
 
</style>
</head>
<body>
<div>
  <p>Juste pour voir le format
    <input type="text" value="Du simple texte">
    <select>
      <option>Un
      <option>Deux
      <option>Trois
    </select>
    <button>Bouton</button>
</div>
<div class="style-1">
  <p>Juste pour voir le format
    <input type="text" value="Du simple texte">
    <select>
      <option>Un
      <option>Deux
      <option>Trois
    </select>
    <button>Bouton</button>
</div>
<div class="style-2">
  <p>Juste pour voir le format
    <input type="text" value="Du simple texte">
    <select>
      <option>Un
      <option>Deux
      <option>Trois
    </select>
    <button>Bouton</button>
</div>
</body>
</html>

19/11/2019, 09h05
L'AMI Yves

Merci infiniment à tous les deux ! Pour faire référence à une précédente discussion, j'oserai dire "J'en apprends de belles !"

Et comme je ne peux pas réprimer mon esprit "de critique" : quelle idée des développeurs du langage de ne pas traiter ces "input, select etc..." de façon homogène !

Mais je regarde tout ça et je reviens vous dire ma satisfaction (j'espère).

Et je trouve qu'il vous a fallu du courage pour vous plonger dans mon code.

Encore merci.

AMIcalement.
19/11/2019, 09h51
L'AMI Yves

Encore plus fort ! Figurez-vous que suivant l'ordinateur sur lequel on consulte mon site, le problème (avant vos remarques) se pose ou non. D'ailleurs, sur mon poste, je reste persuadé qu'il n'existait pas "dans le temps". Je suis contraint d'avouer que je ne sais pas dire à la suite de quoi il est survenu... et je ne sais pas dire ce qui diffère entre les deux postes où j'ai regardé, mais pas de la version de Firefox, tous les deux en 70.0.1(64 bits).
19/11/2019, 11h13
L'AMI Yves

Eh bien, après essais... ça marche et ça marche pas !

Pour les <select>, OK, ça marche, je contrôle la police et la taille.

Pour les <options> (qui sont définies en javascript par "new option(...)"), je n'ai réussi à obtenir aucun héritage. Mieux encore, l'explorateur d'éléments me montre bien que les options sont censées hériter le taille du <body>, mais c'est barré, et il n'y a rien d'autre.

Je n'ai réussi à obtenir quelque chose d'approximatif qu'en spécifiant un <select "style=font-size:1.3rem"...>.

Je dis que c'est approximatif, car quand le <select> affiche l'option sélectionnée, c'est dans cette taille, mais quand on ouvre la liste des options, elle s'affiche en plus petit. Par contre, je vais (provisoirement ?) m'en satisfaire, car c'est raisonnablement lisible, au contraire de ce que j'avais avant, qui ne respectait même pas la spécification de la taille minimale de police dans les options de Firefox ????

Qu'en pensez-vous ?

AMIcalement.

Bonjour,
Code:

1 2 3 4 5 body, input, select, select option, textarea { margin:0; font-size:1.3rem; font-family:Verdana, Arial, Helvetica, sans-serif; }
Et tu supprimeras (vu dans le code généré) :
Code:

1 2 3 4 <style type='text/css'> body{font-size:10px;}  </style>
[EDIT] On trouve aussi dans comptabilite.css :
Code:

1 2 3 4 .ventilation input, select { ... font-size: 1rem; }
Tu devrais faire le ménage, et mieux hiérarchiser ton code CSS, pour mieux t'y retrouver.