Je crée donc ce site Web pour un projet étudiant et mon contenu en haut de la page disparaît sous la barre de navigation fixe que j'ai créée.

Comment faire pour que la zone de contenu commence sous la barre de navigation et ne se termine pas en dessous? (Corrigé temporairement avec les balises <br>)

Voir le code ci-dessous:

HTML et CSS (la page À propos sur laquelle je travaille)

@font-face {
    font-family: "Roboto Light";
    src: url(font/Roboto-Light.ttf)
}

@font-face {
    font-family: "Roboto Regular";
    src: url(font/Roboto-Regular.ttf);
}

@font-face {
    font-family: "Roboto Medium Italic";
    src: url(font/Roboto-MediumItalic.ttf);
}

@media (max-width:1200px) {
    .indexsIMG img {
      display: none !important;
    }
 }

body {
    margin: 0 0;
        padding: 0 0;
        font-family: "Roboto Light";
        background-color: #3aafa9;
}

.topbox {
  font-size: 25px;
}

.topbox ul {
  position: fixed;
  top: 0;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3aafa9;
    max-width: 100%;
}

.flex-navbar {
    display: flex;
    justify-content: center;
    margin-right: 15%;
    font-family: "Roboto Light";
}

.leftbox {
    margin-left: 5%;
    font-family: "Roboto Medium Italic";
    color: #171717;
}

.flex-navbar .active {
  color: #171717;
}

.topbox li a {
  display: block;
  color: #feffff;
  text-align: center;
  padding: 14px 40px;
  text-decoration: none;
    font-size: 1em;
    float: left;
    text-align: center;
}

.flex-navbar li a:hover {
  color: #2b7a78;
}

.indexClickbox{
    background-color: #2b7a78;
}

.index{
    display: flex;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10%;
}

.index h1{
    font-size: 8rem;
}

.index p{
    font-size: 2rem;
}

.indexOpphavIMG{
    font-size: 1rem;
}

.indexTXT{
    width: 50%;
    float: right;
    padding-left: 2%;
}

.index img{
    max-width: 100%;
    border-radius: 10px;
}

.indexIMG{
    width: 50%;
    float: left;
    padding-top: 7%;
}

.index button{
    width: auto;
    margin-left: 5%;
    background-color:#2b7a78;
    border: none;
    font-weight: 500;
    font-size: 3rem;
    color: #3aafa9;
    border-radius: 4px;
}
.index button:hover{
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    cursor: pointer;
}

.index a:link{
    text-decoration: none;
}

.container {
    display: block;
    width: 0 auto;
    text-align: center;
}

.box {
    display: inline-block;
    text-align: center;
    padding: 0 5%;
}





.footer{
   
}
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="Stylesheet.css">
</head>
<body>
   <nav class="topbox">
      <ul>
          <li class="leftbox"><a class="active" href="index.html">INOVA</a></li>
          <div class="flex-navbar">
          <li><a class="active" href="about.html">About</a></li>
          <li><a href="Schedule.html">Innovation Camps</a></li>
          <li><a href="contact.html">Contact</a></li>
      </div>
      </ul>
   </nav>
   <br>
   <br>
   <div class="container">

      <div class="box">
         <h1>About Inova</h1>
      </div>

   </div>
   


   <footer>
      <div class="footer">
          <p></p>
      </div>
   </footer>
   
</body>
</html>
0
EliasV 22 oct. 2020 à 17:26

2 réponses

Meilleure réponse

En ajoutant un rembourrage en haut du corps, vous pouvez pousser le contenu principal vers le bas afin qu'il ne soit pas en dessous de la barre de navigation fixe:

@font-face {
  font-family: "Roboto Light";
  src: url(font/Roboto-Light.ttf)
}

@font-face {
  font-family: "Roboto Regular";
  src: url(font/Roboto-Regular.ttf);
}

@font-face {
  font-family: "Roboto Medium Italic";
  src: url(font/Roboto-MediumItalic.ttf);
}

@media (max-width:1200px) {
  .indexsIMG img {
    display: none !important;
  }
}

body {
  margin: 0 0;
  padding: 80px 0 0;
  font-family: "Roboto Light";
  background-color: #3aafa9;
}

.topbox {
  font-size: 25px;
}

.topbox ul {
  position: fixed;
  top: 0;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3aafa9;
  max-width: 100%;
  background-color: rgba(0, 0, 0, .2);
}

.flex-navbar {
  display: flex;
  justify-content: center;
  margin-right: 15%;
  font-family: "Roboto Light";
}

.leftbox {
  margin-left: 5%;
  font-family: "Roboto Medium Italic";
  color: #171717;
}

.flex-navbar .active {
  color: #171717;
}

