Placement menu

Geromitchi

Geromitchi Le 18 d√©cembre 2016 √† 00:07 (√Čdit√© le 25 janvier 2019 √† 17:52)

Bonsoir,
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

coucougael94 Le 18 décembre 2016 à 00:24

surement que ton menu (la chose en bleu) possède un margin.
Le code !
Geromitchi

Geromitchi Le 18 décembre 2016 à 00:29

Salut comme j'ai dis c'est du Bootstrap.. je mets le code html et css
<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>
Le css que j'ai rajouter moi même
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

TheOldNoob Le 18 décembre 2016 à 16:57

Salut l'ami,

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

Geromitchi Le 18 décembre 2016 à 17:05

Salut' 
Bah c'est ce que j'ai fais j'ai tout verifi√© mais rien ūüė≠
TheOldNoob

TheOldNoob Le 18 décembre 2016 à 17:17

√ßa viens forcement de quelque part... c'est pas juste magique, si tu a pas trouver ce qui met une marge a ton menu, c'est que tu a mal chercher ūüėÄ

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
Geromitchi

Geromitchi Le 18 décembre 2016 à 18:08

tu as modifé quelque chose ?
TheOldNoob

TheOldNoob Le 18 d√©cembre 2016 √† 18:16 (√Čdit√© le 18 d√©cembre 2016 √† 18:18)

absolument rien !
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

Geromitchi Le 18 décembre 2016 à 18:26

Bon voila après quelque jours ! J'ai trouvé soucis je vois pas comment enlevé le style... je mets un screen:
C'est ce fichu padding !!
http://hpics.li/4e7b595

TheOldNoob

TheOldNoob Le 18 décembre 2016 à 18:30

et se padding il viens de quel css? ūüėÄ
Geromitchi

Geromitchi Le 18 décembre 2016 à 18:34

Voila je l'ai trouvé ce petit enfoiré xD
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

Geromitchi Le 18 décembre 2016 à 18:38

Voila sa reviens malgré que j'ai supprimé mon padding quand je regarde la console il est toujours et j'ai encore ce ****** d'espacement..
TheOldNoob

TheOldNoob Le 18 décembre 2016 à 19:27

Alors, j'en reviens a ma question au dessus

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

Geromitchi Le 18 décembre 2016 à 20:47

Non l'histoire du padding est régler juste que defois soit mon sublim text ou wamp bug prends pas en considération mes modifications..
TheOldNoob

TheOldNoob Le 18 décembre 2016 à 22:20

ctrl + S mon ami !

:)
Geromitchi

Geromitchi Le 20 décembre 2016 à 20:49

Je le fais ne t'inquiète pas je le spam même mdr ^^
TheOldNoob

TheOldNoob Le 20 décembre 2016 à 20:55

Plut√īt que de faire un F5 classique, tu peu faire un ctrl + f5 pour purge du cache du navigateur
victorpatrick

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

Vous devez être connecté pour poster une réponse. Se connecter ou Créer un compte