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 :

Mise en forme de ma page


Sujet :

CSS

  1. #1
    Membre à l'essai
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Janvier 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Transports

    Informations forums :
    Inscription : Janvier 2013
    Messages : 29
    Points : 12
    Points
    12
    Par défaut Mise en forme de ma page
    Bonjour,

    Voilà 15 ans que j'ai pas touché à de dev Web et j'avoue qu'avec toutes ces nouvelles solutions je suis plutôt perdu mais je m'adapte vite j'ai besoin d'un coup de pouce

    J'ai commencé à dev une petite apppli web (PC ET mobile vu que sur mobile pas tout ne passe pour mon entreprise ou je dois afficher un planning (a partir d'une BDD SQL existante) donc pas réinventer la roue mais pas loin vu que le presta actuel est incapable de fournir une solution aux demandes actuelles.

    Ce que je souhaite est plutôt simple dans ma tête mais de là a le mettre en place en CSS je suis perdu

    Voici une image simpliste de ce que je veux :


    Ce que souhaite :

    En gros c'est un affichage planning (tableau de tâches des gens (nombre fluctuant suivant l'agence) suivant le jour de la semaine) avec si possible un affichage des tâches style "outlook" donc affichage des tâches sur plusieurs jours par dessus le tableau (en espérant que ce que j'exprime sois compréhensible mais ça j'imagine que ce sera dans un prochain temps le tout est d'avoir le bon layout dans un 1er temps)

    - que la navbar soit fixe et prennent toujours la largeur de l'écran (je pense avoir compris en bootstrap comment faire un menu responsive et adapté sur mobile ou PC avec disparition du bouton et affichage du menu dans la navbar au dessus de 500px par ex)

    - que la colonne de gauche soit toujours visible

    - que le reste du tableau donc les colonnes de droite à partir de la 2eme soient de largeur fixes et en mode "iframe" (terme sorti d'outre tombe)

    Donc en gros que la partie haute et gauche dans l'image ci dessus soient fixes et TOUJOURS visible, que le menu soit en mode collapse (donc que le reste partie de gauche et contenu de droite descende d'un cran) et que seule la partie data soit "déplaçable" en mode slide et que bien sur le tout fonctionne sur mobile !!!

    J'ai lu, relu et surlu de nombreux tutos bootstrap mais j'avoue qu'il me faut une aide !

    En espérant que ma demande soit claire

    Bien à vous

    iLtG

  2. #2
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Hello,

    Voici un petit CodePen qui me semble correspondre à ce que tu as décrit
    https://codepen.io/DarkStar123456/pen/JjNzBBE

    Il est basé sur Bootstrap 5; qui utilise justement la même présentation dans sa documentation
    Doc BS 5 : https://getbootstrap.com/docs/5.1/ge.../introduction/

  3. #3
    Membre à l'essai
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Janvier 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Transports

    Informations forums :
    Inscription : Janvier 2013
    Messages : 29
    Points : 12
    Points
    12
    Par défaut
    Hello et merci de t'intéresser au pb.

    Du coup je me doutais que je m'étais exprimé comme une poire alors je retente

    En fait ce que je veux c que (dans ton ex la partie verte) la sidebar soit collée à gauche et en fixed

    et que le contenu de droite (donc du coup le cadre rouge) soit en hauteur fixe et qu'il puisse scroller uniquement vers la droite car ce sera un tableau avec un nombre de personne défini par agence

    D'où mon terme utilisé "iframe" car je veux que la navbar et la sidebar en gros ne bouge JAMAIS de place à l'écran mais qu'on puisse uniquement scroller à droite pour faire défiler un tableau a hauteur fixe (un peu comme un Excel auquel on aurait figer la premiere colonne et la 1er ligne (désolé lol je ne sais pas comment mieux l'exprimer)

    Je m'en vais de ce pas retenter un autre schéma plus "parlant" au cas ou

  4. #4
    Membre à l'essai
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Janvier 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Transports

    Informations forums :
    Inscription : Janvier 2013
    Messages : 29
    Points : 12
    Points
    12
    Par défaut
    Nom : Layout.png
