Joomla 3 - Problème affichage avec Google Chrome

[lolosurleweb]

Bonjour,

Je viens de mettre mon site en ligne et il se comporte bien sur IE et Firefox. En revanche, sur Google Chrome, j'ai quelques soucis d'affichage : les images insérées dans les articles s'affichent en miniatures :

http://www.eso-plongee.fr/index.php?option=com_content&view=article&id=19&Itemid=254

http://www.eso-plongee.fr/index.php?option=com_content&view=article&id=31&Itemid=255

http://www.eso-plongee.fr/index.php?option=com_content&view=article&id=6&Itemid=113

... bref, presque tous les articles qui contiennent des images.


De plus, d'une façon générale, l'affichage est décentré, le slideshow est porté sur la gauche au lieu d'être au centre ... etc pas terrible en somme.

J'ai testé depuis plusieurs ordinateurs différents et j'ai toujours le même résultat.

J'utilise joomla 3, Template protostar, le composant BG max pour le fond d'écran et JCE pour l'édition des articles. Y a t'il une solution à ce problème ?

Merci d'avance et bonne année

Lolo

[lefabdu51]

Re : Joomla 3 - Problème affichage avec Google Chrome

Bonjour,

Je viens de mettre mon site en ligne et il se comporte bien sur IE et Firefox. En revanche, sur Google Chrome, j'ai quelques soucis d'affichage : les images insérées dans les articles s'affichent en miniatures :

http://www.eso-plongee.fr/index.php?option=com_content&view=article&id=19&Itemid=254

http://www.eso-plongee.fr/index.php?option=com_content&view=article&id=31&Itemid=255

http://www.eso-plongee.fr/index.php?option=com_content&view=article&id=6&Itemid=113

... bref, presque tous les articles qui contiennent des images.


De plus, d'une façon générale, l'affichage est décentré, le slideshow est porté sur la gauche au lieu d'être au centre ... etc pas terrible en somme.

J'ai testé depuis plusieurs ordinateurs différents et j'ai toujours le même résultat.

J'utilise joomla 3, Template protostar, le composant BG max pour le fond d'écran et JCE pour l'édition des articles. Y a t'il une solution à ce problème ?

Merci d'avance et bonne année

Lolo

cette regle te permettras de cibler chrome uniquement :

