Taille menu

Max0123456 Messages postés 97 Date d'inscription   Statut Membre Dernière intervention   -  
Max0123456 Messages postés 97 Date d'inscription   Statut Membre Dernière intervention   - 4 nov. 2021 à 15:29
Bonjour,

comment faire pour que mon menu soit collé aux bords ? 



{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
  background-image: url(backgroud.jpg);
  background-size: cover;
  background-position: center;
  font-family: sans-serif;
}

.bar-menu{
  background: rgb(0,100,0);
  text-align: center;
}

.bar-menu ul{
  display: inline-flex;
  list-style: none;
  color: #fff;
}

.bar-menu ul li{
  width: 120px;
  margin: 15px;
  padding: 15px;
}

.bar-menu ul li a{
 text-decoration: none;
 color: #fff;
}

.active, .bar-menu ul li:hover{
  background: #12ab0d;
  border-radius: 3px;
}

.bar-menu .fas{
  margin-right: 5px;
}

.sous-menu1{
  display: none;
}

.bar-menu ul li:hover .sous-menu1{
  display: block;
  position: absolute;
  background: rgb(0,100,0);
  margin-top: 15px;
  margin-left: -15px;
}
 .bar-menu ul li:hover .sous-menu1 ul{
   display: block;
   margin: 10px;
 }

.bar-menu ul li:hover .sous-menu1 ul li{
  width: 150px;
  padding: 10px;
  border-bottom: 1px dotted #fff;
  background: transparent;
  border-radius: 0;
  text-align: left;
}

.bar-menu ul li:hover .sous-menu1 ul li:last-child{
  border-bottom: none;
}

.bar-menu ul li:hover .sous-menu1 ul li a:hover{
  color: #b2ff00;
}

.fa-angle-right{
  float: right;
}

.sous-menu2{
  display: none;
}

.hover-me:hover .sous-menu2{
  position: absolute;
  display: block;
  margin-top: -40px;
  margin-left: 140px;
  background: rgb(0,100,0)
}
A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38472 Date d'inscription   Statut Modérateur Dernière intervention   4 745
 
Bonjour

coller au bord..... de quoi ??

Il faudrait, en plus du css, le code html qui va avec...

Et puis, pour ta question .. c'est en jouant avec le padding et le margin de tes éléments que tu vas y arriver
0
Réponse 2 / 2
Max0123456 Messages postés 97 Date d'inscription   Statut Membre Dernière intervention  
 
Le menu est comme un bloc carré. Il y a de l'espace tout autour. (clique droit ouvrir dans un nouvel onglet pour voir le menu et l'espace autour)

Je voudrais que le menu s'adapte automatiquement et qu'il soit collé à tous les bords
0
jordane45 Messages postés 38472 Date d'inscription   Statut Modérateur Dernière intervention   4 745
 
Comme je te l'ai dit

Il faudrait, en plus du css, le code html qui va avec...

Et puis, pour ta question .. c'est en jouant avec le padding et le margin de tes éléments que tu vas y arriver
0
Max0123456 Messages postés 97 Date d'inscription   Statut Membre Dernière intervention   > jordane45 Messages postés 38472 Date d'inscription   Statut Modérateur Dernière intervention  
 
J'ai rajouté 
padding: 0;
  margin: 0;
à .bar-menu et body

Cela fonctionne sauf que le menu n'est pas collé au bord quand je scroll à droite (ouvrir l'image dans un nouvel onglet)



mon code html : 

<!DOCTYPE html>
<html lang="fr">
   <head>
      <title>DesignType</title>
      <meta charset="utf-8"/>
      <link  rel="stylesheet" href="menu.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
   </head>
   <body>
     <header>
       <div class="bar-menu">
         <nav>
            <ul>
               <li class="active"><a href="index.html"><i class="fas fa-home"></i>Accueil</a></li>
               <li>
                  <a href="page1.html"><i class="fas fa-clone"></i>Services</a>
                  <div class="sous-menu1">
                     <ul>
                        <li><a href="#">aaa</a></li>
                        <li><a href="#">aaa</a></li>
                        <li><a href="#">aaa</a></li>
                     </ul>
                  </div>
               </li>
               <li>
                  <a href="page2.html"><i class="fas fa-user"></i>A propos</a>
                  <div class="sous-menu1">
                     <ul>
                        <li><a href="#">bbbbb</a></li>
                        <li class="hover-me">
                           <a href="#">ccccc</a><i class="fas fa-angle-right"></i>
                           <div class="sous-menu2">
                              <ul>
                                 <li><a href="#">1</a></li>
                                 <li><a href="#">2</a></li>
                                 <li><a href="#">3</a></li>
                              </ul>
                           </div>
                        </li>
                        <li class="hover-me">
                           <a href="#">ddddd</a><i class="fas fa-angle-right"></i>
                           <div class="sous-menu2">
                              <ul>
                                 <li><a href="#">1</a></li>
                                 <li><a href="#">2</a></li>
                                 <li><a href="#">3</a></li>
                                 <li><a href="#">4</a></li>
                                 <li><a href="#">5</a></li>
                              </ul>
                           </div>
                        </li>
                     </ul>
                  </div>
               </li>
               <li><a href="page3.html"><i class="fas fa-users"></i>Clients</a></li>
               <li><a href="page4.html"><i class="fas fa-tags"></i>Prix</a></li>
               <li><a href="page5.html"><i class="fas fa-edit"></i>Design</a></li>
               <li><a href="page6.html"><i class="fas fa-phone"></i>Contact</a></li>
            </ul>
         </nav>
         </div>
       </header>
   </body>
</html>
0

Discussions similaires

À quoi correspond 32x32 US en taille française pour un jean ?
Alison1958 -
Thordendall -

1 réponse
menu caché
laurent -
ChariduP -

7 réponses
Curseur plus large que 32x32
Zv -
Zv -

2 réponses