Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu déroulant vertical HTML CSS gauche

    8 avril 2019 à 17:07:31

    Bonjour,

    J'ai déjà créer un menu déroulant : https://openclassrooms.com/forum/sujet/menu-deroulant-html-css-4

    Je voudrais faire de même, mais à gauche : https://www.pierre-giraud.com/html-css/cours-complet/cours-html-css-presentation.php

    -
    Edité par Alex0123 9 avril 2019 à 14:47:53

    • Partager sur Facebook
    • Partager sur Twitter
      8 avril 2019 à 17:29:18

      Bonjour, si tu parle de la partie orange, il te suffit de voir/revoir cette partie du cours :

      https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1604534-organisez-votre-texte#/id/r-1604533

      Si tu as la réponse à ta question, pense à mettre en résolu ton post, merci !

      • Partager sur Facebook
      • Partager sur Twitter
        8 avril 2019 à 18:17:47

        J'ai réussi à le faire, mais comment le mettre à côté du texte, comme sur son site ?

        Ça se met en dessous du texte quand je le fais.

        • Partager sur Facebook
        • Partager sur Twitter
          8 avril 2019 à 18:21:06

          Tu as 3 possibilité :

          • Le flexbox
          • Grid
          • Les float

          mais sans avoir de code impossible de t'aider plus, mais moi je partirais plus sur le flexbox...

          • Partager sur Facebook
          • Partager sur Twitter
            8 avril 2019 à 18:33:29

            Je voudrais faire le meme menu que sur son site (texte à droite du menu)
            • Partager sur Facebook
            • Partager sur Twitter
              8 avril 2019 à 18:38:10

              Je ne comprend rien à ce que tu demande... tu veux faire quoi exactement, soit claire et précis !
              • Partager sur Facebook
              • Partager sur Twitter
                8 avril 2019 à 18:41:40

                bonjour,

                En fait tu veus une nav inversé avec logo à gauche et menu de droite à gauche.

                Et pour ca une seule adresse :

                http://www.frogweb.fr/

                Sinon comme dit noopy360 tu colle ton code ici et on peut te dire comment le baculer de gauche a droite, tout dépend de comment tu as écrit ton menu, sinon le site de frog va t'aider

                -
                Edité par exen 8 avril 2019 à 18:45:57

                • Partager sur Facebook
                • Partager sur Twitter

                Compos sui.

                  8 avril 2019 à 18:44:11

                  Je voudrais faire le meme menu (Sommaire orange)que sur son site  :https://www.pierre-giraud.com/html-css/cours-complet/cours-html-css-presentation.php

                  Le problème, c'est que quand je mets le code HTML, le menu apparaît en dessous du texte.

                  Je voudrais faire le même menu que sur son site avec le texte à droite du menu

                  • Partager sur Facebook
                  • Partager sur Twitter
                    8 avril 2019 à 18:50:03

                    Et pour cela il nous faut ton code entier, du moins toute la partie qui concerne ton menu, html/css inclus, On est pas devins,.. On aimeraient, Mais sans le code je peut te répondre n'importe quoi.

                    • Partager sur Facebook
                    • Partager sur Twitter

                    Compos sui.

                      8 avril 2019 à 19:22:18

                      @exen : J'ai fait le menu déroulant vertical sur http://www.frogweb.fr/

                      J'ai toujours le meme problème, voici mes codes :

                      HTML :

                      <ul id="menu-accordeon">
                         <li><a href="#">Lien menu 1</a>
                            <ul>
                               <li><a href="#">lien sous menu 1</a></li>
                               <li><a href="#">lien sous menu 1</a></li>
                               <li><a href="#">lien sous menu 1</a></li>
                               <li><a href="#">lien sous menu 1</a></li>
                            </ul>
                         </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>
                         <li><a href="#">Lien menu 3</a>
                            <ul>
                               <li><a href="#">Lien sous menu 3</a></li>
                               <li><a href="#">Lien sous menu 3</a></li>
                               <li><a href="#">Lien sous menu 3</a></li>
                               <li><a href="#">Lien sous menu 3</a></li>
                            </ul>
                         </li>
                      </ul>

                      CSS :

                      #menu-accordeon {
                        padding:0;
                        margin:0;
                        list-style:none;
                        text-align: center;
                        width: 180px;
                      }
                      #menu-accordeon ul {
                        padding:0;
                        margin:0;
                        list-style:none;
                        text-align: center;
                      }
                      #menu-accordeon li {
                         background-color:#729EBF; 
                         background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
                         background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
                         border-radius: 6px;
                         margin-bottom:2px;
                         box-shadow: 3px 3px 3px #999;
                         border:solid 1px #333A40
                      }
                      #menu-accordeon li li {
                         max-height:0;
                         overflow: hidden;
                         transition: all .5s;
                         border-radius:0;
                         background: #444;
                         box-shadow: none;
                         border:none;
                         margin:0
                      }
                      #menu-accordeon a {
                        display:block;
                        text-decoration: none;
                        color: #fff;
                        padding: 8px 0;
                        font-family: verdana;
                        font-size:1.2em
                      }
                      #menu-accordeon ul li a, #menu-accordeon li:hover li a {
                        font-size:1em
                      }
                      #menu-accordeon li:hover {
                         background: #729EBF
                      }
                      #menu-accordeon li li:hover {
                         background: #999;
                      }
                      #menu-accordeon ul li:last-child {
                         border-radius: 0 0 6px 6px;
                         border:none;
                      }
                      #menu-accordeon li:hover li {
                        max-height: 15em;
                      }

                      -
                      Edité par Alex0123 8 avril 2019 à 19:22:36

                      • Partager sur Facebook
                      • Partager sur Twitter
                        8 avril 2019 à 19:41:22

                        tu encadre ton ton menu avec <nav> </nav> dans ton html et dans le css tu colle un truc comme ceci

                        nav{
                          display: flex;
                          margin: 0;
                          display: -webkit-box;
                          display: -moz-box;
                          display: -ms-flexbox;
                          display: -webkit-flex;
                          display: flex;
                         
                          -webkit-flex-flow: row wrap;
                          justify-content: flex-end;
                        }

                        • Partager sur Facebook
                        • Partager sur Twitter

                        Compos sui.

                          8 avril 2019 à 19:41:25

                          Vue ta question tu n'as pas réaliser ce menu tout seul, si tu veut pouvoir comprendre ce que exen et moi te disons il faut déjà avoir des bases ce que visiblement tu n'as pas...

                          je t'invite à suivre le cours sur le HTML & CSS disponible à cette adresse :

                          https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/

                          Comme le dictons dit :

                          SI TU DONNES UN POISSON À UN HOMME, IL MANGERA UN JOUR. SI TU LUI APPRENDS À PÊCHER, IL MANGERA TOUJOURS.

                          Je t'invite donc à apprendre en premier !!! puis revient !

                          • Partager sur Facebook
                          • Partager sur Twitter
                            8 avril 2019 à 19:53:25

                            Le menu horizontal et verticale se met tout à droite

                            Je voudrais que le menu vertical se mette au-dessus à gauche du texte et que le menu horizontal reste normal

                            -
                            Edité par Alex0123 8 avril 2019 à 20:04:40

                            • Partager sur Facebook
                            • Partager sur Twitter
                              8 avril 2019 à 20:19:59

                              Oui à ce stade tu prend un jonc et comme le soulignais très justement noopy360 tu va apprendre à pêcher
                              • Partager sur Facebook
                              • Partager sur Twitter

                              Compos sui.

                                8 avril 2019 à 20:27:46

                                J'ai déjà le menu, il faut juste que je le mette tout à gauche et le texte à droite; tu peux pas juste me dire comment je fais ?

                                Merci, ça m'aiderait beaucoup ;) 

                                -
                                Edité par Alex0123 8 avril 2019 à 20:30:57

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  8 avril 2019 à 20:31:07

                                  On te la déjà dit regarde mon 2ème post si tu ne fait pas un minimum d'effort je ne posterais plus dans ce topic
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    8 avril 2019 à 20:33:34

                                    "Tu as 3 possibilité :

                                    • Le flexbox
                                    • Grid
                                    • Les float"

                                    J'ai pas compris ce que c'est, j'ai essayé mais ça ne marche pas.

                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      8 avril 2019 à 20:39:40

                                      Et c'est justement ce que te disait noopy360 si tu lis ce petit cours tu comprendra ce qu'on te dit, du moins niveau flexbox et float.

                                      https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/

                                      • Partager sur Facebook
                                      • Partager sur Twitter

                                      Compos sui.

                                      Menu déroulant vertical HTML CSS gauche

                                      × 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