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

[Boscaro]

Bonsoir à tous,
je rencontre un petit soucis de marge dans un texte en format paragraphe
sur la page d'accueil de mon site,

https://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.

[Artikult]

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

[webcrea]

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/lire/930-css3-media-queries.html

[PhilJ]

Re : Marge dans paragraphe en mode responsive

Bonjour,

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

[Boscaro]

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 !

[Artikult]

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

[PhilJ]

Re : Marge dans paragraphe en mode responsive

Bonjour Artikult,

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

[Boscaro]

Re : Marge dans paragraphe en mode responsive

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

[Artikult]

Re : Marge dans paragraphe en mode responsive

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à

[PhilJ]

Re : Marge dans paragraphe en mode responsive

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,

[PhilJ]

Re : Marge dans paragraphe en mode responsive

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" />

[PhilJ]

Re : Marge dans paragraphe en mode responsive

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.

[Boscaro]

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

[PhilJ]

Re : Marge dans paragraphe en mode responsive

Bonjour,

[...] 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,

[Boscaro]

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