Elements cachés par la barre de navigation

Résolu/Fermé
Claire_249 Messages postés 2 Date d'inscription vendredi 11 novembre 2022 Statut Membre Dernière intervention 25 décembre 2022 - Modifié le 25 déc. 2022 à 14:19
Claire_249 Messages postés 2 Date d'inscription vendredi 11 novembre 2022 Statut Membre Dernière intervention 25 décembre 2022 - 25 déc. 2022 à 15:42

Bonjour,

Je souhaite réaliser un site web dans le cadre de mes études.

J'ai intégré une barre de navigation mais les éléments que je souhaite placer à la suite s'affiche derrière celle-ci et je ne comprends pas pourquoi.

Y a t-il quelque chose à rajouter ou ai-je loupé une étape ?

Voici la partie de ma barre de navigation et du premier élément que je veux insérer au-dessous.

Merci d'avance

<body>

    <header>

      <nav class="navbar navbar-expand-md navbar-dark fixed-top">

        <div class="container-fluid">

          <!--<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>

          </button>barre laterale pour se deplacer sur la page ?-->

          <div class="collapse navbar-collapse" id="navbarCollapse">

            <h2 class = "titrePharma">Pharmacie du Bailly</h2>

            <ul class="navbar-nav me-auto mb-2 mb-md-0">

              <li class="nav-item">

                <a class="nav-link active" aria-current="page" href="#">Accueil</a>

              </li>

              <li class="nav-item">

                <a class="nav-link active" href="../connexion/pageConnexion_bootstrap.html">Connexion</a>

              </li>

              <li class="nav-item">

                <a class="nav-link active" href = "">Page Legales</a>

              </li>

              <li class = "nav-item">

                <a class = "nav-link active" href = "../contact/styleContact.css">Contact</a>

              </li>

            </ul>

            <form class="d-flex" role="search">

              <input class="form-control me-2" placeholder="Search">

            </form>

          </div>

        </div>

      </nav>

    </header>

    <!--ancre-->

    <div class = "containerAncres">

      <h3 class = "titreAncres">Quelques exemples de recherche : </h3>

      <div class = "boxAncres">

        <ul>

          <li><a class = "bouton" href="#rubriqueBeaute">Beauté</a></li>

          <li><a class = "bouton" href="#rubriqueBeaute">Beauté</a></li>

        </ul>

        <a class = "bouton" href="#rubriqueBienEtre>">Bien - etre</a>

        <a class = "bouton" href="#rubriqueSexualite">Hygiène et Sexualité</a>

        <a class = "bouton" href="#rubriqueBebe">Grossesse et enfants</a>

      </div>

    </div>

EDIT de la modération : Ajout des BALISES DE CODE.
Merci d'y penser la prochaine fois


Windows / Edge 108.0.1462.54

2 réponses

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
25 déc. 2022 à 14:23

Bonjour,

Tu le dis pas dans ton message... mais je suppose que tu utilises bootstrap.

Et donc, n'aurais tu pas oublié un espace entre le nom de tes class dans ta div

<div class = "containerAncres">

<!-- A changer par -->
<div class = "container Ancres">

A noter également que nous ne pourrons pas te donner plus d'aide sans savoir si tu as utilisé d'autre CSS (autre que celui de bootstrap )

Il serait bien également de préciser quelle version de bootstrap tu utilises...

Et pour finir, tu trouveras de nombreux exemples (voir même des générateurs de code) pour utiliser bootstrap... a toi de respecter la structure des pages et la syntaxe pour se conformer au fonctionnement de ce framework css.


0
Claire_249 Messages postés 2 Date d'inscription vendredi 11 novembre 2022 Statut Membre Dernière intervention 25 décembre 2022
25 déc. 2022 à 15:42

Bonjour, merci pour votre réponse.

C'est intentionnel que l'espace ne soit pas présent; je fais ca pour la plupart de mes class ca ne m'a jamais posé problèmes pour le moment.

Oui j'ai oublié de préciser que j'utilise bootstrap, et mon erreur dois venir de là. J'ai remplacer ma barre de navigation par une nouvelle barre de navigation bootstrap et mon problème a disparu. J'avais du supprimer une ligne qu'il ne fallait pas, je ne suis pas totalement au point avec bootstrap.

Merci encore

0