Affichages : 132
Taille : 136,0 Ko

    Voilà donc je commente :

    La Navbar (entournée de bleu) : hauteur fixe, ancrée en haut, largeur écran, responsive, avec menu en toggle en cas de largeur < 500px par ex

    La sidebar (entourée de vert) : largeur fixe, ancrée à gauche, hauteur écran (enfin écran - hauteur navbar), responsive suivant hauteur écran

    Le contenu (la partie rouge) : hauteur fixe, largeur fixe, HORIZONTALEMENT scrollable pour afficher X personnes suivant les agences

    En espérant que je me sois mieux exprimé mais là j'avoue être à mon max

    iLtG

  5. #5
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Hello,

    J'ai réalisé un nouveau Codepen : https://codepen.io/DarkStar123456/pen/YzVMBRP

    Comment ça se passe :
    - on défini la première colonne en position: absolute;- on va lui donner une largeur (33.3vw vu qu'il y a 3 colonnes visibles dans l'exemple) histoire de pouvoir ensuite "déplacer" tous les contenus à droite de cette colonne
    - on défini un wrapper (.table-wrapper), qui va faire 100vw de large. Soit width: 66.6vw + margin-left: 33.3vw afin de les déplacer à droite de la première colonne
    - finalement, on force toutes les colonnes th et td à une width de 33.3vw

  6. #6
    Membre à l'essai
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Janvier 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Transports

    Informations forums :
    Inscription : Janvier 2013
    Messages : 29
    Points : 12
    Points
    12
    Par défaut
    Hello,

    Merci bien, je m'en vais regarder ça de plus près mais ça me parait être exactement ce qu'il me faut !!!

    Je fais un retour en éditant ce message

  7. #7
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Hello,

    N'hésite pas à faire un retour sans passer par un edit, parce que sinon on ne voit pas qu'il y a eu un nouveau message et c'est compliqué à suivre ^^

  8. #8
    Membre à l'essai
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Janvier 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Transports

    Informations forums :
    Inscription : Janvier 2013
    Messages : 29
    Points : 12
    Points
    12
    Par défaut
    Re,

    Nan mais au temps pour moi c'est évident ...
    C'est juste que à peine 2 msg postés, je me suis fait rattraper par la patrouille volante du forum pour une citation un peu trop longue alors un lundi matin (suis pas du matin) + la terreur de me voir fessé en public Bref revenons à nos moutons ....

    Alors j'ai grâce à ton codepen bien avancé sur le sujet !

    Voici le mien : https://codepen.io/iluvthisgame72/pen/PomvooW

    Comme tu peux le voir, j'ai un peu boutiqué les largeurs et les hauteurs pour arriver plus ou moins à ce que je veux.

    Cependant des que j'ai réduit la 1ere colonne à 6em (je préfère l'avoir en fixe par rapport à la police car j'ai juste besoin d'afficher le jour de la semaine et en entête le numéro de semaine qui mènera vers un datepicker, ça laisse de la place pour le reste du contenu et sur mobile c'est vital ), je ne comprend plus le comportement de celle-ci (ce que je ne capte pas c'est que le texte dans le reste des cellules de droite passe bien à la ligne). Du coup j'ai mis un br pour tester mais j'imagine qu'il y a moyen de faire mieux.

    Idem au dessus de Semaine 32 il y a une partie décalée mais j'imagine que c'est du au comportement du Position : absolute et Top: auto (je changerai le bgcolor et ça se verra moins EDIT : en fait j'ai tenté mais on voit le border ...)

    J'ai aussi tenté de mettre une div dans une cellule (car ce sera ça ma finalité) et je n'arrive pas à gérer les dépassements de cellule ... J'ai l'impression qu'il déplace les limites de la cellule avec le texte mais que la div, elle, peut dépasser (ce qui me dépasse )

    PS : j'ai mis des choses dans le style de la div plutôt que dans le CSS car ce sont des propriétés qui seront susceptibles d'être modifiées par des variables (ex: couleur de la tâche définie dans la bdd, positionnement et hauteur en fonction de la durée et du nombre de tâches prévue dans la journée pour la personne)

    iLtG

  9. #9
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Hello,

    Concernant le petit décalage, c'est parce que je n'avais pas mis de bordure dans mon code.
    Dans le tiens, il faut mettre un margin-top: -1px; dans .row-title afin que les bordures soient au même endroit (c'est parce que les table dans Bootstrap sont en border-collapse: collapse;, enfin je crois que c'est pour ça ^^)

    Pour ce qui est des cellules, elles s'adapteront TOUJOURS à leur contenu texte, c'est une des propriétés majeures des <table> et à moins de modifier tous les displays de chaque ligne/cellule c'est très compliqué de faire autrement
    Mais si tu as une <div> c'est déjà un peu plus simple, car tu peux définir une hauteur pour avoir un scroll à l'intérieur de ton div.
    Il faudrait alors écrire (en reprenant ton div de test) :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    .tachetab {
        /*** ici, le reste du CSS à part min-height: 400% ***/
        overflow: auto;
        max-height: 100px;
    }

  10. #10
    Membre à l'essai
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Janvier 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Transports

    Informations forums :
    Inscription : Janvier 2013
    Messages : 29
    Points : 12
    Points
    12
    Par défaut
    Salut et désolé du retour tardif mais les journées ont été bien chargées ces temps-ci,

    Tout d'abord grand merci pour ton aide car elle m'a permis de passer les écueils qui me bloquait.

    Au final je suis repassé sur une construction en div display: table car je préfère le comportement des divs mais je ne savait pas qu'on pouvait appliquer quasiment le même CSS aux div et du coup voici le rendu final (il me reste encore à corriger certains bugs mais c'est pour le moins mineur par ex le placement des tâches de l'aprem ou je vois en faisant la copie d'écran que certaines ne se placent pas en bas alors que pourtant elles sont en align-self: flex-end) et pour un mec qui n'a pas touché une ligne de code depuis une bonne 15aine d'année je suis plutôt content ^^ :

    Nom : planningweb.jpg
