Ecriture de templates compatible ie et firefox

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

  • [Problème] Ecriture de templates compatible ie et firefox

    Salut,
    je voudrais savoir s'il existe des méthodes pour écrire des templates joomla compatibles avec ie et firefox. En fait, tous les templates de j'ai écrit jusque là ne sont compatibles que firefox ou ie, mais pas les deux à la fois.
    Toute suggestion sera prise au sérieux et grandement appréciée.

  • #2
    Bonjour,

    Selon moi, la réflexion compatibilité inter navigateur commence à la réception de la maquette en *.psd, avant de commencer la découpe.

    A ce moment là, il faut déjà réfléchir à la façon dont nous allons l'intégrer en xhtml/css en tenant compte des contraintes induites par les différents navigateurs.

    C'est à mon sens au moins 1/3 du succès qui se joue là.

    Dès lors, et une fois la découpe déterminée, la meilleure (voire la seule) méthode qui existe est de rechercher en permanence à avoir un code propre, sans clownerie, lors de la construction du template et de tester au fur et à mesure de l'avancée du travail sur les différents navigateurs. En effet, il vaut mieux se rendre compte très tôt d'une incompatibilité si l'on ne veut pas perdre de temps plus tard.

    Ce que j'appelle des clowneries, ce sont des éléments "positionnés" à outrance, des "margin" négatifs, des "float" inconsidérés, voire même des propriétés connues comme non compatibles inter navigateurs (genre "inline-block"). Ceci démontre en général une mauvaise anticipation de la découpe ou une mauvaise maitrise du css.
    Et je ne parle bien entendu pas ici de CSS3 qui est carrément du suicide si on ne sait pas ce qu'on fait précisément.

    Par ailleurs, il faut fuir comme la peste les "padding" sur des éléments dimensionnés, c'est à dire qui ont des dimensions spécifiées, car IE et FF ne les interprètent pas de la même façon.

    Dans les cas difficiles, on peut envisager un feuille de style spécifique à IE, mais en respectant les conseils ci-dessus, c'est inutile dans l'immense majorité des cas.

    Le cas de IE6 est un peu à part, puisque qu'en plus du non respect des standards habituels, il ne restitue pas la transparence des *.png, mais ça, c'est un autre débat dans lequel je n'entrerai pas.

    Pour finir, quitte à alourdir le code, il ne faut pas hésiter pour être tranquille à imbriquer des <div> les unes dans les autres, lorsque l'on commence à faire "floater" des éléments et pour contourner l'utilisation de padding.

    Exemple:

    Code HTML:
    <div id="header">
           <div id="logo"><!-- Le logo --></div>
           <div id="outils">
                  <div id="langues"><!-- Les drapeaux --></div>
                  <div id="recherche"><!-- Le champ recherche --></div>
           </div>
    </div>
    Code:
    #logo {
    float:left;
    }
    
    #outils {
    float:left;
    }
    Le code ci-dessus est certes un peu chargé, et beaucoup de <div> peuvent sembler inutiles au regard du CSS associé et du résultat final, mais garantissent une certaine tranquillité d'esprit.
    Dernière édition par cb75ter à 06/10/2010, 21h58

    Commentaire


    • #3
      effectivement comme le suggère cb75ter tu dois privilégier les DIV imbriquées, l'une pour lui appliquer des dimensions et l'autre pour lui appliquer les marges par exemple.
      Si tu appliques un 'width' et un 'paddin' au meme élément tu peux etre sur que tu n'auras pas le meme résultat au final !
      Si tu es intéressé tu peux jeter un oeil au sommaire de mon ebook qui traite de ce sujet avec un tutoriel complet
      http://www.joomlack.fr.nf/tutos-desi...joomla-15.html
      Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
      http://www.template-creator.com Outil de création de templates
      Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

      Commentaire


      • #4
        Merci pour ces éclaircissements. Je vais m'atteler à écrire un autre template de test avec ces nouvelles informations. Mais avant je lance un rapide coup d'oeuil à l'e-book de ced1870. Encore une fois, merci pour votre aide et vivement que les normes soient respectées par tous les browsers.

        Commentaire


        • #5
          vivement que les normes soient respectées par tous les browsers.
          heu là tu pourras attendre longtemps, surtout que les normes évoluent en meme temps que les navigateurs, et il y aura toujours un décalage je pense
          Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
          http://www.template-creator.com Outil de création de templates
          Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

          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