简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Impossible de positionner correctement une section en HTML, CSS
P粉481035232
P粉481035232 2023-09-10 10:29:17
0
1
381

Je crée un site portfolio et j'aimerais avoir une section "Loisirs" en dessous de la section "À propos". Lorsque j'ai créé la section Hobby pour la première fois, elle apparaissait au-dessus de la section À propos, même si je l'avais codée sous la section À propos dans le code HTML. Maintenant, lorsque j'essaie de le placer sous la section À propos à l'aide de DevTools, il est caché sous la section À propos. Votre aide serait grandement appréciée. 

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    console.log(entry)
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    } else {
      entry.target.classList.remove("show");
    }
  })
})

const hiddenElements = document.querySelectorAll(".hidden");
hiddenElements.forEach((el) => observer.observe(el));
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(0, 118, 214);
}


* {
  margin: 0;
  padding: 0;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

#hero {
  background-color: darkgray;
  height: 100vh;
}

#hey {
  position: absolute;
  top: 228px;
  left: 46vw;
}

#name {
  position: absolute;
  top: 39vh;
  left: 39vw;
}

#line_1 {
  position: absolute;
  top: 50vh;
  left: 23vw;
}

#line_2 {
  position: absolute;
  top: 50vh;
  right: 21vw;
}

nav {
  position: fixed;
  top: -50px;
  left: 20.7vw;
  width: 100%;
  background-image: url("navbar.png");
  background-repeat: no-repeat;
  transition: top 0.2s ease-in-out;
  font-family: 'Playfair Display', serif;
}

nav ul {
  margin: 0;
  padding: 0;
  position: relative;
  right: 313px;
  list-style: none;
  text-align: center;
  font-size: larger;
}

nav li {
  display: inline-block;
  margin: 10px;
  margin-right: 25px;
}

nav a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}


nav:hover {
  top: 0;
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #ffffff;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

#about {
  position: absolute;
  top: 111vh;
  left: 45vw;
  font-family: 'Playfair Display';
  width: 29vw;
}

#about h1 {
  font-size: xx-large;

}

#about h2 {
  font-size: large;
  position: relative;
  left: -13px;
  top: 48px;
}

#profile_pic {
  position: relative;
  bottom: 161px;
  right: 305px;
}

#india {
  position: relative;
  right: 276px;
  bottom: 163px;
  height: 56px;
}

.hidden {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 1s;
}

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

#blur_bg {
  animation: fadeInAnimation ease 3s;
  position: relative;
  bottom: 76vh;
  left: 28vw;
}

#blur_bg2 {
  animation: fadeInAnimation ease 3s;
  position: relative;
  bottom: 162vh;
  left: -58vw;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#hr {
  position: absolute;
  bottom: 145vh;
  right: -1vw;
  width: 50vw;
}

#hobbies {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>I'm Shardul Bhatkar</title>
    <link rel="stylesheet" href="index.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter&family=Playfair+Display:wght@500&display=swap" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="favicon.png">
    <script defer src="script.js"></script>
  </head>
  <body>
    <div id="hero">
      <nav>
        <ul>
          <li class="hover-underline-animation"><a href="#">Home</a></li>
          <li class="hover-underline-animation"><a href="#about">About</a></li>
          <li class="hover-underline-animation"><a href="#">Services</a></li>
          <li class="hover-underline-animation"><a href="#">Get in touch</a></li>
        </ul>
      </nav>
      <img id="hey" src="hey.png" alt="">
      <img id="name" src="name.png" alt="">
      <img id="line_1" src="line_1.png" alt="">
      <img id="line_2" src="line_2.png" alt="">
    </div>
    <section id="about">
      <h1 class="hidden">About Me</h1>
      <h2 class="hidden">
        I am a 14-year-old with a passion for technology and a love for science. In addition to being a podcaster and published author, I have a keen interest in web development and enjoy playing both cricket and table tennis. I also find gaming to be a great way to unwind.

        While I may be young, I am driven to explore the ever-evolving world of technology and constantly seek to expand my knowledge and skills in this field. Thank you for taking the time to get to know me better.
      </h2>
      <img class="hidden" id="profile_pic" src="profile pic.png" alt="">
      <img class="hidden" id="india" src="india 1.png" alt="">
      <img src="blur_bg.png" alt="" id="blur_bg">
      <img src="blur_bg2.png" alt="" id="blur_bg2">
      <img id="hr" src="hr.png" alt="">
    </section>

    <section id="hobbies">
      <h1>My Hobbies</h1>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit vel sit quasi quas. Unde laboriosam est eveniet modi culpa velit.</p>
    </section>
  </body>
