Impossible de positionner correctement une section en HTML, CSS
Joseph Gordon-Levitt
Joseph Gordon-Levitt 2023-09-10 10:29:17
0
1
469

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; }
      I'm Shardul Bhatkar       

About Me

My Hobbies

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit vel sit quasi quas. Unde laboriosam est eveniet modi culpa velit.

Joseph Gordon-Levitt
Joseph Gordon-Levitt

répondre à tous (1)
P粉421119778

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; }
    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!