Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Taille et/ou famille de police


Sujet :

CSS

  1. #1
    Membre régulier
    Inscrit en
    mai 2009
    Messages
    240
    Détails du profil
    Informations forums :
    Inscription : mai 2009
    Messages : 240
    Points : 72
    Points
    72
    Par défaut 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.

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 032
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 032
    Points : 32 836
    Points
    32 836
    Par défaut
    Bonjour,

    si seulement on pouvait VOIR et/ou TESTER* !

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


    * 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 !)
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Membre régulier
    Inscrit en
    mai 2009
    Messages
    240
    Détails du profil
    Informations forums :
    Inscription : mai 2009
    Messages : 240
    Points : 72
    Points
    72
    Par défaut
    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 :

    Nom : fenetre.jpg
Affichages : 47
Taille : 182,4 Ko

    AMIcalement.

  4. #4
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 032
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 032
    Points : 32 836
    Points
    32 836
    Par défaut
    Je te retourne la question :

    "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 !!
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Membre régulier
    Inscrit en
    mai 2009
    Messages
    240
    Détails du profil
    Informations forums :
    Inscription : mai 2009
    Messages : 240
    Points : 72
    Points
    72
    Par défaut
    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.

  6. #6
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 032
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 032
    Points : 32 836
    Points
    32 836
    Par défaut
    Oui, on voit bien que les caractères sont de différentes tailles et typo.

    Citation Envoyé par L'AMI Yves Voir le message
    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.

    ...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 !!

    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.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  7. #7
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 032
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 032
    Points : 32 836
    Points
    32 836
    Par défaut
    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.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  8. #8
    Membre régulier
    Inscrit en
    mai 2009
    Messages
    240
    Détails du profil
    Informations forums :
    Inscription : mai 2009
    Messages : 240
    Points : 72
    Points
    72
    Par défaut
    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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    <?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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    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 CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    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 JavaScript : Sélectionner tout -