Placement menu
Geromitchi Le 18 décembre 2016 à 00:07 (Édité le 25 janvier 2019 à 17:52)
Je rencontre un soucis au niveau d'un placement de mon menu j'utilise bootsrap.
Donc je m'explique mon menu ne prends pas toutes la largeur qui faut + ne ce place pas toute en haut de ma page..
Je mets un screen.
http://hpics.li/76495fe
Et aussi je voudrais savoir comment faire pour que mon footer s'adapte au site
Merci !
coucougael94 Le 18 décembre 2016 à 00:24
Le code !
Geromitchi Le 18 décembre 2016 à 00:29
<nav class="navbar navbar-default" style="background-color: #CEF2F9 ">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class=" police navbar-brand" href="index.php" style="border-right: ridge">Coco-Minute</a>
</div>
<div class=" barre collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class=" police nav navbar-nav">
<li><a href="index.php" class="">Acceuil</a></li>
<li><a href="recettes" class="">Proposer sa recette</a></li>
<li class=" dropdown">
<a href="lesrecettes.php" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Les recettes <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Apéritifs</a>
</li>
<li><a href="#">Entrées</a></li>
<li><a href="#">Plat</a></li>
<li><a href="#">Dessert</a></li>
<li><a href="#">Boisson</a></li>
</ul>
</li>
<li><a href="contact.php">Nous contacter</a></li>
<li><a href="inscription.php">Inscription</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<a class=" police dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Noms <span class="caret"></span></a>
<ul class=" police dropdown-menu">
<li><a href="profil.php">Mon profile</a></li>
<li><a href="#">Message privé</a></li>
<li role="separator" class="divider"></li>
<li><a href="deco.php">Déconnexion</a></li>
</ul>
<li class="police"><a href="connexion.php">Connexion</a></li>
</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
body{
background-color: rgba(92, 209, 182, 0.09);
}
.barre{
background-color: #CEF2F9;
}
.police{
font-family: cursive;
}
.navbar, .dropdown-menu{
background:rgba(255,255,255,0.25);
border: none;
}
.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
border-bottom: 3px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
border-bottom: 3px solid transparent;
background: none;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
color: #fff;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.nav li:hover:nth-child(8n+1){
border-bottom: #C4E17F 3px solid;
}
.nav li:hover:nth-child(8n+2){
border-bottom: #FFC300 3px solid;
}
.nav li:hover:nth-child(8n+3) {
border-bottom: #C70039 3px solid;
}
.nav li:hover:nth-child(8n+4) {
border-bottom: #76C1CE 3px solid;
}
.nav li:hover:nth-child(8n+5) {
border-bottom: #9276CE 3px solid;
}
.nav li:hover:nth-child(8n+6) {
border-bottom: #E1DCEC 3px solid;
}
.navbar-toggle .icon-bar{
color: #fff;
background: #fff;
}
TheOldNoob Le 18 décembre 2016 à 16:57
Là, le problème, c'est que tu utilise Bootstrap, et il y a 6000 lignes de code dans bootstrap.
Ce que je te conseil c'est d'utilisé la console développeur, tu clic sur ton élément, tu regarder les attributs et tu cherche celui qui pose problèmes, tu le rectifi dans la console, puis une fois que tout va bien, tu va dans TON css corriger ce qui ne va pas. NE JAMAIS toucher au fichier bootstrap !!!!
Geromitchi Le 18 décembre 2016 à 17:05
Bah c'est ce que j'ai fais j'ai tout verifié mais rien 😭
TheOldNoob Le 18 décembre 2016 à 17:17
Sinon, j'ai mis testé ton code chez moi et je n'ai pas du tout se problème ! tout est parfaitement coller, sans aucune marge
TheOldNoob Le 18 décembre 2016 à 18:16 (Édité le 18 décembre 2016 à 18:18)
Cela dit j'ai mis ton html entre mes balise <body> est-ce que toi tu a d'autre balise entre body et nav?
Genre une div avec une class "content" si mes souvenir son bon sur bootstrap, ça ajoute un magrin
Geromitchi Le 18 décembre 2016 à 18:26
C'est ce fichu padding !!
http://hpics.li/4e7b595
Geromitchi Le 18 décembre 2016 à 18:34
Merci !!
Bon j'ai remarqué que lorsque je modifie mon code souvent il ne le prends pas en considération je dois me battre avec wamp pour que sa fonctionne ou limite recopier tous mon dossier ... J'ai réinstaller wamp 3653753763 fois mais toujours rien c'est depuis que j'utilise Bootsrap..
Geromitchi Le 18 décembre 2016 à 18:38
TheOldNoob Le 18 décembre 2016 à 19:27
Ton padding il est dans quel fichier css? Le tiens ou celui de bootstrap?
Je pense qu'il est dans celui de bootstrap, et j'espère que ton css est placer après celui de boostrap, car sinon c'est bootstrap qui écrase ton css alors que c'est ton css qui doit écrasé celui de bootstrap.
Il suffit pour cela, simplement d'ajouter une class ou cela pose problème et d'y mettre un paddin 0
Geromitchi Le 18 décembre 2016 à 20:47
TheOldNoob Le 20 décembre 2016 à 20:55
victorpatrick Le 4 août 2023 à 10:26
Bonsoir,
Il semble que vous ayez quelques problèmes d'affichage avec le placement de votre menu et le footer sur votre site utilisant Bootstrap. Je serais ravi de vous aider à résoudre ces problèmes.
Pour le menu, assurez-vous que vous utilisez la classe "navbar" de Bootstrap pour votre menu de navigation. Cela permettra de le faire occuper toute la largeur de l'écran. Voici un exemple de code pour votre menu : Bonsoir, <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Votre Site</title> <link rel="stylesheet" href="styles.css"> <!-- Ajoutez le lien vers Bootstrap ici --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Votre Logo</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Accueil</a> </li> <li class="nav-item"> <a class="nav-link" href="#">À Propos</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <!-- Ajoutez d'autres éléments de menu ici --> </ul> </div> </nav>
<!-- Le contenu de votre site va ici -->
<!-- Ajoutez le script de Bootstrap ici --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="@popperjs/core@2.0.7/dist/umd/popper.min.js" title="" rel="nofollow" target="_blank">https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html> Rainbow Friends
