Différences d'affichage de certaines images entre google chrome et IE/FIREFOX

Réduire
Ce sujet est fermé.
X
X
Réduire
 
  • Page sur 2
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages
Précédent 1 2 template Suivant
  • #1

    [RÉGLÉ] Différences d'affichage de certaines images entre google chrome et IE/FIREFOX

    Bonjour à tous

    J'ai presque fini mon site. J'ai contrôlé son avancement sur Google Chrome. Quand je le regarde depuis IE ou Firefox, il y a des différences inesthétiques. L' image que j'ai fabriqué avec mon logo et mon slogan (jpg) en haut de mon site a une dimension beaucoup plus grande sur Firefox et IE et n'est pas complètement lisible.

    J'ai quelques autres images insérées dans des articles qui n'ont pas du tout la même taille: beaucoup plus petit.

    Est ce qu'il y a un moyen de régler cela ?

    Merci
    Tags: Aucun
  • #2
    Re : Différences d'affichage de certaines images entre google chrome et IE/FIREFOX

    Est ce qu'il y a un moyen de régler cela ?
    Sans trop m'engager je réponds oui, mais en pratique, il faudrait une adresse pour voir. Pour le moment on est dans la pure théorie, et Mme Irma ne vient plus sur le forum, et il est de plus en plus difficile de lire dans les entrailles de poulet, vu que la plupart du temps ils sont vendus intégralement vidés.
    Lorsque l'on se cogne la tête contre un pot et que cela sonne creux, ça n'est pas forcément le pot qui est vide.
    Confucius

    Commentaire

    • #3
      Re : Différences d'affichage de certaines images entre google chrome et IE/FIREFOX

      et les entrailles de poulets, ça salit !!

      voilà mon adresse : http://www.qse-pro.fr/

      merci !

      Commentaire

      • #4
        Re : Différences d'affichage de certaines images entre google chrome et IE/FIREFOX

        Le problème de base c'est que ton image est beaucoup trop grande : 3 188px × 304px (redimensionné à 1 542px × 147px) indications fournies par Firefox. Et sous Chromium (comme Chrome mais sans OGM) l'image est ramenée à 1050px x 100 px.
        Essaie de réduire ton image à cette dimension,et ça devrait aller.
        Lorsque l'on se cogne la tête contre un pot et que cela sonne creux, ça n'est pas forcément le pot qui est vide.
        Confucius

        Commentaire

        • #5
          Bonjour,


          ...Lesoutier a raison : l'image est beaucoup trop grande.

          Toutefois, il ne devrait pas suffire de la réduire à 1 542px × 147px, car elle se trouve dans un container (= <header class="header-site">) qui a pour largeur 1050 px, marges comprises. En d'autres termes : l'image dans le container serait de toute façon plus large que le container qui le contient, lequel est d'ailleurs réglé à une largeur (= 1050 px) qui excède déjà le standard du web (= 1008 px, marges comprises). Donc une largeur de 1542 px, ce serait encore plus de ~ 1 / 3 de trop :-\

          C'est ce débordement qui explique que
          l'image est ramenée à 1050px x 100 px.
          par certains navigateurs respectant les standards stricts.

          => Le plus logique est donc de redimensionner votre image à 1050px X 100px, tout au plus. De cette façon, elle ne déborderait plus de son container en largeur (qui est, lui, défini à 1050 px), et tous les navigateurs devraient s'y retrouver de façon uniforme.

          Évidemment, il aurait encore bien mieux à faire : ne pas autoriser une largeur de 1050 px, mais tout ramener à la largeur standard, c'est-à-dire à 1008 px (toutes marges comprises).

          En effet, la largeur de <body> est actuellement à 1008 px sur un écran standard (1024 px) : la largeur standard est donc parfaitement respectée par le template, du moins sur un tel écran.

          Le problème est, peu après dans le code, avec le container <div class="wrapper-site">, car ce container est défini comme plus large que <body>, avec une largeur de 1050 px, à quoi viennent s'ajouter des marges intérieures (= padding) de part et d'autre : 10 + 1050 + 10 = 1070 px. => Là encore, il y a un défaut, car le container wrapper-site est plus grand que le parent qui le contient. Voyez les entrailles du code CSS actuel :

          Code:
          .wrapper-site {
  width: [B][COLOR=#ff0000]1050px[/COLOR][/B];
}
          Si vous voulez obtenir quelque chose de vraiment propre, il faudrait changer cela de la manière suivante :

          Code:
          .wrapper-site {
  width: [B][COLOR=#008000]988px[/COLOR][/B]; /* En effet, 1008 – (2 X 10) = 988 */
}
          Si vous faites cela, pensez aussi à changer votre image, qui ne devrait pas excéder 988 px X 94 px.

          A noter : sans rien faire de plus (= de plus que redimensionner votre image + changer la valeur de la largeur de .wrapper-site), le diaporama se calera lui aussi dans les bonnes valeurs, ce qui n'est pas du tout le cas à l'heure actuelle.


          Cela dit, c'est à vous de voir — c'est le cas de le dire...



          Cordialement,



          PhilJ
          Dernière édition par PhilJ à 19/06/2014, 17h28
          Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

          Commentaire

          • #6
            Re : Différences d'affichage de certaines images entre google chrome et IE/FIREFOX

            merci beaucoup pour ces réponses détaillées. Je vais regarder cela et je vous tiens au courant du résultat !

            Commentaire

            • #7
              Re : Différences d'affichage de certaines images entre google chrome et IE/FIREFOX

              elle est tellement grande qu'ellle soit de son cadre
              Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer
              Cette année, le JoomlaDay FR a lieu à Bruxelles, les 20 et 21 mai 2022, plus d'infos et inscriptions : www.joomladay.fr

              Commentaire

              • #8
                Re : Différences d'affichage de certaines images entre google chrome et IE/FIREFOX

                Re,


                Envoyé par Etienne-QSE Voir le message
                merci beaucoup pour ces réponses détaillées. Je vais regarder cela et je vous tiens au courant du résultat !
                ...Concernant CSS, vous devez pouvoir modifier la largeur dans les paramètres du template (= Extensions > Templates > JoomSpirit 76). Au besoin, aidez-vous du manuel en ligne (http://www.template-joomspirit.com/h...76/manual.html) : essayez width = 988 (la démonstration en ligne ici http://www.template-joomspirit.com/t...la/template-76 est réglée à 980 px, mais vous devez pouvoir pousser jusqu'à 988 px).

                Mais n'oubliez pas de redimensionnez d'abord votre image d'en-tête.



                Cordialement,



                PhilJ
                Dernière édition par PhilJ à 20/06/2014, 00h32
                Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                Commentaire

                • #9
                  Re : Différences d'affichage de certaines images entre google chrome et IE/FIREFOX

                  Bonjour

                  j'ai changé la dimension de mon logo en 988 x 94 et dans le template, j'ai paramétré à 988 : même si je trouve que ce n'est pas très large !

                  Par contre, j'ai encore des icônes qui parfois s'affichent bien sur tous les navigateurs , parfois pas bien du tout sur FIREFOX : comme là :

                  http://www.qse-pro.fr/informations-pratiques/disponibilite.html

                  http://www.qse-pro.fr/prestations/formation.html

                  et aussi sur le bas de la page de la page d'accueil : http://www.qse-pro.fr

                  Merci de votre aide

                  Commentaire

                  • #10
                    Re : Différences d'affichage de certaines images entre google chrome et IE/FIREFOX

                    C'est normal que les images soit déformées, certaines font 16 * 16 en taille d'origine et vous les forcez en 128 * 128.

                    Ce redimensionnent est du à la présence des attributs "width" et "height" au niveau des balises <img>.
                    Je ne sais pas si c'est vous même ou un script qui applique ces valeurs mais en tout cas il faut remédier à ça sinon les images seront toujours déformées...

                    Commentaire

                    • #11
                      Bonjour,



                      Envoyé par Etienne-QSE Voir le message
                      j'ai changé la dimension de mon logo en 988 x 94 et dans le template, j'ai paramétré à 988
                      ...Tout va bien maintenant :-)


                      je trouve que ce n'est pas très large
                      ...Je = vous sur votre écran (qui doit être un 23", si ce n'est pas un téléviseur). Mais sur le mien, réglé sur le standard 1024, c'est maintenant parfait : le contenu occupe toute la largeur de l'écran, ni plus ni moins.

                      Autre avantage du correctif que vous venez d'appliquer : votre site s'affiche bien maintenant sur tablette de type iPad, du moins en mode paysage (largeur imposée : 1024px).


                      Vous ne pouvez bien sûr pas obliger tous vos visiteurs à posséder le même [type d'] écran que le vôtre. Il existe toutefois des techniques pour adapter les contenus à différents formats d'écran de façon — notamment — à ce que le site ne paraisse jamais trop étroit. Ces techniques consistent à définir des types d'écran en fonction de leur largeur, mais si vous n'êtes ni professionnel ni « mordu » de CSS, ce n'est probablement pas à conseiller, surtout sur la base du template adopté (= Joomspirit 76), qui n'est guère flexible.


                      Par contre, j'ai encore des icônes qui parfois s'affichent bien sur tous les navigateurs , parfois pas bien du tout sur FIREFOX
                      ...Sur ce point, voyez la réponse de Soundboy : il vous faut régler les dimensions des icônes en fonction de leurs dimensions réelles (par exemple, les dimensions des icônes 16 X 16 doivent être déclarées en 16 X 16).



                      Cordialement,




                      PhilJ
                      Dernière édition par PhilJ à 21/06/2014, 15h22
                      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 : Différences d'affichage de certaines images entre google chrome et IE/FIREFOX

                        merci encore.

                        Pour mes icônes, je les ai mis en .PNG au lieu de .ICO et cela résout le problème : je ne sais pas pourquoi mais pourvu que ça marche.

                        Autre question : j'ai cherché sur Internet mais j'ai eu du mal à comprendre comment faire un sitemap. J'ai compris que Google se servait de ce fichier avec sitemap.xml pour bien indexer le site, mais comment faire pour le générer et le mettre au bon endroit ?

                        Commentaire

                        • #13
                          Bonsoir,


                          Envoyé par Etienne-QSE Voir le message
                          Autre question : j'ai cherché sur Internet mais j'ai eu du mal à comprendre comment faire un sitemap. J'ai compris que Google se servait de ce fichier avec sitemap.xml pour bien indexer le site, mais comment faire pour le générer et le mettre au bon endroit ?
                          ...C'est très simple : téléchargez et installez le composant Xmap. C'est ici : http://www.jooxmap.com.

                          Ensuite :

                          1. Pour créer un plan de site, allez dans Composants > Xmap : Nouveau plan de site, puis cochez les menus dont les liens devront être indexés, nommez le plan à votre guise, et sauvegardez.
                            —
                          2. Pour obtenir un plan XML à transmettre aux Google Webmaster Tools :
                            —
                            • Toujours depuis le backoffice de Joomla, dans la liste dans laquelle apparaît votre plan de site (= comme ci-dessus : Composants > Xmap), faites un clic droit sur [XML sitemap], et choisissez 'Copier l'adresse du lien'. Cette adresse devrait se terminer par /index.php?option=com_xmap&view=xml&tmpl=component& id=1.
                              —
                            • Allez dans Google Webmaster Tools (inscription préalable indispensable), et collez l'adresse complète que vous venez de copier dans : Exploration > Sitemaps : Ajouter un plan de site.
                              —

                          3. Enfin, pour ajouter un plan de site HTML à votre site : allez dans le menu dans lequel vous souhaitez ajouter le plan de site précédemment créé (= Menus > Votre menu > Nouveau), puis pour 'Type de lien de menu', sélectionnez Xmap : HTML Site map. Nommez votre plan, sauvegardez. C'est tout.


                          Important : vos plans de site (le XML comme le HTML) s'actualiseront par la suite sans votre intervention.


                          Bonne soirée,



                          PhilJ
                          Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                          Commentaire

                          • #14
                            Re : Différences d'affichage de certaines images entre google chrome et IE/FIREFOX

                            Merci ! ça marche !

                            Commentaire

                            • #15
                              Re : Différences d'affichage de certaines images entre google chrome et IE/FIREFOX

                              Envoyé par Etienne-QSE Voir le message
                              Merci ! ça marche !
                              ...Impec' .
                              Je peux même voir votre sitemap au format XML.


                              Bonne continuation,



                              PhilJ
                              Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                              Commentaire

                              Précédent 1 2 template Suivant

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire
                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X