Marge dans paragraphe en mode responsive

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

  • [RÉGLÉ] Marge dans paragraphe en mode responsive

    Bonsoir à tous,
    je rencontre un petit soucis de marge dans un texte en format paragraphe
    sur la page d'accueil de mon site,
    www.marianneoptique.com
    en effet j'ai paramétrer une marge "margin-right: 60px; margin-left: 60px;"
    et je rencontre bien sûr un problème en affichage sur iPhone ou autres téléphone.
    Existe-t-il une solution pour avoir une marge qui s'adapte à la taille des écrans de téléphone,
    par exemple en utilisant des valeurs en pourcentages.
    Par avance merci pour votre aide.

  • #2
    Re : Marge dans paragraphe en mode responsive

    Bonjour,

    En effet tu peux faire une règle css avec mediaqueries type:

    p {
    margin: 0 5%;
    }

    Mais j'ai l'impression que tu à mis tes marges dans l'article et non sur une feuille de style, du coup la règle s'applique sur tout les supports.

    Bonne journée
    Arti
    Artémis Solutions - Solutions numériques en Auvergne.
    http://www.artemis-solutions.fr

    Commentaire


    • #3
      Re : Marge dans paragraphe en mode responsive

      Il faut que tu utilises les media query, dans ton cas précis c'est l'instruction du type
      @media screen and (max-width: 640px) {
      .bloc {
      margin:0;
      }
      }

      pour en savoir plus
      http://www.alsacreations.com/article...a-queries.html
      Christophe
      http://www.webcrea.fr

      Commentaire


      • #4
        Re : Marge dans paragraphe en mode responsive

        Bonjour,


        Envoyé par Boscaro Voir le message
        [...] j'ai paramétrer une marge "margin-right: 60px; margin-left: 60px;"
        et je rencontre bien sûr un problème en affichage sur iPhone ou autres téléphone.

        Pour compléter les premières réponses, voici le code d'un extrait d'un paragraphe de votre page d'accueil, avec, en rouge, ce qui n'a pas sa raison d'être (déclarations CSS inline) et devrait être défini avec des règles CSS dans une feuille de style :

        <p style="text-align: justify; margin-right: 60px; margin-left: 60px;">
        <span style="font-size: 10pt;">[...] je récupère vos vieilles lunettes et je les envoie à "<a target="_blank" href="http://www.lunettes-sans-frontiere.tld/"><span style="text-decoration: underline;"><strong>Lunettes Sans Frontière</strong></span></a>".&nbsp;</span><span style="font-size: 10pt;">Je verse également une participation à l'association "<a target="_self" href="http://www.retina.tld/"><span style="text-decoration: underline;"><strong>Retina France</strong></span></a>".</span></p>

        En orange : un espace insécable parasite risquant de mettre à mal la continuité du paragraphe avec certains appareils (à remplacer par un espace normal).


        La première chose à faire est de nettoyer ce code car (1°) les définitions CSS inline ne font que rigidifier la mise en forme, (2°) compliquent beaucoup l'adaptation aux appareils mobiles, et (3°) sont nuisibles au référencement :


        <p>[...] je récupère vos vieilles lunettes et je les envoie à "<a target="_blank" href="http://www.lunettes-sans-frontiere.tld/">Lunettes Sans Frontière</a>". Je verse également une participation à l'association "<a href="http://www.retina.tld/">Retina France</a>".</p>

        Ensuite, supposons que les paragraphes (= <p>...</p>) de votre page d'accueil soient spéciaux par rapport aux paragraphes des autres pages de votre site. Les distinguer en CSS suppose de leur attribuer une classe — ci-dessous en vert :

        <p class="edito">[...] je récupère vos vieilles lunettes et je les envoie à "<a target="_blank" href="http://www.lunettes-sans-frontiere.tld/">Lunettes Sans Frontière</a>". Je verse également une participation à l'association "<a href="http://www.retina.tld/">Retina France</a>".</p>


        Ceci fait, il ne reste plus qu'à formater les différents éléments. Dans un fichier CSS de surcharge, ajoutez les règles suivantes :
        p.edito {
        font-size: 10pt;
        margin: 0 60px 9px;
        }
        p.edito > a {
        font-weight: bold;
        }

        Voilà pour les généralités de la classe edito.


        Concernant maintenant spécifiquement les appareils mobiles (= par exemple pour les largeurs d'écran inférieures à la largeur d'un iPad en mode portrait, qui est de 768 px), il suffit d'ajouter cette règle, qui va annuler les marges latérales trop importantes, en les ramenant de 60 px à 0 px :


        @media screen and (max-width: 767px) {
        p.edito {
        margin: 0 0 9px;
        }

        } /* --------------------------------------- */



        Résultat : un code (nettement plus) propre, bien plus facile à entretenir, et une bien meilleure souplesse permettant notamment l'adaptation sans peine à n'importe quel format d'écran .
        Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

        Commentaire


        • #5
          Re : Marge dans paragraphe en mode responsive

          Merci beaucoup pour votre aide,
          je suis vraiment impressionné par votre expertise, aussi je vais essayer d'appliquer ces corrections,
          mais vu mon niveau je vais faire des tests en local, je vous tiens au courant.
          J'ai utilisé JCE editor pour construire les articles de mon site dois-je continuer avec ?
          En attendant bonee soirée & bon WE !

          Commentaire


          • #6
            Re : Marge dans paragraphe en mode responsive

            Tu peux utiliser JCE sans problème.

            Je pense que la question qu'il manque, c'est quel template utilises-tu? Car c'est dans ce dernier que tu devras mettre en place les modifications.
            Cdlt

            Arti
            Artémis Solutions - Solutions numériques en Auvergne.
            http://www.artemis-solutions.fr

            Commentaire


            • #7
              Re : Marge dans paragraphe en mode responsive

              Bonjour Artikult,


              Envoyé par Artikult Voir le message
              Je pense que la question qu'il manque, c'est quel template utilises-tu? Car c'est dans ce dernier que tu devras mettre en place les modifications.
              Pour ma part je ne conseillerai pas de modifier le template lui-même, mais plutôt de lui adjoindre une nouvelle feuille de style, dite de surcharge (anglais override) dans laquelle seront centralisées toutes les modifications (toutes, donc aussi bien les surcharges des extensions tierces que celles des extensions natives de Joomla et celles des styles personnels).
              Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

              Commentaire


              • #8
                Re : Marge dans paragraphe en mode responsive

                Envoyé par PhilJ Voir le message
                Bonjour,





                Pour compléter les premières réponses, voici le code d'un extrait d'un paragraphe de votre page d'accueil, avec, en rouge, ce qui n'a pas sa raison d'être (déclarations CSS inline) et devrait être défini avec des règles CSS dans une feuille de style :

                <p style="text-align: justify; margin-right: 60px; margin-left: 60px;">
                <span style="font-size: 10pt;">[...] je récupère vos vieilles lunettes et je les envoie à "<a target="_blank" href="http://www.lunettes-sans-frontiere.tld/"><span style="text-decoration: underline;"><strong>Lunettes Sans Frontière</strong></span></a>".*</span><span style="font-size: 10pt;">Je verse également une participation à l'association "<a target="_self" href="http://www.retina.tld/"><span style="text-decoration: underline;"><strong>Retina France</strong></span></a>".</span></p>

                En orange : un espace insécable parasite risquant de mettre à mal la continuité du paragraphe avec certains appareils (à remplacer par un espace normal).


                La première chose à faire est de nettoyer ce code car (1°) les définitions CSS inline ne font que rigidifier la mise en forme, (2°) compliquent beaucoup l'adaptation aux appareils mobiles, et (3°) sont nuisibles au référencement :


                <p>[...] je récupère vos vieilles lunettes et je les envoie à "<a target="_blank" href="http://www.lunettes-sans-frontiere.tld/">Lunettes Sans Frontière</a>". Je verse également une participation à l'association "<a href="http://www.retina.tld/">Retina France</a>".</p>

                Ensuite, supposons que les paragraphes (= <p>...</p>) de votre page d'accueil soient spéciaux par rapport aux paragraphes des autres pages de votre site. Les distinguer en CSS suppose de leur attribuer une classe — ci-dessous en vert :

                <p class="edito">[...] je récupère vos vieilles lunettes et je les envoie à "<a target="_blank" href="http://www.lunettes-sans-frontiere.tld/">Lunettes Sans Frontière</a>". Je verse également une participation à l'association "<a href="http://www.retina.tld/">Retina France</a>".</p>


                Ceci fait, il ne reste plus qu'à formater les différents éléments. Dans un fichier CSS de surcharge, ajoutez les règles suivantes :
                p.edito {
                font-size: 10pt;
                margin: 0 60px 9px;
                }
                p.edito > a {
                font-weight: bold;
                }

                Voilà pour les généralités de la classe edito.


                Concernant maintenant spécifiquement les appareils mobiles (= par exemple pour les largeurs d'écran inférieures à la largeur d'un iPad en mode portrait, qui est de 768 px), il suffit d'ajouter cette règle, qui va annuler les marges latérales trop importantes, en les ramenant de 60 px à 0 px :


                @media screen and (max-width: 767px) {
                p.edito {
                margin: 0 0 9px;
                }

                } /* --------------------------------------- */



                Résultat : un code (nettement plus) propre, bien plus facile à entretenir, et une bien meilleure souplesse permettant notamment l'adaptation sans peine à n'importe quel format d'écran .
                Encore une question comment trouver l'endroit ou je dois écrire ces codes ?
                Je ne ne trouve pas de dossier contenant css et xml avec mon article

                Commentaire


                • #9
                  Re : Marge dans paragraphe en mode responsive

                  Envoyé par PhilJ Voir le message
                  Bonjour Artikult,




                  Pour ma part je ne conseillerai pas de modifier le template lui-même, mais plutôt de lui adjoindre une nouvelle feuille de style, dite de surcharge (anglais override) dans laquelle seront centralisées toutes les modifications (toutes, donc aussi bien les surcharges des extensions tierces que celles des extensions natives de Joomla et celles des styles personnels).
                  Bien sur qu'il ne faut pas modifier directement le template, mais commençons par le début, il peut y avoir différentes façon de faire en fonction du template. Donc commençons par là
                  Artémis Solutions - Solutions numériques en Auvergne.
                  http://www.artemis-solutions.fr

                  Commentaire


                  • #10
                    Re : Marge dans paragraphe en mode responsive

                    Envoyé par Boscaro Voir le message
                    J'ai utilisé JCE editor pour construire les articles de mon site dois-je continuer avec ?
                    Oui. Vous avez d'ailleurs une icône qui permet de voir le code source de vos contenus et qui a cet aspect : <>. C'est dans le code source qu'il faut intervenir, donc c'est cette icône qu'il faut utiliser. La source est colorisée par JCE, ce qui facilite grandement les choses.


                    [...] je vais essayer d'appliquer ces corrections, mais vu mon niveau je vais faire des tests en local, je vous tiens au courant.
                    La priorité est de mettre en place les quelques nouvelles règles CSS. Préférentiellement dans une nouvelle feuille de style — custom.css (voir si Template Creator permet ou non cela nativement, sinon il faudra injecter l'appel à cette nouvelle feuille de style à l'aide d'un plugin).

                    Ensuite, surtout pas de panique, allez-y progressivement :

                    • Assurez-vous d'abord que les nouvelles règles CSS sont bien chargées dans le code source de vos pages (si elles le sont avec un fichier custom.css, il suffit de faire apparaître le code source de la page courante = CTRL+U, puis de regarder si l'appel de custom.css est effectivement bien présent).
                    • Faites un essai sur un seul paragraphe (= élimination manuelle des styles inline + ajout de la class 'edito').
                    • En cas de souci, utilisez le versioning de Joomla pour revenir en arrière.
                    • Traitez les autres paragraphes.




                    Bonne soirée et bon week-end,
                    Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                    Commentaire


                    • #11
                      Re : Marge dans paragraphe en mode responsive

                      Envoyé par Boscaro Voir le message
                      Encore une question comment trouver l'endroit ou je dois écrire ces codes ?
                      Je ne ne trouve pas de dossier contenant css et xml avec mon article
                      Comme dit par Artikult, cela dépend du template. Apparemment, le vôtre a été obtenu avec Template Creator. Donc la première démarche devrait consister à consulter sa documentation.

                      Si Template Creator n'a rien prévu, il faut utiliser un petit plugin qui injectera un appel au fichier custom.css (dans le dossier /templates/marianne_optique_v01/css/). Cet appel devra ressembler à :

                      <link rel="stylesheet" href="/templates/marianne_optique_v01/css/custom.css" type="text/css" />
                      Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                      Commentaire


                      • #12
                        Re : Marge dans paragraphe en mode responsive

                        Envoyé par PhilJ Voir le message
                        Comme dit par Artikult, cela dépend du template. Apparemment, le vôtre a été obtenu avec Template Creator. Donc la première démarche devrait consister à consulter sa documentation.
                        Ne cherchez pas : c'est prévu par Template Creator . Le contraire m'eut d'ailleurs étonné .

                        => Si ce n'est pas déjà fait, téléchargez la documentation de TC (http://www.template-creator.com/fr/t....download&id=9), et lisez les pages 19 & 20 de la documentation française :
                        « Vous pouvez créer une feuille de styles spécifiques appelée "custom.css" et l'inclure dans votre template. Vous pouvez mettre dedans tous les styles CSS que vous voulez et ils seront intégrés dans le template.

                        Vous devez créer un fichier ici
                        [joomla]/components/com_templateck/projects/[yourtemplate]/css/custom.css »


                        Cela dit, cette indication est pour la création du template. J'ignore si c'est encore possible a posteriori alors que le template est déjà obtenu et en production.
                        Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                        Commentaire


                        • #13
                          Re : Marge dans paragraphe en mode responsive

                          Encore un grand merci, en effet ça fonctionne parfaitement, seulement j'aimerais remettre le texte en justify,
                          j'ai donc rajouter la css :
                          text-align: justify;
                          ensuite valider, enregistrer le template et copier celui-çi, comme je l'ai toujours fait dans Template Creator CK lors d'autres modifs,
                          et malheureusement l'alignement du texte ne change.
                          Je vous joint un copie écran de la modif dans Template Creator CK

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