@media screen and (-webkit-min-device-pixel-ratio:0) {

/* mes modifs chrome
}

[SimonG]

Re : Joomla 3 - Problème affichage avec Google Chrome

Bonjour,

pour info, le problème est égaleme,nt présent sous Safari.

[lolosurleweb]

Re : Joomla 3 - Problème affichage avec Google Chrome

Salut Fabdu51 & SimonG,

Pardonne-moi je suis profane en programmation. J'appose cette règle en fin de fichier .CSS du template, c'est bien ça ?

Merci,

+ +

Lolo.

[lefabdu51]

Re : Joomla 3 - Problème affichage avec Google Chrome

Salut Fabdu51 & SimonG,

Pardonne-moi je suis profane en programmation. J'appose cette règle en fin de fichier .CSS du template, c'est bien ça ?

Merci,

+ +

Lolo.

oui en bas du fichier template.css ou du fichier custom.css, si tu en as crée un.
A toi de cibler les bonnes regles avec l'inspecteur d'élément.
Je ne les ai pas incluse dans la requete/

@simong: c est normal les deux navigateurs utilise webkit comme moteur de rendu.
Donc les defauts qui sont sur chrome sont aussi sous safari.

[SimonG]

Re : Joomla 3 - Problème affichage avec Google Chrome

@simong: c est normal les deux navigateurs utilise webkit comme moteur de rendu.
Donc les defauts qui sont sur chrome sont aussi sous safari.

Merci pour la précision

[lolosurleweb]

Re : Joomla 3 - Problème affichage avec Google Chrome

Salut Fabdu51,


J'ai inséré le code au pied de mon .CSS (car je n'ai pas de fichier custom) et cela n'a pas fonctionné.

@media screen and (-webkit-min-device-pixel-ratio:0) {

/* mes modifs chrome
}

Après, comme je ne programme pas, j'ai peut être mal interprété ta réponse. "mes modifs chrome" supposaient peut être que j'édite des lignes de codes pour les pages que je souhaitais modifier ? Pour le coup là, je ne saurais pas faire.


Mon problème se limite à la taille (sous-dimensionnée) des vignettes sur mes articles :

http://www.eso-plongee.fr/index.php?option=com_content&view=article&id=19&Itemid=254

http://www.eso-plongee.fr/index.php?option=com_content&view=article&id=6&Itemid=113

...


Et à la taille d'un tableau (sur-dimensionné) :

http://www.eso-plongee.fr/index.php?option=com_content&view=article&id=5&Itemid=112

C'est pas bien grave en soi mais c'est juste bien moins joli !!

Si tu vois la solution, je suis preneur

Merci à toi,

+ +

Lolo.

[lefabdu51]

Re : Joomla 3 - Problème affichage avec Google Chrome

ok je regardes ca des que j ai un petit moment...et je te renvoies les regles a mettre dedans.

[lolosurleweb]

Re : Joomla 3 - Problème affichage avec Google Chrome

Merci Fab !

+ +

[PhilJ]

Re : Joomla 3 - Problème affichage avec Google Chrome

Bonjour,


Essayez de vous débarrasser de tous vos tableaux (= <table>...</table> dans le code source). Également : n'indiquez pas de largeur et de hauteur (= width="..." et height="..." pour vos images : elles sont contrôlées via CSS. Ces 2 mesures combinées devrait régler le souci, et même permettre la compatibilité de vos pages avec les appareils mobiles.

Par exemple, pour votre page /index.php?option=com_content&view=article&id=19&It emid=254, remplacez :
—

<table align="center" style="float: left;">
<tbody>
<tr>
<td><span style="font-family: arial,helvetica,sans-serif;"><img width="304" height="190" alt="dolphin2" src="images/articles/dolphin2.jpg">&nbsp;</span></td>
<td style="text-align: justify;"><span style="font-family: arial,helvetica,sans-serif; font-size: 14pt; color: #132959;">Parmi nos grands classiques, la semaine de plongée à la réserve naturelle de...</span></td>
</tr>
</tbody>
</table>

—
par :
—

<p class="pull-left"><img alt="dolphin2" src="images/articles/dolphin2.jpg" /></p>
<p style="text-align: justify;">Parmi nos grands classiques, la semaine de plongée à la réserve naturelle de...</p>
—

Ce sera bien sûr à affiner par la suite, mais devrait suffire à régler le souci relevé.

Par exemple, pour éviter que le texte ne colle à l'image, vous pourrez ajouter style="padding-right: 6px;" au paragraphe contenant l'image :
—

<p class="pull-left" style="padding-right: 6px;"><img alt="dolphin2" src="images/articles/dolphin2.jpg"></p>

—Ce

[lolosurleweb]

Re : Joomla 3 - Problème affichage avec Google Chrome

Bonjour Phil,

Et merci pour vos conseils. Je ne sais pas programmer alors, j'ai simplement repris mes articles page/page, retiré les images, redimensionnées avec GIMP et remises en ligne sans indiquer de largeurs/hauteurs dans l'éditeur JCE. Il n'y a pas eu de changement.
J'ai ensuite retiré les largeurs/hauteurs de mes tableaux : il y a eu un changement en bien sur cette page en particulier http://www.eso-plongee.fr/index.php?...d=5&Itemid=112

Il semble effectivement que Chrome n'aime pas les tableaux / tabulations, car partout ailleurs dans mes articles où j'ai des images sans tableau, il n'y a pas de problème d'affichage. Cela dit, faire des mises en page sans tableau, c'est quand même pas très pratique et dans certains cas même, je ne vois pas comment faire autrement (avec JCE) : Image avec texte acollé notamment.

Merci en tout cas, ça m'a déjà permis d'avancer.

+ +

Lolo

[PhilJ]

Re : Joomla 3 - Problème affichage avec Google Chrome

Bonjour,

Je ne sais pas programmer alors, j'ai simplement repris mes articles page/page, retiré les images, redimensionnées avec GIMP et remises en ligne sans indiquer de largeurs/hauteurs dans l'éditeur JCE. Il n'y a pas eu de changement.

C'est normal : il faut vous débarrasser totalement des tableaux (voyez mon modèle de code). Votre problème sera vite résolu — y compris sur les écrans de petits formats.

Il semble effectivement que Chrome n'aime pas les tableaux / tabulations, car partout ailleurs dans mes articles où j'ai des images sans tableau, il n'y a pas de problème d'affichage.

Aucun navigateur « n'aime » les tableaux. C'est d'autant plus vrai que le site doit pouvoir être consulté sur smartphone, et même sur tablette.

Cela dit, faire des mises en page sans tableau, c'est quand même pas très pratique et dans certains cas même, je ne vois pas comment faire autrement (avec JCE) : Image avec texte acollé notamment.

1 – Difficulté : si vous regardez mon code, il n'est vraiment pas difficile d'éviter les tableaux.

2 – Texte collé sur l'image : regardez bien mes conseils. Il suffit d'un rien ou presque (= style="padding-right: 6px;") pour éviter cet inconvénient.



Bon courage pour la suite,

[lolosurleweb]

Re : Joomla 3 - Problème affichage avec Google Chrome

Bonjour Phil,

Merci pour vos précieux conseils. Je vais faire un essai et je vous tiens au courant.

Merci

Lolo

[lolosurleweb]

Re : Joomla 3 - Problème affichage avec Google Chrome

Salut Phil,

J'ai un peu tardé à répondre mais merci pour l'info. Effectivement, quand je fais l'essai directement par Firedebug, ça a l'air de fonctionner. Maintenant, comme je suis débutant, j'ai du mal a retrouver dans mon www le fichier HTML dans lequel il faut que je fasse directement et définitivement la modif. Pourriez vous m'aider ??

Merci

Lolo

[PhilJ]

Re : Joomla 3 - Problème affichage avec Google Chrome

Bonjour,

[...] j'ai du mal a retrouver dans mon www le fichier HTML dans lequel il faut que je fasse directement et définitivement la modif.

Ce n'est pas dans un fichier qu'il faut intervenir mais dans chacun de vos articles.

Pour cela, le plus simple est d'utiliser l'éditeur le plus pratique : JCE. Si cette extension n'est pas déjà présente dans l'administration de votre site, vous pouvez la télécharger depuis ici : http://www.sarki.ch/jce2. Décompressez l'archive puis installez le composant JCE pour la version de votre Joomla. Ensuite, définissez JCE comme l'éditeur par défaut de votre site : depuis l'administration, allez sur Système > Configuration, onglet 'Site' > Éditeur par défaut, et choisissez JCE.

Ceci fait, ouvrez l'un des articles concernés, puis passez en mode Code colorisé. Pour cela, appuyez sur l'icône <>. C'est dans ce code qu'il vous faudra faire vos modifications.



Cordialement,