Partage
  • Partager sur Facebook
  • Partager sur Twitter

le css de mon menu de navigation ne fonctionne pas

quel chemin dois je faire?

    24 avril 2019 à 12:28:35

    j'ai écrit la partie html de mon menu de navigation puis une partie en css qui a fonctionné mais je la j'essaie de mettre en forme au niveau des écritures et sa ne fonctionne pas. je vous met ce que j'ai écrit.

    -Partie html:

     <body>

              <div class="menu-vertical">

                   <div class="avatar">

                         <img src="img/cdvverte.jpg" width="300">

                    </div>

                    <div class="menu"><a href="menu.html">Votre ostéopathe</a></div>

                    <div class="menu"><a href="Ostheopathie.html">Qu'est ce que l'ostéopathie</a></div>

                    <div class="menu"><a href="#">Pour Qui</a></div>

                    <div class="menu"><a href="nourrisson.html">Le nourrisson</a></div>

                    <div class="menu"><a href="enfants.html">Les enfants</a></div>

                    <div class="menu"><a href="femmeenceinte.html">La femme enceinte</a></div>

                    <div class="menu"><a href="adultes.html">Les adultes</a></div>

                    <div class="menu"><a href="seniors.html">Les seniors</a></div>

                    <div class="menu"><a href="sportifs.html">Le sportifs</a></div>

                    <div class="menu"><a href="handicap.html">Le handicap</a></div>

                    <div class="menu"><a href="tarifsremboursements.html">Tarif et remboursement</a></div>

                    <div class="menu"><a href="contactacces.html">Contact et accès</a></div>

               </div>

     -Partie css:

    .menu-vertical.menu{

        background-color: silver;

        width: 270px; 

        padding: 15px; 

        margin-bottom: 10px;

    J'éspère que vous pourrez m'aider.

    merci d'avance

    • Partager sur Facebook
    • Partager sur Twitter
      24 avril 2019 à 13:13:03

      Bonjour,

      Déjà dans le css tu n'a pas fermé ta balise }

      ensuite met un espace entre tes deux class avec un petite virgule et ca devrais le faire

      .menu, .menu-vertical



      • Partager sur Facebook
      • Partager sur Twitter

      Compos sui.

        24 avril 2019 à 17:08:12

        super sa a marché!! par contre j'ai beaucoup de chose dans mon menu et je n'arrive pas a tout voir, ne devrais t'il pas y avoir une barre qui permet de descendre dans mon menu de navigation?
        • Partager sur Facebook
        • Partager sur Twitter
          24 avril 2019 à 17:18:03

          Re,

          J'aurais bien du mal a te dire sans ton css au complet, en plus, en général ton menu tu va le faire avec <nav> <ul> et <li> là tu as utilisé une mise en place avec des <div>.

          Après si tu veut coller une scrollBar voici comment ca fonctionne

          https://developer.mozilla.org/fr/docs/Web/CSS/scrollbar-width

          • Partager sur Facebook
          • Partager sur Twitter

          Compos sui.

            25 avril 2019 à 10:18:34

            j'ai essayé avec le site que tu m'as passé mais je n'ai pas vraiment le résultat final. J'ai la barre mais je ne peux pas descendre.

            Je te met ce que j'ai écrit

            partie html:

                        <div class="scroller">

                             <div class="menu"><a href="menu.html">Votre ostéopathe</a></div>

                            <div class="menu"><a href="Ostheopathie.html">Qu'est ce que l'ostéopathie</a></div>

                            <div class="menu" style="color:#456B35 "> Pour Qui </div>

                            <div class="menu"><a href="nourrisson.html">   &rarr;Le nourrisson</a></div>

                            <div class="menu"><a href="enfants.html">   &rarr;Les enfants</a></div>

                            <div class="menu"><a href="femmeenceinte.html">   &rarr;La femme enceinte</a></div>

                            <div class="menu"><a href="adultes.html">   &rarr;Les adultes</a></div>

                            <div class="menu"><a href="seniors.html">   &rarr;Les seniors</a></div>

                            <div class="menu"><a href="sportifs.html">   &rarr;Le sportifs</a></div>

                            <div class="menu"><a href="handicap.html">   &rarr;Le handicap</a></div>

                            <div class="menu"><a href="tarifsremboursements.html">Tarif et remboursement</a></div>

                            <div class="menu"><a href="contactacces.html">Contact et accès</a></div>

                        </div>

            partie css:

            .menu-vertical .scroller {

              width: 300px;

              height: 800px;

              overflow-y: scroll;

              scroll-behavior: auto }

            • Partager sur Facebook
            • Partager sur Twitter
              25 avril 2019 à 14:33:37

              re,

              Ca ne fonctionne pas parce que tu n'as pas de virgule entre les deux noms de tes class dans le css et si u regarde bien "scroll-behavior" n'est pas fermé par un point-virgule.

              • Partager sur Facebook
              • Partager sur Twitter

              Compos sui.

                26 avril 2019 à 9:02:43

                Du coup j'ai changé d'avis sur le scrollbar . Je voudrais mettre plusieurs rubriques dans une rubrique. Dans la rubrique pour qui j'aimerai mettre toutes les autres avec les fléches de façon a ce que le fléches n'apparaissent que quand on clic sur pour qui.

                comment pourrais je faire?

                • Partager sur Facebook
                • Partager sur Twitter
                  26 avril 2019 à 11:40:30

                  Ok,

                  Donc tu va oublier tout ce que tu as fait et apprendre les bases du menu. Et pour ca rien de mieux que la grenouille... aupassage ca fait un moment que je ne l'ai pas vue :p

                  http://www.frogweb.fr/

                  • Partager sur Facebook
                  • Partager sur Twitter

                  Compos sui.

                    26 avril 2019 à 12:47:11

                    Si je comprend bien avec le frog je supprime mes div et je remplace par des ul et li et encore ul et li pour faire un sous menu. C'est sa?
                    • Partager sur Facebook
                    • Partager sur Twitter
                      26 avril 2019 à 13:06:20

                      Houla ...

                      Yes but no ... but .. yes but no....

                      Le Frog c'est une grenouille une personne, c'est le site de la grenouille, et il l'a dédier à la base de la construction de menu, va pas imaginer que c'est une pratique de codage lol

                      en fait quand on fait un menu en général il est convenu de le faire dans le header avec la balise nav ul li.

                      Dans ton cas tu ne va pas avoir de header vu que tu veut créer un menu latéral gauche

                      Mais ton ensemble devrait être <nav> qui va signifier aux moteurs de recherches que c'est un menu de navigation, <ul> qui va contenir l'ensemble de tes listes <li> <a> qui vont contenir chacune un liens et son url </a></li> etc... <li><a>...</a></li> et enfin fermeture de la liste </ul> et de la nav </nav>.

                      Quand on veut faire un sous-menu on intègre un nouvel ensemble dans une de nos balise li

                      <li><a href="#">Lien menu 2</a>
                      		<ul>
                      			<li><a href="#">Lien sous menu 2</a></li>
                      			<li><a href="#">Lien sous menu 2</a></li>
                      			<li><a href="#">Lien sous menu 2</a></li>
                      			<li><a href="#">Lien sous menu 2</a></li>
                      		</ul>
                      </li>


                      Après tout va se jouer dans le css pour son style.

                      Une fois qu'elle serras fait pour desktop, l’étape suivante serras de rajouter un peut de JS pour les versions mobile, mais çà on verra plus tard.

                      -
                      Edité par exen 26 avril 2019 à 13:07:50

                      • Partager sur Facebook
                      • Partager sur Twitter

                      Compos sui.

                        26 avril 2019 à 13:14:25

                        Lol oui j'avais bien compris que ce n'était pas du code.  Je voulais parler du site que tu m'as conseillé.  Dans le Css sa sera à peut près ce que j'ai mis en changeant les cheminement? Je suis vraiment débutante et je dois aller très vite pour boucler le site web pour avoir un appui pour entrer en formation donc si je dois tout recommencer sa va être juste un niveau timing
                        • Partager sur Facebook
                        • Partager sur Twitter
                          26 avril 2019 à 13:27:35

                          Tu veut entrer en formation de quoi ? et ou ? si ce n'est pas indiscret.

                          Oui ca va aller vite ton bût est de faire un site complet pour faire une demo si je comprend bien.

                          le menu peut être fait dans la journée le plus compliqué ca va être de le modifier pour le mobile ... et encore.

                          • Partager sur Facebook
                          • Partager sur Twitter

                          Compos sui.

                            26 avril 2019 à 14:00:36

                            je veux rentrer au CESI de pau soit en analyste programmeur(niveau bac) soit en responsable ingénierie des logiciel(niveau bac+2). Tout dépendra de la décision du chargé de recrutement car j'ai un niveau bts mais pas en informatique. Oui j'aimerai essayer d'en faire un max avant l'entretiens.

                            Tu pourra me conseiller pour l'adapté au mobile?

                            je viens de faire la partie html, est elle bien la?

                              <body>

                                        <ul id="menu-vertical">

                                                <img src="img/cdvverte1.jpg" width="289">

                                            <li><a href="menu.html">Votre ostéopathe</a></li>

                                            <li><a href="Ostheopathie.html">Qu'est ce que l'ostéopathie</a></li>

                                            <li style="color: white">Pour Qui</li>

                                                <ul>

                                                    <li> <a href="nourrisson.html">   &rarr;Le nourrisson</a></li>

                                                    <li><a href="enfants.html">   &rarr;Les enfants</a></li>

                                                    <li><a href="femmeenceinte.html">   &rarr;La femme enceinte</a></li>

                                                    <li><a href="adultes.html">   &rarr;Les adultes</a></li>

                                                    <li><a href="seniors.html">   &rarr;Les seniors</a></li>

                                                    <li><a href="sportifs.html">   &rarr;Le sportifs</a></li>

                                                    <li><a href="handicap.html">   &rarr;Le handicap</a></li>

                                                </ul>

                                            <li><a href="tarifsremboursements.html">Tarif et remboursement</a></li>

                                            <li><a href="contactacces.html">Contact et accès</a></li>

                                    </ul>

                            • Partager sur Facebook
                            • Partager sur Twitter
                              26 avril 2019 à 14:15:18

                              oui ca semble bien encadre le dans une <nav> </nav> et place ton image hors du flue <ul>

                              <nav>
                              
                                    <img src="img/cdvverte1.jpg" width="289">
                                    
                                      <ul id="menu-vertical">
                              
                                              <li><a href="menu.html">Votre ostéopathe</a></li>
                              
                                              <li><a href="Ostheopathie.html">Qu'est ce que l'ostéopathie</a></li>
                              
                                              <li style="color: white">Pour Qui</li>
                              
                                                  <ul>
                              
                                                      <li> <a href="nourrisson.html">   &rarr;Le nourrisson</a></li>
                              
                                                      <li><a href="enfants.html">   &rarr;Les enfants</a></li>
                              
                                                      <li><a href="femmeenceinte.html">   &rarr;La femme enceinte</a></li>
                              
                                                      <li><a href="adultes.html">   &rarr;Les adultes</a></li>
                              
                                                      <li><a href="seniors.html">   &rarr;Les seniors</a></li>
                              
                                                      <li><a href="sportifs.html">   &rarr;Le sportifs</a></li>
                              
                                                      <li><a href="handicap.html">   &rarr;Le handicap</a></li>
                              
                                                  </ul>
                              
                                              <li><a href="tarifsremboursements.html">Tarif et remboursement</a></li>
                              
                                              <li><a href="contactacces.html">Contact et accès</a></li>
                              
                                      </ul>
                              </nav>



                              • Partager sur Facebook
                              • Partager sur Twitter

                              Compos sui.

                                26 avril 2019 à 14:43:55

                                j'ai fait comme tu as dit et c'est une catastrophe je n'ai rien de bien!! avant au moins j'avais a peut prés ce que je voulais. je ne comprend pas encore toutes les fonctions css du coup je ne sais pas comment retrouver ma présentation d'avant avec le nouveau html...
                                • Partager sur Facebook
                                • Partager sur Twitter
                                  26 avril 2019 à 14:57:06

                                  donne moi ton code entier html / CSS si tu veut passe le moi en mp

                                  • Partager sur Facebook
                                  • Partager sur Twitter

                                  Compos sui.

                                  le css de mon menu de navigation ne fonctionne pas

                                  × 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