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 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652
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 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652
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 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 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

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

1 réponse
W32 L32: correspondance entre taille US et taille française
efg -
sibel -

6 réponses
les entrées et les sortées
oussman -
MarsuGL -

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

2 réponses