Colonnes pour une « FAQ »

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

  • Cosmic
    a répondu
    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

    Laisser un commentaire:


  • Cosmic
    a répondu
    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 : 44 
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é

    Laisser un commentaire:


  • Cosmic
    a répondu
    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:


  • lefabdu51
    a répondu
    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

    Laisser un commentaire:


  • Cosmic
    a répondu
    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 : 64 
Taille : 24,1 Ko 
ID : 2008599
    et sans:
    Cliquez sur l'image pour l'afficher en taille normale

Nom : sans tab.png 
Affichages : 51 
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

    Laisser un commentaire:


  • lefabdu51
    a répondu
    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

    Laisser un commentaire:


  • Cosmic
    a répondu
    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

    Laisser un commentaire:


  • Eddy.vh
    a répondu
    Hey. Salut Lomart.

    Ca fait plaisir de te retrouver.

    Laisser un commentaire:


  • lomart
    a répondu
    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

    Laisser un commentaire:


  • Cosmic
    a répondu
    lefabdu51 : je m'en vais essayer ça ce week-end merci

    Laisser un commentaire:


  • lefabdu51
    a répondu
    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

    Laisser un commentaire:


  • Cosmic
    a crée un sujet [RÉGLÉ] Colonnes pour une « FAQ »

    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

Annonce

Réduire
1 sur 2 < >

C'est [Réglé] et on n'en parle plus ?

A quoi ça sert ?
La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
Comment ajouter la mention [Réglé] à votre discussion ?
1 - Aller sur votre discussion et éditer votre premier message :


2 - Cliquer sur la liste déroulante Préfixe.

3 - Choisir le préfixe [Réglé].


4 - Et voilà… votre discussion est désormais identifiée comme réglée.

2 sur 2 < >

Assistance au forum - Outil de publication d'infos de votre site

Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

UTILISER À VOS PROPRES RISQUES :
L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

Problèmes connus :
FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

Installation :

1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

Archive zip : https://github.com/AFUJ/FPA/zipball/master

2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
et remplacer www. votresite .com par votre nom de domaine


Exemples:
Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
Télécharger le script fpa-fr.php dans: /public_html/
Pour executer le script: http://www..com/fpa-fr.php

Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
Télécharger le script fpa-fr.php dans: /public_html/cms/
Pour executer le script: http://www..com/cms/fpa-fr.php

En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
Voir plus
Voir moins

Partenaire de l'association

Réduire

Hébergeur Web PlanetHoster
Travaille ...
X