Affichages : 98
Taille : 88,4 Ko

    J'ai du aussi passer mes cellules en display: flex pour pouvoir gérer les positionnements à l'intérieur en fonction du nombre de tâches cependant ça m'a fait faire une concession sur les tâches de plus d'une journée (ou par ex : les congés payés) qui s'affichent du coup tous les jours vu qu'on ne peut (à priori) pas gérer les dépassements dans une div en display: flex ? (ou alors j'ai ENCORE rien compris ).

    Je laisse encore ouvert le post si quelqu'un a une solution à mes problématiques (en rouge) au cas ou et je viendrais fermer d'ici peu en cas de non réponse ou de confirmation qu'on n'y peut rien.

    Encore Merci

    La bonne journée

    iLtG

  11. #11
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Hello !

    Beau travail déjà, et bon boulot pour quelqu'un qui n'a rien touché depuis 15 ans !
    Ca n'a pas dû être facile avec tout ce qui a changé depuis ! Ca a dû te changer la vie de découvrir flexbox !

    En ce qui concerne l'alignement des cellules, il est -je trouve- plus facile et plus constant de l'utiliser sur l'élément parent via align-items: flex-end; plutôt que d'utiliser la propriété align-self.
    Si on imagine une cellule (j'ai compris que c'était un div mais c'est pour la représenter visuellement ^^), qui contient plusieurs tâches.
    Le plus simple est certainement d'y créer une sorte de container en display: flex; height: 100%; /* il faudra définir la hauteur du parent*/ align-items: flex-end;.
    Pour que le height: 100% fonctionne, il ne faut pas d'alignement vertical sur la parent (la cellule), c'est pour ça qu'on recrée un wrapper dans la cellule.
    Pourquoi ? Parce que en display flex; les éléments enfants auront la même hauteur par ligne par défaut, sauf si on met un alignement vertical, alors le height passera en auto.

    Pour ce qui est des "dépassement" ce n'est pas possible à l'exception d'un position: absolute;, et encore, il sera toujours relative au premier position: relative; qu'il croise.
    Perso, je pense que je partirais sur du JavaScript.
    J'ai justement réaliser récemment pour quelqu'un du forum un script qui récupère l'index de la ligne et de la colonne d'une cellule : https://codepen.io/DarkStar123456/pen/XWRwWbO

  12. #12
    Membre à l'essai
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Janvier 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Transports

    Informations forums :
    Inscription : Janvier 2013
    Messages : 29
    Points : 12
    Points
    12
    Par défaut
    Merci ça fait plaisir ^^

    Flexbox c'est comme le gras : c'est la vie ! (mais j'avoue que j'ai trouvé ça plus qu'intéressant )

    Pour l'alignement il faut, je pense, d'abord que je donne mes sources pour les fonctions qui font le tableau :

    En gros le tableau en div chaque Row :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="divTableRow">
                        <div class="row-title premcol"><hr class="test">
                            <?php   
                            echo jourl($lundi)."<br>".$lundi->format('d/m/Y');
                            ?>
                        </div>
                        <?php
                        rempli_tab($tabgars,$lundi);
                        ?>
                    </div>

    La fonction rempli_tab() :

    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    function rempli_tab($t,$d) {
        for($i=0;$i<count($t['IdGars']);$i++){
            echo "<div class=divTableCell><div class=casetache>";
            $tachlist = recuptaches($t['IdGars'][$i],$d);
            if($tachlist != NULL) {affichetaches($tachlist,$d);}
            echo "</div></div>";
        }
    }

    La fonction recuptaches est une requete SQL qui va chercher les infos des tâches dans la base MSSQL de notre progiciel en fct° de l'iD de l'employé et de la date du jour en question

    La fonction : affichetaches() :

    Code php : 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
    function affichetaches($tl,$d) {
        $matin = 0;
        $aprem = 0;
        $journee = 0;
        $datemidi = date_time_set($d, 13, 00, 00);
        // incrémentation du nombre de taches du matin, d aprem et de journée complete
        for($i=0;$i<count($tl['Taches']);$i++){
            if($tl['Debut'][$i]<$datemidi && $tl['Fin'][$i]<$datemidi) {$matin++;}
            if($tl['Debut'][$i]<$datemidi && $tl['Fin'][$i]>$datemidi) {$journee++;}
            if($tl['Debut'][$i]>$datemidi) {$aprem++;}
        }
        $width = 100 / max($matin+$journee,$aprem+$journee);
        for($i=0;$i<count($tl['Taches']);$i++){
            $tachid = $tl['Taches'][$i];
            $typet = $tl['TypeT'][$i];
            $heuredebut = $tl['Debut'][$i]->format('H:i');
            $color = "rgb({$tl['R'][$i]},{$tl['G'][$i]},{$tl['B'][$i]})";
            $note = $tl['Note'][$i];
            $client = $tl['Client'][$i];
            // Largeur, Hauteur et Positionnement en fonction du nombre de matin, aprem et journee
            if($tl['Debut'][$i]<$datemidi && $tl['Fin'][$i]<$datemidi) {$height = "6.25vh"; $valign="start";}
            if($tl['Debut'][$i]<$datemidi && $tl['Fin'][$i]>$datemidi) {$height = "12.5vh"; $valign="stretch";}
            if($tl['Debut'][$i]>$datemidi) {$height = "6.25vh"; $valign="end";}
            // Titre et note en fonction du type de tâche
            switch($typet) {
                case 1:
                    $tachetitre = $client; $note = $tl['Chantier'][$i];
                break;
                case 3:
                    $tachetitre = "Indisponibilité";
                break;
                case 5:
                    $tachetitre = "Congés Payés";
                break;
                case 6:
                    $tachetitre = "Arrêt de travail";
                break;
                case 7:
                    $tachetitre = "Récupération";
                break;
                case 8:
                    $tachetitre = "Dépot";
                break;
                case 9:
                    $tachetitre = $heuredebut;
                break;
            }
            // affichage de la div
            echo "<div class=tachetab id=".$tachid." style=\"align-self: flex-".$valign."; width: ".$width."%; height: ".$height."; background: linear-gradient(180deg, #FFF 0%, ".$color." 100%\">";
            // echo "matin : ".$matin." - aprem : ".$aprem." - journee : ".$journee." - largeur : ".$width."% ".$valign."<br>";
            if(isset($heuredebut) && $typet=='1') {echo "<label class=tachetitre>".$heuredebut."&nbsp;</label>";}
            if(isset($tachetitre)) {echo "<label class=tachetitre>".$tachetitre."</label>";}    
            if(isset($note)) {echo "<label class=note>".$note."</label>";}
            // list_matos($tachid);   
            if(isset($matos)) {echo "<label class=note>".$matos."</label>";}
            echo "</div>";
        }
    }

    Le CSS qui va avec (oui je sais rien de tout ça n'est optimisé mais je ferai ça à la fin ) :

    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
    .table-wrapper {
        padding: 2px;
        width: calc(100vw - 6em);
        background-color: #F8A82B;
        overflow-x: scroll;
        margin-left: 6em;
        overflow-y: visible;
        padding: 0;
        text-align: center;
      }
     
      div.row-title {
        position: absolute;
        left: 0;
        top: auto;
        margin-top: -1px;
      }
     
      div.premcol {
          color: #FFF;
          min-width: 6em!important;
          height: 12.5vh;
          background-color: darkslategray;
          overflow-wrap: break-word;
          font-weight: bold;
      }
     
      div.premcase {
        color: #FFF;
        min-width: 6em!important;
        height: 48px;
        background-color: darkslategray;
        font-weight: bold;
        padding-top: 5px;
      }
     
      .tachetab {
          border: 1px solid black;
          padding: 2px;
          border-radius: 10px;
          z-index: 3;
          overflow: auto;
          max-height: 12.5vh;
      }
     
      div.unstyledTable {
        text-align: center;
        width: calc(100vw - 6em);
        overflow-x: scroll;
        margin-left: 6em;
        overflow-y: visible;
        padding: 0;
        text-align: center;
      }
     
      .divTableCell{
        min-width: 18em;
        height: 12.5vh;
        margin: 0;
        padding: 0;
        }
     
      .divTable{ display: table; }
     
      .divTableRow {
        display: table-row;
        }
     
      .divTableHeading {
        display: table-header-group;
        font-weight: bold;
        background-color: darkslategray;
        height: 48px;
        color: #FFF;
        }
     
      .divTableCell, .divTableHead {
        display: table-cell;
        border: 1px solid #000000;
        }
     
      .divTableHead {
          vertical-align: middle;
      }  
     
      .divTableBody { display: table-row-group;}
     
      hr.test{
          margin: 0 0 5px;
          background: #000;
          height: 2px;
      }
     
      label.note, label.tachetitre {
          padding: 0;
          margin: 0;
          font-weight: 800;
      }
     
      label.tachetitre {    
        font-size: 11px;  
      }
     
      label.note {
          text-align: justify;
          font-size: 8px;
          color: red;
      }
     
      div.casetache {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
          margin: 0;
          padding: 0;
      }

    Enfin voici par ex le code html généré de la cellule 1ere ligne 5eme colonne sans compter les entêtes bien sur (ou le flex-end marche bien) :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div class="divTableCell">
        <div class="casetache">
            <div class="tachetab" id="82633" style="align-self: flex-stretch; width: 50%; height: 12.5vh; background: linear-gradient(180deg, #FFF 0%, rgb(0,128,0) 100%">
                <label class="tachetitre">Indisponibilité</label>
                <label class="note">BUREAU</label>
            </div>
            <div class="tachetab" id="86135" style="align-self: flex-end; width: 50%; height: 6.25vh; background: linear-gradient(180deg, #FFF 0%, rgb(176,224,230) 100%">
                <label class="tachetitre">14:00&nbsp;</label>
                <label class="tachetitre">SARL PWETT!!!</label>
                <label class="note">LAC DU CONNEMARRA</label>
            </div>
        </div>
    </div>

    et celui de la 1ere ligne 3eme colonne (toujours sans compter les entêtes et surtout là ou le flex-end s'en cogne) :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="divTableCell">
        <div class="casetache">
            <div class="tachetab" id="85972" style="align-self: flex-end; width: 100%; height: 6.25vh; background: linear-gradient(180deg, #FFF 0%, rgb(176,224,230) 100%">
                <label class="tachetitre">16:00&nbsp;</label>
                <label class="tachetitre">LE BATIPWETT!!!</label>
                <label class="note">TECHNICAMPUS - CANARDVILLE</label>
            </div>
        </div>
    </div>

    Donc on voit bien que j'ai mis chaque tache du jour (div.tachetab) dans une div en flex (div.casetache) elle même dans la cellule du tableau (div.divTableCell) mais j'ai remarqué que le flex-end ne fonctionne pas quand il n'y a qu'une tâche. Globalement je n'ai pas forcément vu de cas ou ça ne marche pas autrement sans forcément faire de tests plus poussés non plus en ajoutant des tâches dans notre progiciel.

    iLtG

  13. #13
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Hello,

    D'une part, dans le code, il est écrit :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    div.casetache {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
          margin: 0;
          padding: 0;
      }

    Ca devrait plutôt être align-items: flex-end;


    D'autre part, ce n'est pas suffisant parce qu'il manque la hauteur de .casetache qui doit être définie car par défaut, elle est en auto.
    Dans mon code (exemples plus loin), j'ai donc également ajouté : height: 100%; à div.casetache.


    CEPENDANT, c'est super bizarre.
    Si je vire tout le style inline, ça fonctionne mais dès qu'il y est, impossible d'avoir un résultat propre : les cases de la première cellule "sortent" de table

    Résultat SANS styles inline : https://codepen.io/DarkStar123456/pen/vYmoNOo
    Résultat AVEC styles inline : https://codepen.io/DarkStar123456/pen/dyWxYGL


    En plus dans le second cas, la colonne de droite se positionne correctement, c'est vraiment étrange


    EDIT :
    Je ne suis pas encore certain mais je crois avoir trouvé la différence entre mes 2 codes.
    C'est juste une impression et aucun des 2 codes ne fonctionne vraiment

    En réalité, je pense que la hauteur de .divTableCell est beaucoup trop petite et provoque la sortie des contenus.

    Perso, je déteste jouer avec des display: table[-suffix], c'est assez embêtant comme propriété.
    Apparemment, on perd la notion de height dedans et donc impossible de faire un flex-end vu qu'on est automatiquement en hauteur automatique et donc forcément déjà sur le "end"

  14. #14
    Membre à l'essai
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Janvier 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Transports

    Informations forums :
    Inscription : Janvier 2013
    Messages : 29
    Points : 12
    Points
    12
    Par défaut
    Citation Envoyé par darkstar123456 Voir le message
    Ca devrait plutôt être align-items: flex-end;
    Je ne me suis pas forcément expliqué pour le pourquoi du comment

    En fait les tâches sont affectées au personnel plus ou moins le matin l'aprem ou la journée complete (pour faire simple)

    Voilà pourquoi j'utilise ce stratagème pour "diviser" ma cellule en 2 (plutôt que de m'emmerder à faire du rowspan)

    Ce qui explique le align-items: flex-start; parce que par défaut la tâche si elle prend la matinée ou la journée doit être affichée à partir du haut

    Ce qui explique aussi pourquoi le align-self: flex-end;avec la valeur 6.25vh qui est la moitié de celle de la cellule pour faire une demi-journée de l'aprem

    Ca marche très bien si la tâche de l'aprem n'est pas "seule" (en gros s'il n'y a pas dans la cellule QUE des tâches de l'aprem)

    J'ai bien tenté le height: 100%; sur la div parent mais comme tu as vu ça sort le contenu de la cellule.

    La valeur de .divTableCell va bien car si je laisse en l'état et réduit la page de hauteur tout se rétrécit à merveille

    Pour info du coup j'ai pondu ça juste avant l'echo d'affichage de la div :

    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
            // Contournement du bug d'affichage de la div en flex-end si que l aprem
            if($matin==0 && $journee==0 && $aprem>0) {echo "<div style=\"align-self: flex-start; width: 100%; height: 6.25vh;\"><br></div>";}

    Et comme par hasard TOUT fonctionne à merveille ...

    (Ce qui est logique au final puisque il y'a plein d'autres Cellules ou il y a une tâche le matin (ou la journée) une autre l'aprem et que tout va bien !)

    Mais je ne m'explique pas pourquoi, du coup je joue avec un codepen (Lien ICI)depuis un moment mais rien n'y fait ça marche dans celui-ci...

    iLtG

  15. #15
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Bonjour,

    Je ne pense pas qu'il soit vraiment possible de jumeler l'alignement start & end suivant les éléments au sein d'un même parent

    Toujours est-il que je vois des trucs qui ne fonctionnent pas à cause du display: table-cell; c'est qu'il n'est pas vraiment possible de définir de hauteur minimum
    Et sinon, je pensais moi aussi que mon Codepen fonctionnait mais en réalité, dès que tu met .casetache à une largeur de 50% et que tu en ajoutes un 2e, ça ne fonctionne pu

    L'utilisation des display: table-cell; est-elle vraiment nécessaire ? Je me répète mais je déconseille toujours d'utiliser ce display. J'ai l'impression que c'est la source de tous les soucis

  16. #16
    Membre à l'essai
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Janvier 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Transports

    Informations forums :
    Inscription : Janvier 2013
    Messages : 29
    Points : 12
    Points
    12
    Par défaut
    Bonjour,

    Citation Envoyé par darkstar123456 Voir le message
    Je ne pense pas qu'il soit vraiment possible de jumeler l'alignement start & end suivant les éléments au sein d'un même parent
    D'après MDN si : https://developer.mozilla.org/fr/doc...vec_align-self (si tu mets dans leur ex le first-child a flex-end au lieu de stretch ça marche idem avec le Three si tu mets le .selected a flex-end ça marche aussi et j'avoue que c'est en tombant sur cette doc que je suis parti sur cette idée pour placer correctement mes div dans la cellule)

    Citation Envoyé par darkstar123456 Voir le message
    L'utilisation des display: table-cell; est-elle vraiment nécessaire ?
    oui sinon le tableau tombe toute les cellules s'affichent comme des divs classique en 1 colonne display: block

    Après mon pansement peu académique fait que ça fonctionne je vais quand même tester pour voir si quand on colle 3 Tâches l'aprem ça colle mais il n'y a pas de raison.

    Là pour l'instant il me reste aussi à comprendre pourquoi ma requête de données SQL prend ce temps de dingue (plus de 3 sec pour un tableau de 7 jours pour 15 gars sachant que j'ai des agences à plus de 30 gars donc ça prend trop de temps à charger, tu me diras 3sec/105 cases ça ne fait que 0.03s par requête ) par mais je poserai la question dans le forum adéquat car ici n'est pas le propos.

    iLtG

  17. #17
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Hello,

    Ah oui, avec le align-self, effectivement... sauf que c'est théorique, je trouve que le align-self marche jamais dans la pratique donc je l'utilise jamais (et j'en ai rarement eu besoin ^^)

    Pour ce qui est de la requête, à voir si tu n'as pas trop de tables dans ta requête. Les requêtes sur les dates sont parfois gourmande, surtout si le type de champ est plus de type TEXT que DATE.
    Dans ce dernier cas, il est possible de caster le champ grâce à CAST()

    EDIT : il faut également éviter les OR dans les requêtes pour un max de vitesse

  18. #18
    Membre à l'essai
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Janvier 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Transports

    Informations forums :
    Inscription : Janvier 2013
    Messages : 29
    Points : 12
    Points
    12
    Par défaut
    En fait je me demande si le display: grid ne serait pas plus pratique pour faire ce que je veux (placer les tâches matin, aprem ou journée au sein de la celllule) ? (https://developer.mozilla.org/fr/doc...SS_Grid_Layout)

    AIE !!! Pour la requête

    Code SQL : 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
    SELECT TA.idTaches AS Taches,
                    TA.idTypeTache AS TypeT,
                    TA.DateDebut AS Debut,
                    TA.DateFin AS Fin,
                    TA.Rouge AS R,
                    TA.Vert AS G,
                    TA.Bleu AS B,
                    TA.LibelleClient AS Client,
                    TA.AdresseChantier AS Chantier,
                    TA.Observation AS Note
                FROM  ADEKMA_PLANNING.dbo.Taches TA
                INNER JOIN ADEKMA_PLANNING.dbo.PersonneFacturation PF
                ON PF.idTaches=TA.idTaches
                WHERE PF.idPersonnel = '$userid'
                AND (('$tachedate 08:30:00' BETWEEN TA.DateDebut AND TA.DateFin
                AND NOT TA.DateDebut BETWEEN '$tachedate 00:00:00' AND '$tachedate 23:59:59')
                OR TA.DateDebut BETWEEN '$tachedate 00:00:00' AND '$tachedate 23:59:59')
                ORDER BY TA.DateDebut ASC

    Et celà dans chaque case (donc pour 15 personnes 105 fois cette requête qui en local prend 15ms)
    J'ai essayé de mettre des CAST('$tachedate 00:00:00' AS DATETIME) ça ne change rien (j'ai même 20ms de tps de réponse en local au lien de 15 en moyenne sans les cast)

  19. #19
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Ouais, j'ai pensé aussi à CSS Grid :-D

    Pour la requête, ça ne serait pas plus rapide de récupérer l'horaire de la semaine pour tout le monde et de réordonner les données en PHP par la suite ?
    Ca ne ferait qu'une seule requête et une seule boucle pour tout réordonner.

    Il faudrait construire le tableau de données est construit suivant la date et pour chaque date les users et leurs tâches

  20. #20
    Membre à l'essai
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Janvier 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Transports

    Informations forums :
    Inscription : Janvier 2013
    Messages : 29
    Points : 12
    Points
    12
    Par défaut
    Hello,

    Désolé congés déconnectés Pas un pet de 4G ou j'étais ça règle le pb du "droit à la déconnexion" lol

    Bon du coup je vais plancher sur la requête et le CSS Grid

    J'y avais pensé mais j'avais le cerveau trop en vrac pour savoir comment faire tout dans un seul tableau sachant que pour chaque user il y aura parfois plusieurs tâches et leurs infos associées et pour le moment je ne vois pas comment ordonner et indexer ça (j'avoue toujours avoir eu du mal avec les arrays).

    Bon comme je reviens de vacances mon cerveau devrait maintenant être un poil plus opé Je vais donc y réfléchir cet aprem et au pire poser la question si je n'y arrive pas dans le forum adéquat.

    Je re pour le grid quand j'aurais planché dessus.

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. Garder la mise en forme d'une page web à l'impression
    Par 7ider5 dans le forum Débuter
    Réponses: 2
    Dernier message: 21/02/2013, 14h10
  2. Mise en forme "encadrée" des pages
    Par Benoît1989 dans le forum Mise en forme
    Réponses: 1
    Dernier message: 24/10/2012, 01h13
  3. [XL-2003] Mise en forme d'une page en VBA
    Par Naru80 dans le forum Macros et VBA Excel
    Réponses: 13
    Dernier message: 05/11/2011, 10h31
  4. [XL-2003] Mise en forme d'une page en VBA
    Par Naru80 dans le forum Macros et VBA Excel
    Réponses: 6
    Dernier message: 24/10/2011, 23h43
  5. Comment se passer des <table> pour la mise en forme d'une page
    Par gael dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 12/11/2008, 21h06

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