Balise [code] non responsive

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

  • [RÉGLÉ] Balise [code] non responsive

    Bonjour,
    Sur cette page (https://www.fred-net.fr/blog/joomla/...ogle-analytics), l'utilisation de la balise [code] avec l'éditeur JCE n'est pas responsive et déclenche un scroll en bas de l'écran.
    J'ai essayé de réduire le texte à 10pt, mais les chaines de caractères sont trop longues.
    Quelqu'un a-t-il une solution ?
    D'avance merci,
    Fred
    Dernière édition par fredjouan à 05/07/2017, 13h35
    http://www.neurogelenmarche.org/
    Une association de handicapés moteur. Projet Kunming 2018
    https://www.fred-net.fr création internet
    Hébergé avec bonheur et depuis 2002 chez PHPNET

  • #2
    Re : Balise [code] non responsive

    Bonjour Fred,

    Je ne connais pas (ou plus trop) JCE
    Il faut mettre ton code dans une balise div ou pre avec cette règle CSS : overflow-x:scroll;

    Dans ton cas, cela donne
    Code:
    <div style="overflow-x:scroll">
    <code> .... </code>
    </div>
    Comme cela sur un smartphone, l'ascenceur horizontal ne sera que sur le bloc code
    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


    • #3
      Re : Balise [code] non responsive

      Bonjour,

      Dans le css associé à "code", il y a un beau white-space: nowrap; qui provoque le mode "non responsive" que tu remarques.

      Dans ton custom.css, ajoute un
      Code:
      code {white-space: normal;}
      et tu devrais avoir une balise code "responsive" qui fait rentrer ton code dans la page.

      Pascal
      If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

      Commentaire


      • #4
        Re : Balise [code] non responsive

        tu devrais avoir une balise code "responsive" qui fait rentrer ton code dans la page.
        Encore faut-il avoir un espace !
        Perso, je n'aime pas trop les lignes de code qui passe à la ligne. Sur un site, l'important c'est la logique du code avec son indentation.
        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
          Re : Balise [code] non responsive

          je n'aime pas trop les lignes de code qui passe à la ligne
          Le but du responsive est d'essayer de tout faire rentrer sur l'écran, non ? et je ne pense pas que l'on utilise un téléphone portable pour faire un copie/coller dans son code...

          Sauf erreur de ma part, Fred n'aimait pas le scroll, mais, je peux me tromper

          Pascal
          If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

          Commentaire


          • #6
            Re : Balise [code] non responsive

            Le but du responsive est d'essayer de tout faire rentrer sur l'écran, non ?
            Pas pour moi, c'est avoir une représentation adaptée aux petits écrans.
            D'accord avec toi sur le fait que l'on n'utilise pas un téléphone portable pour faire un copier/coller dans son code. C'est plutôt pour rechercher une solution, d'où ma préférence pour conserver l'indentation. Surtout que les retours à la ligne se font sans respect de l'indentation comme c'est le cas dans les éditeurs genre Notepad++
            Après c'est une question de goût et chacun choisse !!!
            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


            • #7
              Re : Balise [code] non responsive

              Bonjour,
              Merci pour vos réponses. Je viens de tester la méthode "lomart" et un essai sur chrome - plugin petits formats : le scroll a disparu mais, comme l'indique l'image ci-dessous, le texte n'est pas affiché complètement :
              Cliquez sur l'image pour l'afficher en taille normale

Nom : analytics-smart.JPG 
Affichages : 1 
Taille : 50,4 Ko 
ID : 1806307
              Je n'ai pas de téléphone portable (normal !) et je ne peux tester en réel.
              J'ai oublié quelque chose ?
              Fred
              http://www.neurogelenmarche.org/
              Une association de handicapés moteur. Projet Kunming 2018
              https://www.fred-net.fr création internet
              Hébergé avec bonheur et depuis 2002 chez PHPNET

              Commentaire


              • #8
                Re : Balise [code] non responsive

                Bonjour Fred,

                Qu'entends-tu par
                le texte n'est pas affiché complètement
                Si cela correspond à notre discussion avec Lomart, essaies la méthode 'pascal'...

                Pascal
                If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

                Commentaire


                • #9
                  Re : Balise [code] non responsive

                  Je viens de tester ta méthode Pascal, mais sans résultat probant, malgré le vidage des caches.
                  Par contre, je ne sais pas si la méthode est bien prise en compte. N'ayant pas trouvé de fichier custom.css, j'en ai créé un dans le dossier CSS du template, comme indiqué sur l'image suivante :

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

Nom : custom.JPG 
Affichages : 2 
Taille : 44,1 Ko 
ID : 1806308

                  c'est bon ?

                  Ajout : Ce n'est pas bon, je viens d'ajouter un code couleur et il n'est pas appliqué (le texte reste rouge) :
                  Code:
                  code {
                    color: #aaaaaa;
                    white-space: normal;
                  }
                  Dernière édition par fredjouan à 05/07/2017, 11h47
                  http://www.neurogelenmarche.org/
                  Une association de handicapés moteur. Projet Kunming 2018
                  https://www.fred-net.fr création internet
                  Hébergé avec bonheur et depuis 2002 chez PHPNET

                  Commentaire


                  • #10
                    Re : Balise [code] non responsive

                    Bonjour Fred,

                    Sur un template Protostar, si c'est ton cas, le fichier se nomme user.css

                    Sur ta copie d'écran, cela fonctionne. On n'a plus d'ascenseur horizontal général à la page, mais un ascenseur pour chaque bloc de code qui le nécessite. Après, comme notre discussion avec Pascal, sa solution est idéale pour du code sur UNE ligne et la mienne pour un bloc de plusieurs lignes.

                    Donc pour avoir le beurre, la crémière et tutti quanti, je ferais le CSS suivant :
                    Code:
                    code {white-space: normal}
                    pre code {white-space: pre}
                    pre {overflow-x:scroll}
                    1/ le code de pascal : saut de ligne pour du code dans une balise code
                    2/ pas de saut de ligne si la balise code est dans une balise pre
                    3/ on ajoute un ascenseur pour les balises pre

                    Le HTML devenant pour un code multiligne :
                    Code:
                    <pre>
                    <code> .... </code>
                    </pre>
                    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


                    • #11
                      Re : Balise [code] non responsive

                      Merci lomart, je m’aperçois d'une chose, j'ai retiré du code de l'article les balises <pre> en ne laissant que les balises <code> car elles me posaient problème dans la mise en page.
                      D'après ce que je comprends, la balise <pre> gère le contenu de l'ensemble et la balise <code> gère le contenu de chaque ligne.…

                      Par ailleurs, j'utilise des templates fabriqués avec templatecreatorck, c'est pourquoi j'ai créé le fichier custom.css dans le répertoire CSS du template, comme sur l'image du message précédent.

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

Nom : custom.JPG 
Affichages : 2 
Taille : 44,1 Ko 
ID : 1806309

                      Doit-il être placé dans le répertoire CSS ou à la racine du template (au même niveau que le fichier index.php) ?

                      Si ce fichier voulait fonctionner, je tenterai bien la méthode "avec le postérieur de la crémière"

                      Je suis en train de penser à une chose : Cédric m'avait un jour conseillé d'ajouter un fichier override.css dans le dossier CSS. C'est peut-être la solution de renommer le fichier custom.css ?
                      Dernière édition par fredjouan à 05/07/2017, 12h39
                      http://www.neurogelenmarche.org/
                      Une association de handicapés moteur. Projet Kunming 2018
                      https://www.fred-net.fr création internet
                      Hébergé avec bonheur et depuis 2002 chez PHPNET

                      Commentaire


                      • #12
                        Re : Balise [code] non responsive

                        j'ai retiré du code de l'article les balises <pre> en ne laissant que les balises <code> car elles me posaient problème dans la mise en page.
                        PRE est une balise pour un bloc de code alors que CODE est celle pour du code en ligne

                        Cédric m'avait un jour conseillé d'ajouter un fichier override.css dans le dossier CSS. C'est peut-être la solution de renommer le fichier custom.css ?
                        Peut-être ? il faut tester
                        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
                          Re : Balise [code] non responsive

                          Non, ça ne veut pas le faire. Poisse à pouire !
                          Je n'arrive pas à trouver ces balises dans les feuilles CSS du template. En faisant "Examiner l'élément" dans Firefox, on trouve bien le code, mais dans un fichier optimisé par JCH Optimize :

                          L'emplacement initial doit être ailleurs, mais où ? Je viens de me taper les feuilles CSS default et template (c'est la feuille principale de templatecreatorck), sans rien trouver.

                          Ajouté à 14h32 : Quel idiot, en désactivant JCH Optimize, ces balises sont traitées dans la feuille bootstrap.css
                          Dernière édition par fredjouan à 05/07/2017, 13h34
                          http://www.neurogelenmarche.org/
                          Une association de handicapés moteur. Projet Kunming 2018
                          https://www.fred-net.fr création internet
                          Hébergé avec bonheur et depuis 2002 chez PHPNET

                          Commentaire


                          • #14
                            Re : Balise [code] non responsive

                            salut
                            dans template creator, tu as la possibilité d'éditer le fichier "custom.css" directement dans l'interface : Paramètres >> Custom CSS
                            CEd
                            Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
                            http://www.template-creator.com Outil de création de templates
                            Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

                            Commentaire


                            • #15
                              Re : Balise [code] non responsive

                              Salut Cédric,
                              Oui, c'est peut-être mieux d'appliquer cette règle dans le fichier custom.css, pour éviter les ennuis lors d'une mise à jour.
                              Le rendu est nickel sur tous les formats, même les plus petits, et le look a été modifié pour mieux s'intégrer avec le template.
                              Merci beaucoup à tous les trois pour votre aide,
                              Fred
                              http://www.neurogelenmarche.org/
                              Une association de handicapés moteur. Projet Kunming 2018
                              https://www.fred-net.fr création internet
                              Hébergé avec bonheur et depuis 2002 chez PHPNET

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X