.topbox li a {
  display: block;
  color: #feffff;
  text-align: center;
  padding: 14px 40px;
  text-decoration: none;
  font-size: 1em;
  float: left;
  text-align: center;
}

.flex-navbar li a:hover {
  color: #2b7a78;
}

.indexClickbox {
  background-color: #2b7a78;
}

.index {
  display: flex;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10%;
}

.index h1 {
  font-size: 8rem;
}

.index p {
  font-size: 2rem;
}

.indexOpphavIMG {
  font-size: 1rem;
}

.indexTXT {
  width: 50%;
  float: right;
  padding-left: 2%;
}

.index img {
  max-width: 100%;
  border-radius: 10px;
}

.indexIMG {
  width: 50%;
  float: left;
  padding-top: 7%;
}

.index button {
  width: auto;
  margin-left: 5%;
  background-color: #2b7a78;
  border: none;
  font-weight: 500;
  font-size: 3rem;
  color: #3aafa9;
  border-radius: 4px;
}

.index button:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
}

.index a:link {
  text-decoration: none;
}

.container {
  display: block;
  width: 0 auto;
  text-align: center;
}

.box {
  display: inline-block;
  text-align: center;
  padding: 0 5%;
}

.footer {}
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="Stylesheet.css">
</head>
<body>
  <nav class="topbox">
    <ul>
      <li class="leftbox"><a class="active" href="index.html">INOVA</a></li>
      <div class="flex-navbar">
        <li><a class="active" href="about.html">About</a></li>
        <li><a href="Schedule.html">Innovation Camps</a></li>
        <li><a href="contact.html">Contact</a></li>
      </div>
    </ul>
  </nav>
  <div class="container">
    <div class="box">
       <h1>About Inova</h1>
    </div>
  </div>
  <footer>
    <div class="footer">
      <p></p>
    </div>
  </footer>
</body>
</html>
0
lucasreta 22 oct. 2020 à 14:38

Le moyen le plus simple à mon avis est de remplacer position: fixed par position: sticky et de déplacer également cette propriété vers .topbox car c'est l'élément que vous souhaitez conserver en haut de la fenêtre.

N'oubliez pas que position: sticky est compatible avec les navigateurs plus petits

body {
  margin: 0 0;
  padding: 0 0;
  font-family: "Roboto Light";
  background-color: #3aafa9;
}

.topbox {
  font-size: 25px;
  top: 0;
  position: sticky;
}

.topbox ul {      width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #3aafa9;
  max-width: 100%;
}

.flex-navbar {
  display: flex;
  justify-content: center;
  margin-right: 15%;
  font-family: "Roboto Light";
}

.leftbox {
  margin-left: 5%;
  font-family: "Roboto Medium Italic";
  color: #171717;
}

.flex-navbar .active {
  color: #171717;
}

.topbox li a {
  display: block;
  color: #feffff;
  text-align: center;
  padding: 14px 40px;
  text-decoration: none;
  font-size: 1em;
  float: left;
  text-align: center;
}

.flex-navbar li a:hover {
  color: #2b7a78;
}

.indexClickbox {
  background-color: #2b7a78;
}

.index {
  display: flex;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10%;
}

.index h1 {
  font-size: 8rem;
}

.index p {
  font-size: 2rem;
}

.indexOpphavIMG {
  font-size: 1rem;
}

.indexTXT {
  width: 50%;
  float: right;
  padding-left: 2%;
}

.index img {
  max-width: 100%;
  border-radius: 10px;
}

.indexIMG {
  width: 50%;
  float: left;
  padding-top: 7%;
}

.index button {
  width: auto;
  margin-left: 5%;
  background-color: #2b7a78;
  border: none;
  font-weight: 500;
  font-size: 3rem;
  color: #3aafa9;
  border-radius: 4px;
}
.index button:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
}

.index a:link {
  text-decoration: none;
}

.container {
  display: block;
  width: 0 auto;
  text-align: center;
}

.box {
  display: inline-block;
  text-align: center;
  padding: 0 5%;
}

.footer {
}
<body>
  <nav class="topbox">
    <ul>
      <li class="leftbox"><a class="active" href="index.html">INOVA</a></li>
      <div class="flex-navbar">
        <li><a class="active" href="about.html">About</a></li>
        <li><a href="Schedule.html">Innovation Camps</a></li>
        <li><a href="contact.html">Contact</a></li>
      </div>
    </ul>
  </nav>
  <div class="container">

    <div class="box">
      <h1>About Inova</h1>
    </div>

  </div>

  <footer>
    <div class="footer">
      <p></p>
    </div>
  </footer>

</body>
0
fromaline 22 oct. 2020 à 14:34