Problème CSS barre de menu

Résolu

Bonjour,

J'ai suivi le tuto n°3 "Personnaliser sa barre de menu avec du CSS" de Créer son site de rencontre et je n'arrive pas à changer la couleur de la barre de menu avec background-color. Je voudrais également mettre "Inscription" et "Connexion" à droite de la barre de menu avec ml-auto mais ça ne marche pas. Je suis en localhost sous XAMPP et mon dossier se nomme Marchand et dedans il y a un dossier qui se nomme css avec 3 fichiers qui sont : bootstrap.css, bootstrap.min.css et style.css

Voici mon code style.css :

.bg-light {
background-color: #f39c12 !important;
}

.navbar-light .navbar-nav .nav-link {
color: #2980b9;
}

Et voici une partie de mon code index.php :

<head><base href="/Marchand"><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- Bootstrap CSS-->
<link rel="stylesheet" type="Marchand/css/bootstrap.min.css" crossorigin="anonymous"/>
<link rel="stylesheet" type="Marchand/css/style.css">

<title>Accueil</title>
</head>

<body>
<!-- Barre de navigation-->
<nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container-fluid"><a class="navbar-brand mr-auto" href="Marchand/index">Accueil</a><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav ml-auto"><?phpif(!isset($_SESSION['id'])){
            ?><li class="nav-item"><a class="nav-link" href="Marchand/inscription">Inscription</a></li><li class="nav-item"><a class="nav-link" href="Marchand/connexion">Connexion</a></li><?php
            }else{
           ?><li class="nav-item"><a class="nav-link" href="Marchand/deconnexion">Déconnexion</a></li><?php
          }
          ?></ul></div></div>
</nav>

Voir moins Voir plus

593 vues

07 janvier 2021 à 19:15 (Édité)

Cette pub permet au site de vivre ...

Jerem971

Le 13 janvier 2021 à 4:49

Re:

Quand tu postes une image, poste-là uniquement sur GooPics et rien d'autres ! (En savoir plus...) (j'ai fait le nécessaire en rééditant)

Concernant Bootstrap, normalement ton code devrait être comme ça :

<!DOCTYPE html>
<html lang="fr">
	<head>
    	<meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        
        <title>Titre</title>
        
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" crossorigin="anonymous" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js" integrity="sha512-8qmis31OQi6hIRgvkht0s6mCOittjMa9GMqtK9hes5iEQBQE/Ca6yGE5FsW36vyipGoWQswBj/QBm2JR086Rkw==" crossorigin="anonymous"></script>
    </head>
<body>


<h1>Titre</h1>
<p>Paragraphe</p>


</body>
</html>

Et tu devrais pas avoir des fichiers de Bootstrap dans les dossiers de ton site 😉

Dès que Bootstrap est appelé comme je l'ai fait dans le code plus haut, tu peux personnaliser le site en incluant tes propres classes comme l'a dit @Alexoune001 😉

Compte-supprimé

Le 13 janvier 2021 à 2:03 (Édité)

Re @Jerem971 !

Quand tu dis qu'il faut toujours choisir le fichier .min.css tu veux dire que je devais pas supprimer ce fichier ?

En ayant retiré les 2 fichiers bootstrap.min.css et bootstrap.css j'ai ça comme résultat :

Sinon j'ai toujours le fichier style.css et j'ai aussi le lien CDN Bootstrap.

Et non je n'ai pas encore fait ce que @Alexoune001 m'a dit de faire car du coup il faudrait que je refasse tout à la main ce que bootstrap.css faisait ? C'est ça que je comprends pas trop parce que du coup il sert à quoi le lien CDN Bootstrap ?

Merci d'avance 🙂

Jerem971

Le 08 janvier 2021 à 3:01

Re:

Ce que tu as mis dans "index.php" est correct et c'est déjà un bon début 😉

Ce qu'il faut comprendre c'est qu'il y a 2 versions de fichiers Bootstrap, un qui termine par ".min.css" et l'autre par ".css"

Il faut toujours choisir le fichier terminant par ".min.css" ! Pareil pour le JavaScript !

Pourquoi ? La simple et bonne raison que la minification d'un fichier permet de réduire la quantité de code qui doit être transféré sur le web. Plus le code sera léger, plus la bande passante sera conservée et plus le site s’affichera rapidement. 😉

Il faut également toujours avoir la dernière version de Bootstrap, pour éviter les failles CSS. CSS Exfil est une méthode que les attaquants peuvent utiliser pour voler les données des pages web en utilisant des feuilles de style en cascade (CSS).

Donc il te faudra à tout prix adapter ton code avec cette nouvelle version... Peux-tu nous envoyer une capture d'écran afin que l'on voit au mieux le comportement ? 🧐

As-tu également essayer de réaliser les étapes pour reproduire l'action que t'a dit @Alexoune001 ? 🤔

Compte-supprimé

Le 08 janvier 2021 à 2:46 (Édité)

Salut à vous deux et merci pour vos réponses !

@Jerem971 effectivement si je peux gagner de l'espace, c'est toujours ça ! Du coup j'ai supprimé les 2 fichiers : bootstrap.min.css et bootstrap.css dans mon dossier "css" et j'ai mis ça dans mon code "index.php" :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" crossorigin="anonymous" />
<link rel="stylesheet" type="Marchand/css/style.css">

Mais du coup ça m'enlève quand même ce que les fichiers bootstrap.min.css et bootstrap.css faisait sur ma page.

Jerem971

Le 07 janvier 2021 à 19:25

Hello @Robiox,

Inutile de mettre les fichiers de Bootstrap (CSS & JS) dans tes répertoires car cela te prendra de l'espace l'orsque tu mettras tes fichiers sur ton hébergeur en ligne, bien qu'il y a de la place, faut qu'en même économiser 😉

Utilise les CDN, et récupère les liens sur ce site (dernière version de préférences, toujours) 😉 Pour Bootstrap, c'est ici 😉

Alexoune001

Le 07 janvier 2021 à 19:16 (Édité)

Bonjour @Robiox,

Une solution pour que tu puisses personnaliser directement la "navbar" de Bootstrap 4, c'est que tu créés ta propre classe du genre navperso et que tu l'indiques dans ton code HTML.

Je l'ai moi même fait sur mon site web en local et ça fonctionne à merveille 😉 Sinon pour chaque modification "color" dans le CSS, ton CSS personnalisé et qui contient de base une "class" CSS de Bootstrap 4, il faut que tu indiques bien le !important, car cela est très important pour que le changement soit pris en compte 🙂

En espérant t'avoir aidé,

Bonne fin de journée.

Cette pub permet au site de vivre ...

Problème CSS barre de menu

6 commentaires