Joomladay francophone 2018 à Paris 18 et 19 mai

Template et firefox !!!

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

  • Template et firefox !!!

    Bonjour,

    Alors voilà, j'en suis à mon troisième template avec joomla 1.5 et j'ai un souci d'affichage avec le dernier... Comme vous pouvez le constater avec les deux images jointe, mon template se retrouve éclaté avec firefox alors qu'il est niquel avec ie7 et chrome...

    Après des heures de recherche, je sollicite votre aide car là je sèche...
    Fichiers joints

  • #2
    On dirait un problème sur une table, Je suppose que ton template est avec des tables. Regarde au niveau de la table qui est sous l'illustration, il doit y avoir des width exprimés en % qui s'afficheraient mieux si ils étaient en px ou l'inverse. Essaie de bidouiller à ce niveau.
    Le plus important c'est pas d'avoir les meilleures cartes. ...
    C'est de bien jouer les tiennes.

    Commentaire


    • #3
      C'est ce que je regarde mais ce que je ne comprend pas c'est pourquoi avec firefox et pas les autres ?

      Commentaire


      • #4
        Parceque firefox est plus strict par rapport à la norme.
        Le plus important c'est pas d'avoir les meilleures cartes. ...
        C'est de bien jouer les tiennes.

        Commentaire


        • #5
          J'ai exactement le même problème ! Si vous trouvez avant moi, vous seriez gentil d'inscrire la solution à cette énigme ! Merci !

          Commentaire


          • #6
            Sans voir tes CSS, c'est difficile de proposer une correction.

            Mais il y a un principe de base à connaitre.
            J'ai exactement le même problème ! Si vous trouvez avant moi, vous seriez gentil d'inscrire la solution à cette énigme
            Ce n'est pas vraiment une enigme. Et à mon avis le pb doit tourner autour de cette question.
            Il faut afficher ceci en GROS sur votre mur :

            width(IE)="padding-left"+"border-left"+ width(FF) + "padding-right"+"border-right"
            C'est à dire :
            - avec Firefox,
            la largeur (d'une div) exclut padding et border
            - Avec IE,
            la largeur (d'un block) inclut padding et border (de la div)
            Cela peut se corriger comme ceci (un hack) :
            Code:
            div {
            margin: 5em;
            padding: 4em;
            border: 1em solid green;
            width: 40em
            }
            html>body div {
            width: 30em
            }
            où : html>body div est une correction (normalement) de l'interprétation de IE du fameux box model.

            Défini ici par le W3C :
            Fichiers joints
            Une journée entière pour se former à la gestion d'un site et parler de son futur site avec des experts Joomla!
            Ghazal, Lomart, Manu93fr et pleins d'autres vous attendent le 19 mai pour la journée Grands Débutants au https://www.joomladay.fr de Paris

            Commentaire


            • #7
              Question pour Ghazal,

              tu ne pense pas que 2 div imbriqué :
              - le div extérieur où tu définis le width (éventuellement même en %)
              - le div intérieur où tu définis margin et padding
              est une meilleure solution ??

              Plusieurs avantages :
              - la solution est la même pour tous les navigateurs
              - ça évite de faire un hack
              - la solution est pérenne, même si IE ou FF changent de conception dans une prochaine version (changement d'interprétation du width ou des hacks)
              - tu peux même exprimer des largeurs en %

              Qu'en penses-tu ?
              Merci de tes idées/commentaires. Je n'ai pas trouvé d'équivalents de ma solution sur Google et ça m'intéresserait d'avoir des avis d'experts.

              A+
              Catherine
              Mon site : www.biallais.com
              Pour les nouveaux : pensez à installer
              - extensions pour Firefox: Web Developer + Firebug
              - extensions pour IE: IE Developer Toolbar

              Commentaire


              • #8
                Je n'ai fait que redonner une solution tres fameuse, dont l'origine est ici :
                http://tantek.com/CSS/Examples/boxmodelhack.html
                commentée partout.

                Quant à ta question.
                Bien sur.
                C'est meme l'une des autres solutions les plus connues.
                Décrite ici (nested boxes):
                http://www.washington.edu/webinfo/sn.../boxmodel.html

                Mais il vaut mieux éviter de multiplier les div, tout dépend de la structure de ta page.
                Une journée entière pour se former à la gestion d'un site et parler de son futur site avec des experts Joomla!
                Ghazal, Lomart, Manu93fr et pleins d'autres vous attendent le 19 mai pour la journée Grands Débutants au https://www.joomladay.fr de Paris

                Commentaire


                • #9
                  Merci Ghazal pour ta réponse et sa précision.

                  NB: Je vais rarement lire des docs en anglais, on en trouve déjà tellement en français que c'est déjà pas évident d'en faire le tri. (Ca fait peu de temps que j'ai débuté le web.)
                  Et j'ai plus de mal à voir dans les docs en anglais ce qui peut ou pas m'intéresser (par rapport à mon niveau d'acquisition de compétences).


                  Je me permets une autre question :
                  Pourquoi dis-tu qu'il vaut mieux éviter de multiplier les div ?

                  Seulement pour la lisibilité du code ou il y a une autre raison ?

                  Merci encore!
                  A+
                  Mon site : www.biallais.com
                  Pour les nouveaux : pensez à installer
                  - extensions pour Firefox: Web Developer + Firebug
                  - extensions pour IE: IE Developer Toolbar

                  Commentaire


                  • #10
                    Sorry (lol) pour la doc en anglais.
                    On va dire que c'est de la doc d'origine.
                    Tantek Celik fait partie de ceux qui ont révolutionné et promu l'approche
                    "différencier présentation et contenu". Son box-model est quasiment historique.
                    Pour les div, je viens encore d'en faire (l'amère) expérience, il faut prendre garde à "l'inheritance", l'héritage(?).
                    Les definitions que tu appliques en haut (disons le body) peuvent s'appliquer jusqu'en bas, si tu ne modifies rien, d'où le terme Cascading Style Sheet.
                    Ex :
                    body {text-align: center;}
                    Tout le texte de ta page est centré.
                    Donc plus tu as de divs, plus tu peux générer de pb de réajustements du fait que l'inheritance crée "parents" et "enfants", ceux qui héritent.
                    -- logique capitaliste, lol ---
                    Moins il y a de div, mieux on peut controler.
                    Une journée entière pour se former à la gestion d'un site et parler de son futur site avec des experts Joomla!
                    Ghazal, Lomart, Manu93fr et pleins d'autres vous attendent le 19 mai pour la journée Grands Débutants au https://www.joomladay.fr de Paris

                    Commentaire


                    • #11
                      OK ! merci pour la rapidité de ta réponse !

                      Je résume : d'après ton expérience, il ne faut pas multiplier le "nombre de niveaux de div" principalement à cause des problèmes d'héritage.

                      Du coup, j'ai cherché les propriétés "héritables". En fait il y en a peu et c'est beaucoup de propriétés de mise en forme de texte (à part text-align justement...)
                      cf ce lien sur pompage.net
                      * color
                      * font (et ses propriétés reliées)
                      * letter-spacing
                      * line-height
                      * list-style (et ses propriétés reliées)
                      * text-align
                      * text-transform
                      * white-space
                      * word-spacing

                      ou plus complet : ce lien (inherit yes)

                      Il n'y a que le text-align qui t'a déjà joué des tours ou il faut être vigilant avec d'autres propriétés ?

                      A+

                      PS: Je t'ai repiqué l'idée de signature, j'ai perdu plusieurs semaines avant de découvrir ces outils TRES pratiques !!!
                      Mon site : www.biallais.com
                      Pour les nouveaux : pensez à installer
                      - extensions pour Firefox: Web Developer + Firebug
                      - extensions pour IE: IE Developer Toolbar

                      Commentaire


                      • #12
                        Si tu ne veux pas mettre en ligne le site, pour qu'on regarde, ça va être dur !
                        Je peux te le mettre en ligne sur un site de test (juste le template, on ne verra pas ton url) pour tester si tu veux.

                        Commentaire


                        • #13
                          Merci Ghazal de ta patience... J'ai appris beaucoup avec tes explications, mais je n'ai malheureusement pas réussi à solutionner mon problème. Je suis assez débutante dans le web. J'ai mis tout à zéro, autant les marges que padding et border dans le CSS (border 0 pour la table et toutes les images séparément, au cas où...) mais ça n'a rien changé.

                          Habituellement, quand je mets un site en ligne en HTML avec des tables, j'ai jamais ce problème... c'est pour ça que pour moi, c'est une énigme... mais on pourrait peut-être plus dire que c'est juste nébuleux pour moi, ça passe mieux...

                          Vous pouvez voir le design problématique (et monstrueusement mal amanché) au:
                          http://www.lemondedekhelia.com/admin , en emplacement temporaire.

                          Merci de m'aider si gentiment !

                          Commentaire


                          • #14
                            @numerinos
                            OOps, c'est encore pire que sur ton pics avec FF pour Mac.
                            Je vais regarder, une reponse demain dans la journée. La, j'ai les yeux qui louchent
                            @cbia
                            Super.
                            Une petite piqure de rappel CSS est salutaire sur un forum ... dédié aux pb de CSS.
                            Mon pb (le plus recent) d'inheritance etait du à un menu avec des ul/li imbriqués
                            <ul><li><ul><li></li></ul></li></ul> et un text-align placé malencontreusement. Petit exemple classique pour les menus Joomla.
                            Une journée entière pour se former à la gestion d'un site et parler de son futur site avec des experts Joomla!
                            Ghazal, Lomart, Manu93fr et pleins d'autres vous attendent le 19 mai pour la journée Grands Débutants au https://www.joomladay.fr de Paris

                            Commentaire


                            • #15
                              Salut,
                              je vois que tu as fait une decoupe avec ImageReady.
                              Hmmmm, c'est tres difficile de le faire avec Joomla, qui n'est pas trop prévu pour cela ou alors il faut vraiment bien connaitre les CSS propres à joomla.

                              Dans celles que j'ai pu voir sur ton site, il n'y a aucune CSS Joomla.
                              Or le CMS en génère tout un tas qui interagissent avec les tiennes.

                              Premières erreurs vues

                              Dans le tag head
                              Code:
                              <script type="text/javascript"> </script>
                              <link rel="stylesheet" href="/admin/templates/kheliatemplate/css/kheliacss.css" rel="stylesheet" type="text/css" />
                              <link rel="stylesheet" href="/admin/templates/kheliatemplatekheliatemplate/css/kheliacss.css" rel="stylesheet" type="text/css" />
                              
                              <title>Le monde de Khelia</title>
                              
                              <link href="/admin/../kheliatemplate/css/kheliacss.css" rel="stylesheet" type="text/css" />
                              <style type="text/css">
                              <!--
                              #apDiv4 {
                              	position:absolute;
                              	left:271px;
                              	top:181px;
                              	width:366px;
                              	height:300px;
                              	z-index:4;
                              	overflow: auto;
                              }
                              -->
                              </style>
                              Le fichier kheliacss.css revient 3 fois, dont 2 fois non lues par le navigateur (Firefox), ce qui montre que tu as mal codé ton tag head au départ.

                              2e remarque :
                              Code:
                              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                                <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                              Ca, NON.
                              Par defaut, Joomla 1.5 est en UTF-8, ce n'est pas la peine de rajouter un iso-8859

                              Ces erreurs dans le tag head suffisent pour que Firefox soit completement "perdu", entre autres raisons parce qu'il respecte les conventions du DOM (Document Object Model) par le W3C.
                              http://www.w3.org/DOM/
                              http://www.w3cdom.org/
                              ou une petite recherche sur Google

                              Enfin, il vaut peut être mieux que tu regardes d'abord les templates officiels fournis avec le package d'origine pour mieux comprendre le fonctionnement PARTICULIER d'un template pour Joomla.
                              Une journée entière pour se former à la gestion d'un site et parler de son futur site avec des experts Joomla!
                              Ghazal, Lomart, Manu93fr et pleins d'autres vous attendent le 19 mai pour la journée Grands Débutants au https://www.joomladay.fr de Paris

                              Commentaire

                              Annonce

                              Réduire
                              1 sur 2 < >

                              C'est [Réglé] et on n'en parle plus ?

                              A quoi ça sert ?
                              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                              Comment ajouter la mention [Réglé] à votre discussion ?
                              1 - Aller sur votre discussion et éditer votre premier message :


                              2 - Cliquer sur la liste déroulante Préfixe.

                              3 - Choisir le préfixe [Réglé].


                              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                              2 sur 2 < >

                              Assistance au forum - Outil de publication d'infos de votre site

                              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                              UTILISER À VOS PROPRES RISQUES :
                              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                              Problèmes connus :
                              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                              Installation :

                              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                              Archive zip : https://github.com/AFUJ/FPA/zipball/master

                              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                              et remplacer www. votresite .com par votre nom de domaine


                              Exemples:
                              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/
                              Pour executer le script: http://www..com/fpa-fr.php

                              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/cms/
                              Pour executer le script: http://www..com/cms/fpa-fr.php

                              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                              Voir plus
                              Voir moins
                              Travaille ...
                              X