Partage
  • Partager sur Facebook
  • Partager sur Twitter

Je n'arrive pas a mettre de couleur

    25 avril 2019 à 9:53:15

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head class="head">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>premier page</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <nav>
          <ul>
            <li class="menu-onglet1"><a href="onglet1">onglet1</a>
              <ul class="submenu">
                <li><a href="#">teste1</a></li>
                <li><a href="#">teste2</a></li>
                <li><a href="#">teste3</a></li>
                <li><a href="#">teste4</a></li>
              </ul>
            </li>
            <li class="menu-onglet2"><a href="onglet2">onglet2</a>
              <ul class="submenu">
                <li><a href="#">teste5</a></li>
                <li><a href="#">teste6</a></li>
                <li><a href="#">teste7</a></li>
                <li><a href="#">teste8</a></li>
              </ul>
            </li>
            <li class="menu-onglet3"><a href="onglet3">onglet3</a>
              <ul class="submenu">
                <li><a href="#">teste9</a></li>
                <li><a href="#">teste10</a></li>
                <li><a href="#">teste11</a></li>
                <li><a href="#">teste13</a></li>
              </ul>
            </li>
            <li class="menu-onglet4"><a href="onglet4">onglet4</a>
              <ul class="submenu">
                <li><a href="#">teste14</a></li>
                <li><a href="#">teste15</a></li>
                <li><a href="#">teste16</a></li>
                <li><a href="#">teste17</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </body>
    </html>
    
    body{
      font-family: 'source code pro', calibri, serif;
      margin: 0px;
      padding: 0px;
    }
    
    nav{
      width: 100%;
      background-color: #424558;
    }
    
    nav > ul{
      margin: 0px;
      padding: 0px;
    }
    
    nav > ul: :after{
      content: "";
      display: block;
      clear: both;
    }
    
    nav > ul > li{
      float: left;
      position: relative;
    }
    
    nav > ul > li > a{
      padding: 20px 30px;
      color: #FFF;
    }
    
    nav li{
      list-style-type: none;
    }
    
    .submenu{
      display: none;
    }
    
    nav a{
      display: inline-block;
      text-decoration: none;
    }
    
    nav li:hover .submenu{
      display: inline-block;
      position: absolute;
      top: 100%;
      left: 0px;
      padding: 0px;
      z-index: 1000;
    }
    
    .submenu li{
      border-bottom: 1px solid #CCC;
    }
    
    .submenu li a{
      padding: 15px 30px;
      font-size: 13px;
      color: #222538
      width: 270px;
    }
    
    .menu-onglet1:hover{
      border-top: 5px solid #e44d26
      background-color: RGBa(228, 77, 38, 0.15);
    }
    
    .menu-onglet2:hover{
      border-top: 5px solid #0070bb
      background-color: RGBa(000, 112, 192, 0.15);
    }
    
    .menu-onglet3:hover{
      border-top: 5px solid #f1dc4f
      background-color: RGBa(241, 211, 79, 0.15);
    }
    
    .menu-onglet4:hover{
      border-top: 5px solid #BBB;
      background-color: RGBa(220, 220, 220, 0.15);
    }
    

    Bonjour voici mon code je n'arrive pas a mettre la couleur gris sur mon menu ou même en background de toute la page et pareil pour les sous-menu je suis novice en code ^^! mes la je ne comprend vraiment pas pourquoi le background se mes pas 

    • Partager sur Facebook
    • Partager sur Twitter
      25 avril 2019 à 10:03:35

      Salut,

      N'hésite pas à te servir de la console tu comprendras surement mieux le fonctionnement du CSS.

      Sinon pour donner de la couleur à tes sous-menu bah ce sera : 

      .submenu li a {
        color: red;
      }

      Pour donner un background à ta page : 

      body {
         background: black;
      }




      -
      Edité par FloJDM 25 avril 2019 à 10:04:14

      • Partager sur Facebook
      • Partager sur Twitter

      -> Hébergement GRATUIT <- Parfait pour débuter/dev/test/...

        25 avril 2019 à 10:09:59

        Bonjour,

        Il y a des erreurs dans ton CSS. Par exemple ici :

        .menu-onglet1:hover{
          border-top: 5px solid #e44d26
          background-color: RGBa(228, 77, 38, 0.15);
        }
         
        .menu-onglet2:hover{
          border-top: 5px solid #0070bb
          background-color: RGBa(000, 112, 192, 0.15);
        }
         
        .menu-onglet3:hover{
          border-top: 5px solid #f1dc4f
          background-color: RGBa(241, 211, 79, 0.15);
        }

        Tu as oublié tous les ";" à la fin de tes premières propriétés CSS donc le navigateur ne comprend pas et ne fait rien. ;)

        • Partager sur Facebook
        • Partager sur Twitter
        Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
          25 avril 2019 à 10:13:25

          Bien vu Mewen, perso je l'ai vu un peu tard en revanche j'ai aussi trouvé que dans ton css y'avais des espaces partout, t'as du copier un bout de code par là mal formaté ;-)

          body {
          font-family: 'source code pro', calibri, serif;
          margin: 0px;
          padding: 0px;
          }
          
          nav {
          width: 100%;
          background-color: #424558;
          }
          
          nav > ul {
          margin: 0px;
          padding: 0px;
          }
          
          nav > ul::after {
          content: "";
          display: block;
          clear: both;
          }
          
          nav > ul > li {
          float: left;
          position: relative;
          }
          
          nav > ul > li > a {
          padding: 20px 30px;
          color: #FFF;
          display: inline-block;
          text-decoration: none;
          }
          
          nav li {
          list-style-type: none;
          }
          
          .submenu {
          display: none;
          }
          
          nav li:hover .submenu {
          display: inline-block;
          position: absolute;
          top: 100%;
          left: 0px;
          padding: 0px;
          z-index: 1000;
          }
          
          .submenu li {
          border-bottom: 1px solid #CCC;
          }
          
          .submenu li a {
          padding: 15px 30px;
          font-size: 13px;
          color: #222538;
          width: 270px;
          }
          
          .menu-onglet1:hover {
          border-top: 5px solid #e44d26;
          background-color: rgba(228, 77, 38, 0.5);
          }
          
          .menu-onglet2:hover {
          border-top: 5px solid #0070bb;
          background-color: rgba(000, 112, 192, 0.5);
          }
          
          .menu-onglet3:hover {
          border-top: 5px solid #f1dc4f;
          background-color: rgba(241, 211, 79, 0.5);
          }
          
          .menu-onglet4:hover {
          border-top: 5px solid #BBB;
          background-color: rgba(220, 220, 220, 0.5);
          }

          Du coup désolé pour l'indentation mais au moins ce code CSS applique bien les propriétés et valeurs que tu souhaites ! 

          -
          Edité par FloJDM 25 avril 2019 à 10:14:08

          • Partager sur Facebook
          • Partager sur Twitter

          -> Hébergement GRATUIT <- Parfait pour débuter/dev/test/...

            25 avril 2019 à 11:02:36

            Merci beaucoup et non cet un code que j'ai créer grâce a un tuto ^^ donc les erreurs vienne de moi 

            Encore Merci pour tout ^^

            • Partager sur Facebook
            • Partager sur Twitter

            Je n'arrive pas a mettre de couleur

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