Taille menu
Max0123456
Messages postés
112
Statut
Membre
-
Max0123456 Messages postés 112 Statut Membre -
Max0123456 Messages postés 112 Statut Membre -
Bonjour,
comment faire pour que mon menu soit collé aux bords ?
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)
}
2 réponses
-
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
-
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-
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- 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>
-
