Ajustement bandeau responsive

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

  • Ajustement bandeau responsive

    Bonjour à tous,

    Je suis en train de revoir la partie responsive de mon site internet et les choses ne se passent pas comme voulu...J'utilise le template beez3 et les modifications se font dans personal.css. La partie responsive est déjà implémentée par défaut dans personal.css et j'ai dû ajouter quelques lignes de code. Mon problème concerne l'ajustement de mon bandeau pour différentes tailles d'écrans (portable et PC). J'ai ajouté les blocs suivants à la fin de personal.css :

    Code:
    #header .logoheader {
        background-color: #A7396D;
        background-repeat: no-repeat;
        background-size: contain; 
        background-position: top center;
      }
    Puis différents media query de la forme :

    Code:
    /* pour smartphones - mode portrait (maximum 640px) */
    @media only screen and (max-width: 640px) {
    
    /* Image de fond du bandeau */
    #header .logoheader {
        background-image: url(../images/personal/monbandeau.png);
        min-height: 98px;
      }
        
    }
    Je réalise la même opération pour de nouvelles tailles d'écran en utilisant les deux autres média query suivants :

    - @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
    - @media (orientation: landscape) and (max-device-width: 640px) {}

    *Pouvez-vous me dire si cette méthode est correcte/élégante ? L'écriture des blocs pour ajuster l'image du bandeau est t-elle pertinente ?

    *Sur un écran de PC, la visualisation est correct mais dès que je rétrécie la fenêtre (toujours sur PC), le bandeau ne s'ajuste plus à la largeur de l'écran ou disparaît...

    * Comment choisir la valeur correcte de "min-height" pour le bandeau en fonction de la taille maximal de l'écran définit dans le media query ? Je peux en effet ajuster cette valeur pour que ça marche en regardant ce que ça donne sur mon portable par exemple mais sur tous les autres je ne peux rien ajuster à l'aveugle...

    Par avance merci pour vos réponses.

  • #2
    Re : Ajustement bandeau responsive

    Joomla 2.5 n'est plus d'actualité (plus supporté depuis le début de l'année) et Beez3 n'a pas été concu pour être responsive, Joomla 2.5 non plus.
    Ceci posé je pense que tu aurais tout intérêt à envisager une migration vers Joomla 3.4.1 qui est conçu pour utiliser des templates responsives, et à choisir un template qui te convienne et soit responsive. Sinon tu t'embarques dans des galères sans fin, et une solution de type sinapisme sur une prothèse ligneuse.
    Connaissez-vous la loi de Murphy ? Appliquée à Joomla elle pourrait s'énoncer ainsi :
    C'est toujours lorsqu'on n'a pas pris le temps de faire une sauvegarde que les problèmes surgissent et s'enchainent.
    Moralité : faites des sauvegardes, elles vous paraitront peut-être superflues mais elles ne sont jamais inutiles.

    Commentaire


    • #3
      Re : Ajustement bandeau responsive

      Bonjour lesoutier

      Oups ! Mon post est au mauvais endroit ! Mon site est bien développé avec la dernière version de joomla !

      Commentaire


      • #4
        Re : Ajustement bandeau responsive

        Discussion déplacée.
        mais il n'empêche que le template Beez3 n'est pas responsive et que tu vas au devant de quelques obstacles en persistant dans cette voie. Il vaudrait mieux choisir un autre template, responsive par construction.
        Connaissez-vous la loi de Murphy ? Appliquée à Joomla elle pourrait s'énoncer ainsi :
        C'est toujours lorsqu'on n'a pas pris le temps de faire une sauvegarde que les problèmes surgissent et s'enchainent.
        Moralité : faites des sauvegardes, elles vous paraitront peut-être superflues mais elles ne sont jamais inutiles.

        Commentaire


        • #5
          Re : Ajustement bandeau responsive

          Bonjour lesoutier,

          J'utilise beez3 par simplicité mais effectivement je constate certaines limites quand il s'agit de visualiser le site sur portable ou tablette. As-tu un template responsive à me conseiller qui soit du même style que beez3 ?

          Commentaire


          • #6
            Re : Ajustement bandeau responsive

            Je dirais que 95% (et même sans doute plus) des templates pour Joomla 3 sont responsive, tu n'as donc que l'embarras du choix, même parmi les gratuits.
            Connaissez-vous la loi de Murphy ? Appliquée à Joomla elle pourrait s'énoncer ainsi :
            C'est toujours lorsqu'on n'a pas pris le temps de faire une sauvegarde que les problèmes surgissent et s'enchainent.
            Moralité : faites des sauvegardes, elles vous paraitront peut-être superflues mais elles ne sont jamais inutiles.

            Commentaire


            • #7
              Re : Ajustement bandeau responsive

              Effectivement il y en a pas mal...malheureusement mon boss ne souhaite pas changer de template...L'entreprise pour laquelle je travaille n'a pas l'intention de changer le design du site. Donc ma question posée dans mon premier post est encore d'actualité. Il s'agit juste de faire en sorte que le bandeau s'ajuste à la taille de l'écran utilisé. Le reste (disposition des menus...) est déjà géré (pas trop mal) par la partie responsive de beez3, même si cela n'est pas parfait, cela convient pour le moment.

              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