Mettre les elements en dessous des autres avec bootsrap
Jessekamba -  
Bonsoir ici. je travail sous bootstrap, mais je suis bloqué quelque par lorsqu'il s'agit d'agencer les élément comme il se doit. J'ai une navbar que j'ai défini a "fixed-top", lorsque je met mes paragraphes juste après , la navbar est superposée sur le début de mon paragraphe mais lorsque je sors la navbar a fixed-top le paragraphe s'agence juste en dessous de la navbar comme il se doit. je voudrai enlever cette superposition meme lorsque ma navbar est a fixed-top.
voici mon code: 


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Netasolution   </title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="css/mdb.min.css" rel="stylesheet">
  <!-- Your custom styles (optional) -->
  <link href="css/style.css" rel="stylesheet">
</head>

<body>

  <!-- Start your project here-->
  <div class="container-fluid">
    <nav class="navbar navbar-expand-lg  fixed-top navbar-dark pink default-header scrolling-navbar role=navigation">
        <img src="logo.jpg" alt="">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
    aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    
    <ul class="navbar-nav ml-auto ">
      
      <li class="nav-item" >
        <a class= "nav-link" href="#">Acceuil</a>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="#">A propos </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#">Service</a>
      </li>


    </ul>
  </div>
</nav>


<p>
ce paragraphe est une démonstration....  Une table peut aussi servir à relier des données entre elles, notamment dans le cas d’une relation 0..n à 0..n entre deux ou plusieurs autres tables. Un exemple (le langage utilisé est celui de Merise, au niveau du modèle conceptuel de données) : une table qui traduit l’association « est un élève de » entre les entités « Étudiant » et « Enseignant ».
 Une clef primaire est un identifiant d’une table composé d’un ou plusieurs attributs de celle-ci, on utilise souvent un identifiant auto-généré pour cela. Elle sert à identifier de manière unique une ligne de la table. Un exemple : le matricule d’un étudiant.  Une clef étrangère est un identifiant d’une table (en général, la clef primaire de celle-ci) inséré dans une autre table afin d’établir une relation entre les deux. Un exemple : dans la table « Cotes », le matricule d’étudiant est une clef étrangère servant à identifier l’étudiant qui possède la cote contenue dans une ... ce paragraphe est a titre démonstratif 
 Une table peut aussi servir à relier des données entre elles, notamment dans le cas d’une relation 0..n à 0..n entre deux ou plusieurs autres tables. Un exemple (le langage utilisé est celui de Merise, au niveau du modèle conceptuel de données) : une table qui traduit l’association « est un élève de » entre les entités « Étudiant » et « Enseignant ».
 Une clef primaire est un identifiant d’une table composé d’un ou plusieurs attributs de celle-ci, on utilise souvent un identifiant auto-généré pour cela. Elle sert à identifier de manière unique une ligne de la table. Un exemple : le matricule d’un étudiant.  Une clef étrangère est un identifiant d’une table (en général, la clef primaire de celle-ci) inséré dans une autre table afin d’établir une relation entre les deux. Un exemple : dans la table « Cotes », le matricule d’étudiant est une clef étrangère servant à identifier l’étudiant qui possède la cote contenue dans une ... ce paragraphe est a titre démonstratif 

 Une table peut aussi servir à relier des données entre elles, notamment dans le cas d’une relation 0..n à 0..n entre deux ou plusieurs autres tables. Un exemple (le langage utilisé est celui de Merise, au niveau du modèle conceptuel de données) : une table qui traduit l’association « est un élève de » entre les entités « Étudiant » et « Enseignant ».
 Une clef primaire est un identifiant d’une table composé d’un ou plusieurs attributs de celle-ci, on utilise souvent un identifiant auto-généré pour cela. Elle sert à identifier de manière unique une ligne de la table. Un exemple : le matricule d’un étudiant.  Une clef étrangère est un identifiant d’une table (en général, la clef primaire de celle-ci) inséré dans une autre table afin d’établir une relation entre les deux. Un exemple : dans la table « Cotes », le matricule d’étudiant est une clef étrangère servant à identifier l’étudiant qui possède la cote contenue dans une ... ce paragraphe est a titre démonstratif </p>

  <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="js/mdb.js"></script>
