Colonnes pour une « FAQ »

[Cosmic]

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]

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




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]

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

[lefabdu51]

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 :

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

[Cosmic]

Hello lefabdu51

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

avec {up tab}:

et sans:


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

[lefabdu51]

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 :

<hr class="system-pagebreak" alt="Faq lettre A" title="A" />

Une autre reflexion : tu peux aussi utiliser la balise header...

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

[Cosmic]

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

[Eddy.vh]

Hey. Salut Lomart.

Ca fait plaisir de te retrouver.

[lomart]

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.

[Cosmic]

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

[lefabdu51]

Salut,
bascule Tinymce en mode code, efface tout et teste le code ci dessous :
Si cela ne fonctionnes pas supprimes le {up tab}.

<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

[Cosmic]

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):

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

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

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