Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème navbar dezoomzoom qui change de taille

    12 avril 2024 à 18:43:21

    Bonsoir,

    J'aurais besoin d'aide, j'ai un soucis actuellement que je rencontre sur mon site lorsque je dezoom/zoom sur mon site, quand j'effectue ça, la taille et la positions des élements de la navbar change. Je voudrais que cela reste fixe comme sur le premier screen et que les élements ne change pas de position et n'augmente et ne diminue pas.

    Comme ici par exemple, quand on dezoom/zoom, la taille et la position ne change pas sur ce site (https://getbootstrap.com/): 

    Alors que sur mon site, quand je zoom/dezoom cela fait ça : 

    Alors que je veut que cela reste comme ça même quand on dezoom/zoom :

    On pourrait m'aidé, je pense qu'une fonction en css permettrait de reglé le soucis. Je peut fournir le code de la navbar si vous le souhaitez également.

    • Partager sur Facebook
    • Partager sur Twitter
      12 avril 2024 à 19:24:26

      Bonjour,

      en effet, sans ton code, ou bien une page en ligne, on ne peut rien faire d'autre que des suppositions. Une page en ligne, ça serait vraiment bien si tu as ça, parce que ça permettrait d'expérimenter facilement.

      • Partager sur Facebook
      • Partager sur Twitter

      Pas d'aide concernant le code par MP, le forum est là pour ça :)

        12 avril 2024 à 19:37:01

        Lamecarlate a écrit:

        Bonjour,

        en effet, sans ton code, ou bien une page en ligne, on ne peut rien faire d'autre que des suppositions. Une page en ligne, ça serait vraiment bien si tu as ça, parce que ça permettrait d'expérimenter facilement.


        Salut, voici directement le lien de la page :) : https://xthomas.ovh/cperf/

        -
        Edité par RiverDesign 12 avril 2024 à 19:37:23

        • Partager sur Facebook
        • Partager sur Twitter
          12 avril 2024 à 21:46:56

          En fait, je crois que le problème principal c'est ton image de logo. Outre le fait que le fichier est gigantesque (l'image fait 1210x435 alors que tu l'affiches en bien plus petit, tu forces sa hauteur à 25vh, et donc quand tu zoomes ou dézoomes, la hauteur ne change pas. C'est ce qui conditionne la hauteur de la navigation, et ce qui crée ce rendu étrange. Je te conseille 1) de modifier le fichier pour lui donner une taille cohérente par rapport à l'affichage, 2) de fixer une largeur plutôt qu'une hauteur, et sur le conteneur de l'image et non l'image elle-même.

          Cependant, je te cite : Je voudrais que cela reste fixe comme sur le premier screen et que les élements ne change pas de position et n'augmente et ne diminue pas.

          Ce n'est pas le comportement que je vois sur le site de Bootstrap : la navigation diminue bien en hauteur quand on dézoome. Du coup je ne suis pas sûre de comprendre ton besoin.

          • Partager sur Facebook
          • Partager sur Twitter

          Pas d'aide concernant le code par MP, le forum est là pour ça :)

            13 avril 2024 à 12:15:54

            Lamecarlate a écrit:

            En fait, je crois que le problème principal c'est ton image de logo. Outre le fait que le fichier est gigantesque (l'image fait 1210x435 alors que tu l'affiches en bien plus petit, tu forces sa hauteur à 25vh, et donc quand tu zoomes ou dézoomes, la hauteur ne change pas. C'est ce qui conditionne la hauteur de la navigation, et ce qui crée ce rendu étrange. Je te conseille 1) de modifier le fichier pour lui donner une taille cohérente par rapport à l'affichage, 2) de fixer une largeur plutôt qu'une hauteur, et sur le conteneur de l'image et non l'image elle-même.

            Cependant, je te cite : Je voudrais que cela reste fixe comme sur le premier screen et que les élements ne change pas de position et n'augmente et ne diminue pas.

            Ce n'est pas le comportement que je vois sur le site de Bootstrap : la navigation diminue bien en hauteur quand on dézoome. Du coup je ne suis pas sûre de comprendre ton besoin.


            J'ai essayé avec le logo et cela ne change rien à mon problème, sur mon site on peut voir que dès que je dezoom/zoom la taille des élements diminue ou augmente et l'espacement entre les élements également cependant sur le site bootstrap les élements diminue certe mais l'espacement entre les élements non et j'ai envie que cela fasse comme ça sur mon site, l'espacement entre les élements ne diminue et augmente pas au zoom/dezoom.

            Je t'ai fait une vidéo pour te montrer un peu mieux ce que je veut : https://www.youtube.com/watch?v=UPLGErrmBmo

            Avant zoom sur le site bootstrap : 

            Après zoom : 

            Avant zoom sur mon site : 

            Après zoom : 

            Tu voit le soucis ? Les éléments change de taille et l'espacement également sur mon site.

            -
            Edité par RiverDesign 13 avril 2024 à 12:20:11

            • Partager sur Facebook
            • Partager sur Twitter
              13 avril 2024 à 17:05:14

              C'est peut-être lié au fait que tu utilises aussi les vw et vh pour ton menu. Essaie sans préciser de largeur, juste un espacement entre les éléments au besoin. Et aussi pour le bouton tout à droite : mets un padding fixe, sans vw ou vh. Ce sont des unités très pratiques mais ici je pense qu'elles sont de trop.
              • Partager sur Facebook
              • Partager sur Twitter

              Pas d'aide concernant le code par MP, le forum est là pour ça :)

              Problème navbar dezoomzoom qui change de taille

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              • Editeur
              • Markdown