</div>
</body>

</html>


et voila le resultat:



ce n'est qu une partie du début du paragraphe qui s'affiche en dessous de la navbar le reste est caché.

voici le résultat lorsque j’enlève fixed-top:



la premiere ligne du paragraphe s'affiche deja.

merci

1 réponse

  1.  jordane45 Modérateur
    Bonjour,
    Commence par placer tes différents éléments dans des DIV

    https://getbootstrap.com/docs/4.0/layout/grid/
    0
    1. Jessekamba Auteur
      bonsoir jordan. si tu peux être plus précis vu que dans mon code j'ai utilisé des DIV
      0
    2. jordane45 Modérateur
      @JessekambaTon paragraphe... dans une DIV
      Par exemple 
      <div class="container">
<p>
ce paragraphe est une démonstration....  Une table peut aussi servir à relier des données entre elles, notamment dans le cas d’une relation 0..n à 0..n entre deux ou plusieurs autres tables. Un exemple (le langage utilisé est celui de Merise, au niveau du modèle conceptuel de données) : une table qui traduit l’association « est un élève de » entre les entités « Étudiant » et « Enseignant ».
 Une clef primaire est un identifiant d’une table composé d’un ou plusieurs attributs de celle-ci, on utilise souvent un identifiant auto-généré pour cela. Elle sert à identifier de manière unique une ligne de la table. Un exemple : le matricule d’un étudiant.  Une clef étrangère est un identifiant d’une table (en général, la clef primaire de celle-ci) inséré dans une autre table afin d’établir une relation entre les deux. Un exemple : dans la table « Cotes », le matricule d’étudiant est une clef étrangère servant à identifier l’étudiant qui possède la cote contenue dans une ... ce paragraphe est a titre démonstratif 
 Une table peut aussi servir à relier des données entre elles, notamment dans le cas d’une relation 0..n à 0..n entre deux ou plusieurs autres tables. Un exemple (le langage utilisé est celui de Merise, au niveau du modèle conceptuel de données) : une table qui traduit l’association « est un élève de » entre les entités « Étudiant » et « Enseignant ».
 Une clef primaire est un identifiant d’une table composé d’un ou plusieurs attributs de celle-ci, on utilise souvent un identifiant auto-généré pour cela. Elle sert à identifier de manière unique une ligne de la table. Un exemple : le matricule d’un étudiant.  Une clef étrangère est un identifiant d’une table (en général, la clef primaire de celle-ci) inséré dans une autre table afin d’établir une relation entre les deux. Un exemple : dans la table « Cotes », le matricule d’étudiant est une clef étrangère servant à identifier l’étudiant qui possède la cote contenue dans une ... ce paragraphe est a titre démonstratif 

 Une table peut aussi servir à relier des données entre elles, notamment dans le cas d’une relation 0..n à 0..n entre deux ou plusieurs autres tables. Un exemple (le langage utilisé est celui de Merise, au niveau du modèle conceptuel de données) : une table qui traduit l’association « est un élève de » entre les entités « Étudiant » et « Enseignant ».
 Une clef primaire est un identifiant d’une table composé d’un ou plusieurs attributs de celle-ci, on utilise souvent un identifiant auto-généré pour cela. Elle sert à identifier de manière unique une ligne de la table. Un exemple : le matricule d’un étudiant.  Une clef étrangère est un identifiant d’une table (en général, la clef primaire de celle-ci) inséré dans une autre table afin d’établir une relation entre les deux. Un exemple : dans la table « Cotes », le matricule d’étudiant est une clef étrangère servant à identifier l’étudiant qui possède la cote contenue dans une ... ce paragraphe est a titre démonstratif 
</p>

</div>
      0

Discussions similaires

Partage google drive
The sr5

1 réponse
Ma souris sélectionne plusieurs fichiers en un clic
Joe88

1 réponse
disque dur externe reconnu comme elements 25A2
Clement95290

15 réponses