Tabulation avec Grid Layout : aligner à gauche la 3° "colonne"

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Tabulation avec Grid Layout : aligner à gauche la 3° "colonne"

    Salut

    Pour une page j'ai fait mes tabulations avec Grid Layout :

    Code HTML:
    <div class="tabulation">
        <div class="col-01">Vivamus placerat orci</div>
        <div class="col-02"><hr /></div>
        <div class="col-03">Morbi feugiat tortor sed suscipit</div>
    </div>
    
    <div class="tabulation">
        <div class="col-01">In augue</div>
        <div class="col-02"><hr /></div>
        <div class="col-03">Vivamus molestie</div>
    </div>
    
    <div class="tabulation">
        <div class="col-01">Fusce ullamcorper</div>
        <div class="col-02"><hr /></div>
        <div class="col-03">Vestibulum eget accumsan</div>
    </div>
    Code:
    .tabulation {
        display: grid;
        grid-template-columns: auto 1fr 220px;
        grid-template-rows:29px;
    }
    
    .tabulation .col-01    {grid-column:1;}
    .tabulation .col-02    {grid-column:2;}
    .tabulation .col-03 {grid-column:3;}
    
    .tabulation > div {align-self:center;}
    
    .tabulation .col-02 hr {
        border-top:#000 2px dotted;
        width:95%;
    }
    Pour pouvoir aligner à gauche col-03 je lui ai mis une largeur en px.

    Maintenant il me faut des tabulations sur une autre page. Je voudrais donc faire un code général qui sera le même pour toutes les tabulations. Le probleme c'est que la largeur de col-03 ne sera pas la même et je voudrais pouvoir aligner a gauche toutes les tabulations de chaque pages. Comment je pourrais faire pour adapter la largeur de col-03 à son contenu tout en alignant a gauche ?

    (voir sur CodePen)
    Sur mon site www.nenex-ordinateur-libre.net : tutos sur des logiciels et services libres.

    Association Sorgin Informatique Libre ( www.sorgin-informatique-libre.org). Education populaire au numérique libre et au libre en général.

  • #2
    Salut.

    Je me suis amusé à faire une petite mise en page en tabulation avec pointillé ou traits d'union.
    Je n'ai pas utilisé Grid Layout mais j'ai un résultat visuel agréable (surtout avec le point de fuite en pointillé)

    Voir le résultat
    Cordialement.
    __
    Eddy !!!
    Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

    Commentaire


    • #3
      J'utilisais le même code avant d'utiliser Grid. Avec Grid c'est responsive.
      Sur mon site www.nenex-ordinateur-libre.net : tutos sur des logiciels et services libres.

      Association Sorgin Informatique Libre ( www.sorgin-informatique-libre.org). Education populaire au numérique libre et au libre en général.

      Commentaire


      • #4
        Et la pas peut-être ?
        Cordialement.
        __
        Eddy !!!
        Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

        Commentaire


        • #5
          J'ai écris trop vite et c'est pas se que je voulais (j'aurais du) dire désolé . Oui c'est responsive mais si dans la "première colonne" (banane, safran, etc.) il y a trop de texte, la seconde (les tarifs) ne va pas a la ligne.
          Dernière édition par schtroumph à 09/12/2019, 16h32
          Sur mon site www.nenex-ordinateur-libre.net : tutos sur des logiciels et services libres.

          Association Sorgin Informatique Libre ( www.sorgin-informatique-libre.org). Education populaire au numérique libre et au libre en général.

          Commentaire


          • #6
            Ah, j'y ai pas pensé. Je vais voir ça.
            Cordialement.
            __
            Eddy !!!
            Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

            Commentaire


            • #7
              J'ai trouvé comment faire !

              Je met le width du hr à auto. Ensuite pour avoir une largeur différente suivant les pages, dans la DIV contenant les tabulations je met une class qui correspond à la page où elles se trouvent. Puis je personnalise la largeur pour chaque page.

              Je sais pas si c'est clair . Donc le mieux c'est de voir avec le CodePen que j'ai modifié.
              Sur mon site www.nenex-ordinateur-libre.net : tutos sur des logiciels et services libres.

              Association Sorgin Informatique Libre ( www.sorgin-informatique-libre.org). Education populaire au numérique libre et au libre en général.

              Commentaire


              • #8
                Bonsoir,

                Vous perdez le côté sémantique de la liste et le hr a une signification sémantique (https://developer.mozilla.org/fr/doc...TML/Element/hr)

                Votre recherche, c'est un peu ceci :
                schtroumph et Eddy.vh aiment ceci.
                UP, le plugin universel à découvrir sur https//up.lomart.fr
                bgMax
                , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                Commentaire


                • #9
                  Un petit codepen ça simplifierait pas la compréhension et les suggestions ?
                  Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

                  Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

                  Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

                  Commentaire


                  • #10
                    woluweb

                    Un petit codepen ??
                    Voilà. Mais avec l'action UP de lomart, faut même plus se poser de questions…
                    Dernière édition par Eddy.vh à 10/12/2019, 17h31
                    lomart et woluweb aiment ceci.
                    Cordialement.
                    __
                    Eddy !!!
                    Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

                    Commentaire


                    • #11
                      J'utilise justement UP ! je n'avais pas fait gaffe a cette action. Je vais voir ça et utiliser plutôt UP pour que ça soit plus "propre". Merci pour la suggestion.
                      lomart aime ceci.
                      Sur mon site www.nenex-ordinateur-libre.net : tutos sur des logiciels et services libres.

                      Association Sorgin Informatique Libre ( www.sorgin-informatique-libre.org). Education populaire au numérique libre et au libre en général.

                      Commentaire


                      • #12
                        Bonjour à tous

                        Merci Eddy pour le codepen. Mais ma contribution portait plus sur le risque de mauvaise interprétation par les moteurs de recherche.

                        En dehors du CSS, UP facilite la saisie. J'ai créé la série d'actions csv2xxx pour pouvoir faire un simple copier-coller de tarifs récupérés d'un tableur.
                        schtroumph et Eddy.vh aiment ceci.
                        UP, le plugin universel à découvrir sur https//up.lomart.fr
                        bgMax
                        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                        Commentaire


                        • #13
                          Et tu as bien raison lomart. Le hr doit être utilisé pour ce dont il est conçu.
                          La création d'un fichier CSV est simple et rapide et en cas d'édition, j'imagine que ça s'actualise en temp réel (pas testé) par le rechargement de la page. Pas besoin d'éditer l'article.
                          Dernière édition par Eddy.vh à 11/12/2019, 08h11
                          Cordialement.
                          __
                          Eddy !!!
                          Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

                          Commentaire


                          • #14
                            j'imagine que ça s'actualise en temp réel (pas testé) par le rechargement de la page. Pas besoin d'éditer l'article
                            Oui, si tu cible un fichier externe
                            Regardes "Origine et mise en forme des données" sur la démo csv2table. C'est aussi possible sur csv2list (Sources externes), mais l'usage doit être moins fréquent
                            Dernière édition par lomart à 11/12/2019, 09h23
                            UP, le plugin universel à découvrir sur https//up.lomart.fr
                            bgMax
                            , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                            Commentaire


                            • #15
                              csv2table avec un fichier externe est pas mal car quant il y a beaucoup de données dans un tableau c'est vraiment galère à faire la table en HTML. Là ça simplifie les choses. En tout cas merci pour ce plugin vraiment génial !
                              Sur mon site www.nenex-ordinateur-libre.net : tutos sur des logiciels et services libres.

                              Association Sorgin Informatique Libre ( www.sorgin-informatique-libre.org). Education populaire au numérique libre et au libre en général.

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X