Taille menu
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
-
ModérateurBonjour
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-
-
@jordane45J'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>
-
