IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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 habitué
    Inscrit en
    Mai 2009
    Messages
    512
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 512
    Points : 131
    Points
    131
    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
    Invité
    Invité(e)
    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 !)

  3. #3
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    512
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 512
    Points : 131
    Points
    131
    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 : 287
Taille : 182,4 Ko

    AMIcalement.

  4. #4
    Invité
    Invité(e)
    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 !!

  5. #5
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    512
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 512
    Points : 131
    Points
    131
    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
    Invité
    Invité(e)
    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.

  7. #7
    Invité
    Invité(e)
    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.

  8. #8
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    512
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 512
    Points : 131
    Points
    131
    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 - 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
    // 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.

  9. #9
    Invité
    Invité(e)
    Par défaut
    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) ? (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é...


    [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.
    • ...
    Dernière modification par Invité ; 16/11/2019 à 11h55.

  10. #10
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    512
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 512
    Points : 131
    Points
    131
    Par défaut
    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 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
    <!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.

  11. #11
    Invité
    Invité(e)
    Par défaut
    Bonjour,

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

  12. #12
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    512
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 512
    Points : 131
    Points
    131
    Par défaut
    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.

  13. #13
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Bon.


    Il faut définir explicitement la taille et la police pour ces balises :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    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...
    Dernière modification par Invité ; 18/11/2019 à 15h36.

  14. #14
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 959
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 122
    Points
    44 122
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 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
    <!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>

  15. #15
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    512
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 512
    Points : 131
    Points
    131
    Par défaut
    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.

  16. #16
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    512
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 512
    Points : 131
    Points
    131
    Par défaut
    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).

  17. #17
    Membre habitué
    Inscrit en
    Mai 2009
    Messages
    512
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 512
    Points : 131
    Points
    131
    Par défaut
    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.

  18. #18
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
        <style type='text/css'>
         body{font-size:10px;}
    <!--     font-family:Verdana, Arial, Helvetica, sans-serif;} -->
         </style>
    [EDIT] On trouve aussi dans comptabilite.css :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

Discussions similaires

  1. [CSS 2] Famille de police avec espace
    Par goofyto8 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 25/08/2015, 19h14
  2. Source Sans Pro : première famille de polices open source d'Adobe
    Par tarikbenmerar dans le forum Actualités
    Réponses: 9
    Dernier message: 08/08/2012, 16h21
  3. Réponses: 2
    Dernier message: 26/04/2012, 17h20
  4. Taille d'image variable selon police
    Par scrouet dans le forum Mise en page CSS
    Réponses: 0
    Dernier message: 16/06/2010, 15h42
  5. [2007] Taille par défaut de la police dans les graphiques
    Par |DUCATI| DesMo dans le forum Powerpoint
    Réponses: 0
    Dernier message: 09/11/2007, 10h07

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo