Sujet Précédent Sujet Suivant

Taille menu

Fermé
Max0123456 Messages postés 97 Date d'inscription dimanche 24 octobre 2021 Statut Membre Dernière intervention 2 février 2023 - 3 nov. 2021 à 20:05
Max0123456 Messages postés 97 Date d'inscription dimanche 24 octobre 2021 Statut Membre Dernière intervention 2 février 2023 - 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 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
3 nov. 2021 à 21:12
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 dimanche 24 octobre 2021 Statut Membre Dernière intervention 2 février 2023
3 nov. 2021 à 23:25
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 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
3 nov. 2021 à 23:31
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 dimanche 24 octobre 2021 Statut Membre Dernière intervention 2 février 2023 > jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024
4 nov. 2021 à 15:29
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

Curseur plus large que 32x32
Zv -
Zv -

2 réponses
Ecran iphone qui est trop grand
patorp -
Proulx -

144 réponses
Comment retrouver le bouton menu de Tv Tcl
Guy -
MPMP10 -

1 réponse
Commande internet correspondance taille US pour jean homme.
Larkos -
Zabou -

5 réponses