Colonnes pour une « FAQ »

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

  • [RÉGLÉ] Colonnes pour une « FAQ »

    Bonjour
    je viens de créer une page glossaire sur mon site https://smlcol.ovh/fr/blabla/plus-d-info/glossaire et je voulais mettre tout ça sur deux colonnes avec le code ci-dessous (qui semble me donner un résultat assez proche de ce que je veux via l’inspecteur):

    Code:
    section.colonne {
        -webkit-column-count:2; /* Opera, Safari, Google Chrome */
        -moz-column-count: 2; /* Firefox */
        column-count: 2; /* Internet Explorer */
        -webkit-column-gap: 100px;
        -moz-column-gap: 100px;
        column-gap: 100px;
        -webkit-column-rule: 2px dashed #555;
        -moz-column-rule: 2px dashed #555;
        column-rule: 2px dashed #555;
    }
    Pour information, j’utilise le plugin « UP - Universal Plugin » pour créer ce glossaire que j’utilise aussi pour faire mes FAQ. J’ai vu qu’il existait d’autres extensions dans le JED mais je voulais quelque chose d’assez homogène… ? (d'autant que je fais face à un "problème" similaire sur les demos de deux autres extensions)

    Du coup mon code html ressemble à ça

    Code:
    <section class="colonne">
    
    <h2 id="lien-A" class="lettrine">A</h2>
    
    <p>{up faq}</p>
    <p></p>
    <h4>Aberration chromatique</h4>
    <p>Il s’agit d’un défaut optique résultant de la décomposition de la lumière blanche en plusieurs bande de couleurs. On observe autour du blanc des contours flous ou une bande de couleur.</p>
    <h4>Arrière-plan</h4>
    <p>C’est la zone (floue ou nette) en arrière du sujet principal photographié.</p>
    <h4>Artefact</h4>
    <p>Il s’agit d’un défaut repéré sur une image souvent due à une compression trop forte de celle-ci. Par exemple, une grande ligne blanche ou un point noir sur une forte lumière.</p>
    <h4>Autofocus</h4>
    <p>Mise au point automatique sur un sujet.</p>
    <h4>Avant-plan</h4>
    <p>A l’inverse de l’arrière-plan, il s’agit tout simplement de la zone (floue ou nette) située avant votre sujet. On la nomme aussi « premier plan ».</p>
    <p>{/up faq}</p>
    
    <h2 id="lien-B" class="lettrine">B</h2>
    
    <p>{up faq}</p>
    <p></p>
    <h4>Basse lumière</h4>
    <ol>
    <li>Ce sont les zones d’ombre ou les plus foncées sur une photo.</li>
    <li>Conditions de prise de vue comme par exemple lors d’un concert dans une petite salle, au lever ou coucher de soleil où la lumière est (particulièrement) faible.</li>
    </ol>
    <h4>Balance des blancs</h4>
    <p>Une bonne balance des blancs permet d’équilibrer correctement les couleurs d’une photo. On retravaille souvent cette balance des blancs en post-traitement.</p>
    
    ...
    
    <p>{/up faq}</p>
    
    <h2 id="lien-I" class="lettrine sautcolonne">B</h2>
    
    ...
    Et du coup ma question : quand je mets sur deux colonnes et que je clique sur une définition, les définitions sont redistribuées sur les 2 colonnes… Y a-t-il moyen de forcer un saut de page avant le I par exemple ?

    J’ai vu « break-before » mais je ne comprends pas bien comment faire – au mieux, j’ai ce bout de code-ci mais dès que je sélectionne un mot, ça part en sucette…


    Code:
    .sautcolonne {page-break-before: always;}

    Une idée?

    Tiens au fait, pour réduire les réponses quand j'en sélectionne une autre, vous savez comment ça marche?
    Dernière édition par Cosmic à 07/11/2019, 19h36

    Cosmic - niveau: commence seulement à comprendre comment ça marche mais, forcément du coup, se pose encore plus de questions qu"avant

  • #2
    Salut,
    bascule Tinymce en mode code, efface tout et teste le code ci dessous :
    Si cela ne fonctionnes pas supprimes le {up tab}.
    Code:
    <section id="mafaq">
    {up tab |title-tag=h2}
    <h2 id="lien-A" class="lettrine">A</h2>
    
    {up faq|title-tag=h3}
    <h3>Aberration chromatique</h3>
    <p>Il s’agit d’un défaut optique résultant de la décomposition de la lumière blanche en plusieurs bande de couleurs. On observe autour du blanc des contours flous ou une bande de couleur.</p>
    <h3>Arrière-plan</h3>
    <p>C’est la zone (floue ou nette) en arrière du sujet principal photographié.</p>
    <h3>Artefact</h3>
    <p>Il s’agit d’un défaut repéré sur une image souvent due à une compression trop forte de celle-ci. Par exemple, une grande ligne blanche ou un point noir sur une forte lumière.</p>
    <h3>Autofocus</h3>
    <p>Mise au point automatique sur un sujet.</p>
    <h3>Avant-plan</h3>
    <p>A l’inverse de l’arrière-plan, il s’agit tout simplement de la zone (floue ou nette) située avant votre sujet. On la nomme aussi « premier plan ».</p>
    {/up faq}
    
    <h2 id="lien-B" class="lettrine">B</h2>
    
    {up faq|title-tag=h3}
    <h3>Basse lumière</h3>
    <p>Ce sont les zones d’ombre ou les plus foncées sur une photo.</p>
    <p>Conditions de prise de vue comme par exemple lors d’un concert dans une petite salle, au lever ou coucher de soleil où la lumière est (particulièrement) faible.</p>
    {/up faq}
    {/up tab}
    </section>
    les classes css correspondante
    .upfaq-button {/*max-width: */;width:48%;margin-right:1%}
    .upfaq-content {/*max-width: */;width:96%;margin-left:2%;}

    dans l'idée d'un affichage par onglet et tes definitions sur deux colonnes
    https://up.lomart.fr/demo/action-tab
    Dernière édition par lefabdu51 à 31/10/2019, 01h17
    Un site pour comparer des solutions : https://comparatifs-informaticien51.joomla.com
    un site personnel, sur Joomla, linux, windows et Powershell : https://informaticien51.joomla.com/

    Commentaire


    • #3
      lefabdu51 : je m'en vais essayer ça ce week-end merci

      Cosmic - niveau: commence seulement à comprendre comment ça marche mais, forcément du coup, se pose encore plus de questions qu"avant

      Commentaire


      • #4
        Bonjour Fabrice,

        Très astucieux ta solution ! Et elle est responsive et élégante
        Elle m'a permis de voir un petit bug dans l'action tab. un point oublié dans une regex. Ecraser l'action faq avec le zip joint.

        Tiens au fait, pour réduire les réponses quand j'en sélectionne une autre, vous savez comment ça marche?
        On peut utiliser TAB=accordion à la place de FAQ.
        Fichiers joints
        wabaw et woluweb 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


        • #5
          Hey. Salut Lomart.

          Ca fait plaisir de te retrouver.
          woluweb aime ceci.
          Cordialement.
          __
          Eddy !!!
          Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

          Commentaire


          • #6
            Envoyé par lomart Voir le message
            On peut utiliser TAB=accordion à la place de FAQ.
            Depuis la réponse de Fabrice, ça turbine déjà dans ma tête.

            top ton extension au passage

            Cosmic - niveau: commence seulement à comprendre comment ça marche mais, forcément du coup, se pose encore plus de questions qu"avant

            Commentaire


            • #7
              un conseil, travailles avec un bloc note, passe ton éditeur en mode code et colles tout dans ton article.
              tu n auras aucune balise <p> parasite. ces balises sont dues au paramètre par défaut entrée = <p>. Tu peut modifier ce paramètre directement dans les paramètres de Tinymce. Cette méthode de travail te permettras de comprendre comment structurer tout ça de manière à avoir un référencement naturel efficace.

              Ce que tu peux faire aussi , c'est utiliser des sauts de pages pour chaque lettre et afficher la table des matières .
              Le code d'un saut de page :
              Code:
              <hr class="system-pagebreak" alt="Faq lettre A" title="A" />
              Une autre reflexion : tu peux aussi utiliser la balise header...
              Code:
              <section id="mafaq">
              <header>
              <h1>Glossaire du site</h1>
              <p>Ici se trouve un glossaire concernant la photographie. </p>
              <p>Les définitions sont sur deux colonnes, pour simplifier la mise en page.</p>
              </header>
              Si tu experimente des bris de template ou de mise en page, vérifies que tes balises section soient bien fermées.
              Cela peut arriver si le saut de page est mal placé.
              Dernière édition par lefabdu51 à 01/11/2019, 12h46
              Un site pour comparer des solutions : https://comparatifs-informaticien51.joomla.com
              un site personnel, sur Joomla, linux, windows et Powershell : https://informaticien51.joomla.com/

              Commentaire


              • #8
                Hello lefabdu51

                merci pour les conseils - j'ai appliqué ta solution mais j'ai peut-être zappé qqch

                avec {up tab}:
                Cliquez sur l'image pour l'afficher en taille normale

Nom : avec tab.png 
Affichages : 70 
Taille : 24,1 Ko 
ID : 2008599
                et sans:
                Cliquez sur l'image pour l'afficher en taille normale

Nom : sans tab.png 
Affichages : 56 
Taille : 79,2 Ko 
ID : 2008600

                je dois laisser mon code css pour que ça fasse plusieurs colonnes?



                j'avais fait une sorte de table des matières par lettre : https://smlcol.ovh/en/blabla/plus-d-...ssary&catid=23 - on parle bien de la même chose? parce que j'ai peur qu'en mettant tout deux fois, ça fasse beaucoup

                je vais aussi combiner le code avec le tab=accordion proposé par lomart

                c'est d'ailleurs bizarre parce que le {up tab=accodion} fonctionne mais pas celui de ton code

                Cosmic - niveau: commence seulement à comprendre comment ça marche mais, forcément du coup, se pose encore plus de questions qu"avant

                Commentaire


                • #9
                  si up tab=accordion fonctionnes essaye {up tab=accordion | title-tag=h3} LEs espaces autour du tuyau doivent être important....

                  dans ton fichier custom.css ou user.css (suivant le template utilisé) insère ce code et ajuste le selon tes besoins :
                  Code:
                  .upfaq-button {/*max-width: */;width:48%;margin-right:1%}
                  .upfaq-content {/*max-width: */;width:96%;margin-left:2%;}
                  PS clic droit inspecter l'élément pour savoir quoi modifier au niveau css.
                  Pour ce qui est de avec up tab, il faut que je regarde les classes crées et comment les ajuster.
                  Dernière édition par lefabdu51 à 02/11/2019, 18h35
                  Un site pour comparer des solutions : https://comparatifs-informaticien51.joomla.com
                  un site personnel, sur Joomla, linux, windows et Powershell : https://informaticien51.joomla.com/

                  Commentaire


                  • #10
                    oui j'ai bien mis ton code css mais j'obtiens cet alignement étrange

                    j'ai essayé avec et sans les espaces autour du tuyau

                    Cosmic - niveau: commence seulement à comprendre comment ça marche mais, forcément du coup, se pose encore plus de questions qu"avant

                    Commentaire


                    • #11
                      lomart - comme j'ai la chance d'avoir le concepteur de cet excellent outil, j'ai une petite question: imaginons que je veuille créer une ancre vers le contenu d'une definition donc en ouvrant la réponse, c'est faisable?

                      Genre: je clique sur arrière-plan dans un article (sur lequel il y a un lien bien entendu) arrive directement sur la définition ouverte de ce mot...


                      Cliquez sur l'image pour l'afficher en taille normale

Nom : def.PNG 
Affichages : 53 
Taille : 74,9 Ko 
ID : 2008688

                      lefabdu51 : si tu as une idée je prends aussi hein


                      en tout cas, merci pour le coup de main - très apprécié

                      Cosmic - niveau: commence seulement à comprendre comment ça marche mais, forcément du coup, se pose encore plus de questions qu"avant

                      Commentaire


                      • #12
                        bon ben je suis arrivé à un bon compromis avec moi-même : https://smlcol.ovh/fr/blabla/plus-d-info/glossaire


                        je me servirai du saut de page par ailleurs parce que ça pourrait bien m'aider sur d'autres articles mais ici, je trouve que ça alourdit un peu

                        merci beaucoup pour votre aide

                        Cosmic - niveau: commence seulement à comprendre comment ça marche mais, forcément du coup, se pose encore plus de questions qu"avant

                        Commentaire

                        Annonce

                        Réduire
                        Aucune annonce pour le moment.

                        Partenaire de l'association

                        Réduire

                        Hébergeur Web PlanetHoster
                        Travaille ...
                        X