Partage
  • Partager sur Facebook
  • Partager sur Twitter

problème de scroll barre

scroll barre + menu qui font n'importe quoi

Sujet résolu
    4 juillet 2024 à 20:50:34

    bonjour,

    j'aimerais avoir une scroll barre pour que tous mes éléments de classe déroulant, que l'on voit dès le départ, soit sur une seul ligne et que si il y en à trop il disparaissent du côté droit,

    aussi la barre sur le côté je n'en veux pas car je ne veux pas que mon texte soit coupé,

    enfin si la barre pouvait se mettre au dessus pour éviter de la voir bouger tout le temps, cela serait mieux,

    tout cela permettrait que mes menus ne bougent pas dans tous les sens et n'importe comment quand j'en ouvre un.

    http://epaudfrimz.cluster029.hosting.ovh.net/

    Merci.

    • Partager sur Facebook
    • Partager sur Twitter
      5 juillet 2024 à 9:35:31

      Bonjour l'ami.

      AS-tu essayé la déclaration CSS overflow:scroll ?

      • Partager sur Facebook
      • Partager sur Twitter
        5 juillet 2024 à 13:28:08

        non je n'avais pas essayer mais en effet cela permet de voir la scroll bar en permanence,

        j'ai aussi mis le "height" en auto pour que ça ne coupe plus le texte.

        mais maintenant j'aimerais que la barre se positionne au dessus car là elle coupe quand même un bout de la box (je pense que c'est plutôt le "box-shadow" qui est couper d'ailleurs).

        aussi est-il possible qu'avec le scroll de la souris cela fasse un scroll horizontal de toutes les box.

        actuellement soit je met le scroll en flex donc: ça va finire par s'impiler les uns sur les autres, soit je met en block et cela me crer plusieurs ligne (ce que je ne veux pas).

        Merci.

        • Partager sur Facebook
        • Partager sur Twitter
          5 juillet 2024 à 18:45:13

          « est-il possible qu'avec le scroll de la souris cela fasse un scroll horizontal de toutes les box. »

          If faut un scroll pour un élément qui englobe ces box (bien qu'en JS on puisse obtenir cela)

          J'avoue ne pas saisir les tenants et aboutissants de ta page, tes demandes étant curieuses.

          Faudrait nous fournir du code !

          • Partager sur Facebook
          • Partager sur Twitter
            5 juillet 2024 à 23:36:16 - Message modéré pour le motif suivant : Merci d’utiliser le bouton code pour insérer un code sur le forum


              6 juillet 2024 à 2:10:33

              Bonjour, Merci de lire les règles du forum AVANT de créer un sujet.

              Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
              Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.

              Pour plus d'informations, nous vous invitons à lire les règles générales du forum

              Merci de colorer votre code à l'aide du bouton Code </>

              Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton  </> de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: php;">Votre code ici</pre>.

              Merci de modifier votre message d'origine en fonction.

              Liens conseillés


              Domi65 a écrit:

              Faudrait nous fournir du code !

              Voir =>  http://epaudfrimz.cluster029.hosting.ovh.net/

              @ValentinEpaud

              Avant d'écrire une seule ligne de CSS vous devez d'abord écrire du HTML valide, c'est à dire sans erreur de syntaxe. Passez votre site au validateur pour voir et corriger vos erreurs.

              => https://validator.w3.org/

              Le parent d'un <li> ne peut être un <div>, c'est obligatoirement soit <ul> soit <ol>.

              • Partager sur Facebook
              • Partager sur Twitter
                6 juillet 2024 à 9:31:32

                @AbcAbc6

                Un lien affiché en tant que lien est de suite beaucoup plus visible ! merci.

                @Valentin

                Après avoir vu le site, j'ai bien du mal à comprendre ce qu'apportent les barres de scroll.

                P.S. Vérifier aussi l'orthographe, la grammaire et la rédaction française. Ce langage est aussi utile que le HTML pour l'élaboration d'une page web, surtout lorsqu'on se targue de faire "avoir" le baccalauréat. ;-)

                • Partager sur Facebook
                • Partager sur Twitter
                  6 juillet 2024 à 13:43:55

                  en effet en enlevant les <div> et en mettant <ul> à la place cela fonctionne bien mieux merci,

                  et merci aussi pour le site de correction même si pour l'instant il me trouve des erreurs inexistantes,

                  pour les erreurs de français je les corrigerais plus tard car pour l'instant je me concentre surtout sur la forme, et désoler pour la non-conformité de mes message.


                  Pour la barre de scroll je veux qu'elle fassent ce qu'elle fait actuellement pour tous les "eeeeeeee" mais pour les menus qui sont en dessous. 

                  mon site (après modif) : http://epaudfrimz.cluster029.hosting.ovh.net

                  • Partager sur Facebook
                  • Partager sur Twitter
                    6 juillet 2024 à 17:18:54

                    « Pour la barre de scroll je veux qu'elle fassent ce qu'elle fait actuellement pour tous les "eeeeeeee" mais pour les menus qui sont en dessous. »

                    Désolé, mais perso, je ne pige pas trop cette phrase vu que lorsque le menu sous les eeeee est ouvert, la barre est toujours là. Donc, à priori, tu obtiens ce que tu veux. Peut-être que quelqu'un d'autre comprendra mieux, attendons.

                    Je crois maintenant saisir pourquoi tu mets une barre de scroll. Tu cherches à ce que l'ensemble du menu (nav) soit accessible à ceux qui n'ont pas un écran assez large, c'est bien ça ?

                    Une solutions bien meilleure à mon avis est de faire quelque chose qui s'adapte à la largeur de l'écran (responsive). Ces trois déclarations CSS ajoutées à la balise ul du menu rendra la chose possible :

                    display: flex;
                    flex-wrap: wrap;
                    justify-content: /* a toi de choisir entre center, space-evenly, space-betwee ou autre */

                     Justify-content



                    -
                    Edité par Domi65 6 juillet 2024 à 17:19:40

                    • Partager sur Facebook
                    • Partager sur Twitter
                      6 juillet 2024 à 19:07:27

                      cela à effectivement modifier certain positionnement mais pas vraiment comment je voulait.

                      << Je crois maintenant saisir pourquoi tu mets une barre de scroll. Tu cherches à ce que l'ensemble du menu (nav) soit accessible à ceux qui n'ont pas un écran assez large, c'est bien ça ? >>

                      non pas vraiment, dans un sens oui mais de toute façon à moins que la personne est un écran de 1mètre de long, personne n'auras d'écran assez long car : je veux qu'il n'y ai qu'UNE seul ligne pour TOUT les (premiers) menus (donc pas ceux qui se déroule à l'intérieur d'un premier menu).

                      Et la barre fonctionne actuellement très bien (sauf si il y a un moyen de la faire passer au dessus des menus et que si on peut faire un sorte que : quand notre pointeur de souris est au dessus (du bloc invisible des menus) et que l'on scroll molette, alors je voudrais que cela fasse bouger la barre (horizontalement))

                      lien vers mon site : mon site

                      Merci.

                      • Partager sur Facebook
                      • Partager sur Twitter
                        7 juillet 2024 à 17:17:44

                        Bonjour, Je ne suis pas sur d'avoir compris le besoin si ce n'est 1) tu souhaites que tout les menus de  premier niveau soit sur une seul ligne et que 2) l'on puisse utiliser la molette de la souris pour scroller latéralement. 

                        Pour ce qui est du positionnement sur une seule ligne pour les menus de premier niveau, j'utiliserais un display: flex; avec un flex-wrap: nowrap; 

                        Pour ce qui est de l'usage de la molette de la souris puisse avoir une influence sur la scrolle bar latéral c'est en JavaScript. Fait une recherche pour voir si tu trouve un script sur le net.

                        Pour ce qui est de l'apparition de la barre de scrolle, je pense que tu n'as pas bien compris le fonctionnement. Celle-ci apparait si le contenu dépasse la boite dans laquelle il est et en fonction de la valeur de la propriété overflow. J'explique par un exemple. 

                        Le html :

                        <body>
                          <div class="conteneur">
                            <div class="nombre">1</div>
                            <div class="nombre">2</div>
                            <div class="nombre">3</div>
                            <div class="nombre">4</div>
                            <div class="nombre">5</div>
                            <div class="nombre">6</div>
                            <div class="nombre">7</div>
                            <div class="nombre">8</div>
                            <div class="nombre">9</div>
                            <div class="nombre">10</div>
                          </div>
                        </body>

                        Le CSS :

                            .conteneur {
                              display: flex;
                              gap: 10px;
                              width: 200px;
                              overflow: auto; 
                            }
                            .nombre {
                              border: 2px solid blue;
                              padding: 10px;
                              margin-bottom: 20px;
                            }

                        Ici la boite conteneur à une largeur fixe de 200px, n'est visible que les 5 premiers nombres grâce à l'overflow. Pour voir le reste des nombres on doit scroller. 

                        J'espère que mon explication à pu t'éclairer sur le fonctionnement de la scrolle bar.

                        -
                        Edité par AbcAbc6 7 juillet 2024 à 17:18:10

                        • Partager sur Facebook
                        • Partager sur Twitter
                          7 juillet 2024 à 21:49:49

                          OH MERCI !!!

                          cela fonctionne enfin, tu as en effet très bien compris ce que je voulais, et ok je vais chercher pour le JS.

                          par contre connaîtrait tu un moyen de mettre cette bar au-dessus des bloc ?

                          @AbcAbc6 MERCI  

                          • Partager sur Facebook
                          • Partager sur Twitter

                          problème de scroll barre

                          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                          • Editeur
                          • Markdown