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
Colonnes pour une « FAQ »
Réduire
X
-
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é
Laisser un commentaire:
-
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
Laisser un commentaire:
-
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%;}
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
Laisser un commentaire:
-
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
Laisser un commentaire:
-
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" />
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>
Cela peut arriver si le saut de page est mal placé.Dernière édition par lefabdu51 à 01/11/2019, 12h46
Laisser un commentaire:
-
Envoyé par lomart Voir le messageOn peut utiliser TAB=accordion à la place de FAQ.
top ton extension au passage
Laisser un commentaire:
-
Hey. Salut Lomart.
Ca fait plaisir de te retrouver.
- "J'aime" 1
Laisser un commentaire:
-
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?
Fichiers joints
- "J'aime" 2
Laisser un commentaire:
-
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>
.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
Dernière édition par lefabdu51 à 31/10/2019, 01h17
Laisser un commentaire:
-
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; }
Du coup mon code html ressemble à ça
Code:[COLOR=#FF0000][B]<section class="colonne"> <h2 id="lien-A" class="lettrine">A</h2>[/B][/COLOR] <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> [B][COLOR=#FF0000]<h2 id="lien-I" class="lettrine sautcolonne">B</h2>[/COLOR][/B] ...
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, 19h36Tags: Aucun
Annonce
Réduire
Aucune annonce pour le moment.
Laisser un commentaire: