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

FloJDM

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

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

Mewen_bzh

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.

Je ne réponds pas aux messages privés.

FloJDM

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

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

ThomasChi

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