Nom : Template Creator CK.jpg 
Affichages : 1 
Taille : 19,0 Ko 
ID : 1805845
                          Dernière édition par Boscaro à 23/10/2016, 14h18

                          Commentaire


                          • #14
                            Re : Marge dans paragraphe en mode responsive

                            Bonjour,


                            Envoyé par Boscaro Voir le message
                            [...] j'aimerais remettre le texte en justify,
                            j'ai donc rajouter la css : text-align: justify;
                            ensuite valider, enregistrer le template et copier celui-çi, comme je l'ai toujours fait dans Template Creator CK lors d'autres modifs, et malheureusement l'alignement du texte ne change.
                            Si si, ça marche, et donc vous n'avez pas besoin d'ajouter à nouveau un style inline text-align: justify dans vos paragraphes, comme par exemple dans <p style="text-align: justify;" class="edito">Je ne suis ni "Discounteur" ni "Magasin de Luxe" [...]</p>.

                            De même, vous devriez supprimer les indications de soulignement et de gras dans les liens :

                            <p class="edito">[...] Je verse également une participation à l'association "<a href="http://www.retina.tld/" target="_self"><span style="text-decoration: underline;"><strong>Retina France</strong></span></a>".</p>

                            En effet, le gras est déjà défini par la propriété p.edito > a { font-weight: bold; } de votre fichier custom.css.

                            Quant aux liens, si vous voulez qu'ils soient systématiquement soulignés, ajoutez ce qui est en vert ci-dessous à vos CSS :
                            p.edito > a {
                            font-weight: bold;
                            text-decoration: underline;
                            }

                            et (bien sûr) supprimez tous les <span style="text-decoration: underline;">...</span>.



                            Amicalement,
                            Dernière édition par PhilJ à 23/10/2016, 16h22
                            Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                            Commentaire


                            • #15
                              Re : Marge dans paragraphe en mode responsive

                              En effet ça marche, en fait cela ne fonctionnait pas dans la fenêtre de visualisation JCE apparemment.
                              Un grand merci pour votre aide c'est vraiment super, bravo pour votre expertise

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X