</html>

P粉481035232
P粉481035232

répondre à tous(1)
P粉421119778
P粉4211197782023-09-11 08:57:09 1 楼

Pouvez-vous me dire si le CSS suivant est valide ? Si non, quel problème voyez-vous dans le CSS suivant ? 

/* width */
    ::-webkit-scrollbar {
        width: 10px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: rgb(0, 118, 214);
    }


    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    html {
        scroll-behavior: smooth;
    }

    #hero {
        background-color: darkgray;
        height: 100vh;
    }

    #hey {
        /* position: absolute; */
        top: 228px;
        left: 46vw;
    }

    #name {
        /* position: absolute; */
        top: 39vh;
        left: 39vw;
    }

    #line_1 {
        /* position: absolute; */
        top: 50vh;
        left: 23vw;
    }

    #line_2 {
        /* position: absolute; */
        top: 50vh;
        right: 21vw;
    }

    nav {
        position: fixed;
        top: -50px;
        left: 20.7vw;
        width: 100%;
        background-image: url("navbar.png");
        background-repeat: no-repeat;
        transition: top 0.2s ease-in-out;
        font-family: 'Playfair Display', serif;
    }

    nav ul {
        margin: 0;
        padding: 0;
        position: relative;
        right: 313px;
        list-style: none;
        text-align: center;
        font-size: larger;
    }

    nav li {
        display: inline-block;
        margin: 10px;
        margin-right: 25px;
    }

    nav a {
        display: block;
        padding: 10px;
        color: #fff;
        text-decoration: none;
    }


    nav:hover {
        top: 0;
    }

    .hover-underline-animation {
        display: inline-block;
        position: relative;
        color: #ffffff;
    }

    .hover-underline-animation:after {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: #ffffff;
        transform-origin: bottom right;
        transition: transform 0.25s ease-out;
    }

    .hover-underline-animation:hover:after {
        transform: scaleX(1);
        transform-origin: bottom left;
    }

    #about {
        /* position: absolute; */
        /* top: 111vh;
        left: 45vw; */
        margin: auto;
        font-family: 'Playfair Display';
        width: 29vw;
    }

    #about h1 {
        font-size: xx-large;

    }

    #about h2 {
        font-size: large;
        /* position: relative; */
        left: -13px;
        top: 48px;
    }

    #profile_pic {
        /* position: relative; */
        bottom: 161px;
        right: 305px;
    }

    #india {
        /* position: relative; */
        right: 276px;
        bottom: 163px;
        height: 56px;
    }

    .hidden {
        opacity: 0;
        transform: translateX(-100%);
        transition: all 1s;
    }

    .show {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }

    #blur_bg {
        animation: fadeInAnimation ease 3s;
        /* position: relative; */
        bottom: 76vh;
        left: 28vw;
    }

    #blur_bg2 {
        animation: fadeInAnimation ease 3s;
        /* position: relative; */
        bottom: 162vh;
        left: -58vw;
    }

    @keyframes fadeInAnimation {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    #hr {
        /* position: absolute; */
        bottom: 145vh;
        right: -1vw;
        width: 50vw;
    }

    #hobbies {
        /* position: relative; */
        display: flex;
        flex-direction: column;
        align-items: center;
    }
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！