The next section of the page always appears on top of the first one - CSS

Chuck
February 3, 2023
196 views
1 vote
2 Answers

Creating a simple product landing page, I’m done with the first part of the webpage. When I try to write a new section for "Why fly with us" that ideally, a user would scroll down to from the first part, and every new element appears on top of the first part.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.nav-container {
  height: 70px;
  background-color: rgb(0, 221, 221);
}

.navbar {
  display: grid;
  grid-template-columns: 0.2fr auto 1fr;
  align-items: center;
  height: 80px;
  width: 90%;
  max-width: 1720px;
  margin: 0 auto;
}

#navbar-logo {
  color: white;
  justify-self: start;

}

#navbar-logo {
  cursor: pointer
}

.nav-menu {
  display: grid;
  grid-template-columns: repeat(5, auto);
  list-style: none;
  font-size: 1.2rem;
  text-align: center;
  width: 50%;
  justify-self: end;
}

.nav-links {
  color: white
}

.nav-links:hover {
  color: #f9e506;
  transition: all 0.3s ease-out;
}

.nav-links-btn {
  background-color: #f9e506;
  padding: 6px 16px;
  border-radius: 4px;
}

.nav-links-btn:hover {
  background-color: transparent;
  color: white;
  padding: 5px 15px;
  border-radius: 4px;
  border: solid 1px #f9e506;
  transition: all 0.3s ease-out;


}

.container {
  position: fixed;
  top: 38%;
  left: 32%;
  text-align: center;
}

h1 {
  color: white;
  font-size: 5rem;
  margin: 0 0 1rem;

  @media (max-width: $bp-s) {
    font-size: 2rem;
  }
}

h2 {
  color: white;
  font-weight: 300;
  font-size: 2.2rem;
  margin: 0 0 1rem;

  @media (max-width: $bp-s) {
    font-size: 1.5rem;
  }
}

h3 {
  color: white;
  font-weight: 300;
  font-size: 2.5rem;
  margin: 0 0 1rem;

  @media (max-width: $bp-s) {
    font-size: 1.5rem;
  }
}

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}


body {
  width: 100%;
  height: 100%;
  background-image: url("61766.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Heebo', sans-serif;
  font-size: 100%;
  line-height: 1.45;

}

.btn {
  width: 300px;
  height: 80px;
  border: none;
  color: aqua;
  background-color: #04d9ff;
  border-radius: 4px;
  box-shadow: inset 0 0 0 0 #f9e506;
  transition: ease-out 0.3s;
  font-size: 2rem;
  outline: none;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
  color: white;
}

.btn:hover {
  box-shadow: inset 300px 0 0 0 #f9e506;
  cursor: pointer;
  color: #000;
}

.description {
  background-color: aliceblue;
}

<!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>iTravel Agency</title>
    <link rel="stylesheet" href="style.css"/>
    <script src="script.js"></script>
  </head>
  <body>
    <header>
      <div class="nav-container">
        <nav class="navbar">
          <h3 id="navbar-logo">iTravel</h3>
          <div class="menu-toggle" id="mobile-menu">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
          </div>
          <ul class="nav-menu">
            <li><a href="#" class="nav-links">Home</a></li>
            <li><a href="#" class="nav-links">Flights</a></li>
            <li><a href="#" class="nav-links">Hotels</a></li>
            <li><a href="#" class="nav-links">My Bookings</a></li>
            <li><a href="#" class="nav-links nav-links-btn">Log In</a></li>
          </ul>
          </nav>
        </div>
      <div class="container">
        <h1>iTravel</h1>
        <h2>Travelling has never been easier</h2>
        <button class="btn"><a href="#">Book Flights Now</a></button>
      </div>
    </header>
    
    <div>
    <section class="description">
      <h4>Why fly with us?</h4>
      <p>A travel agency like ours offers a one-stop solution for all your travel needs. From finding the perfect destination to planning..
         </p>
      </section>
    </div>
  </body>
</html>

I thought I might’ve failed to close a HTML tag but I’ve checked thoroughly and that’s not the case. I’ve tried putting the next part in a div, I’ve also tried using the section tag but both attempts yielded the same results. I inspected the CSS, especially the html and body selectors, and even tweaked some of the values but to no avail. I suspect I’m missing a very minute detail and would appreciate a keener more experienced eye could help.

Tags: css html

Answers

- QuentinAlbert
- February 3, 2023 at 2:21 pm
- 0 votes
0
The main problem here is the positioning used for the first element (.container). With position: absolute & position: fixed the elements are removed from the normal flow of the document.

In other words they take no space during layout calculation and therefore are ignored while placing elements that are in the normal document flow.

Login or Signup to reply.

I think this might be what you were trying to accomplish. Basically, if you wrap each of your "sections" in an absolute positioned container (I used section) and then within each section have a fixed position container, you can achieve a parallax scroll effect. Assuming each section is 100vh, the trick is that each container needs to have its top property set to 100vh + the top property of the previous section (so the first one is 0, second is 100vh, third is 200vh…). Additionally, each successive section needs a higher z-index.

Run the snippet below and open it in full screen mode to test it out.

/* GLOBAL STYLES */

:root {
 --navBarHeight: 3.5rem;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
  background-image: url("61766.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Heebo', sans-serif;
  font-size: 100%;
  line-height: 1.45;
}

h1 {
  font-size: 5rem;
}

h2 {
  font-weight: 300;
  font-size: 2.2rem;
}

h3 {
  font-weight: 300;
  font-size: 2.5rem;
}

a {
  color: inherit;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
  color: white;
}

/* NAVBAR STYLES */

.nav-container {
  color: white;
  background-color: rgb(0, 221, 221);
  position: fixed;
  width: 100%;
  z-index: 1000;
  height: var(--navBarHeight);
  padding: 0 1rem;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#navbar-logo {
  cursor: pointer;
}

.nav-menu {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: .5rem;
}

.nav-links:hover {
  color: #f9e506;
  transition: all 0.3s ease-out;
}

.nav-links-btn {
  background-color: #f9e506;
  padding: 6px 16px;
  border-radius: 4px;
}

.nav-links-btn:hover {
  background-color: transparent;
  color: white;
  padding: 5px 15px;
  border-radius: 4px;
  border: solid 1px #f9e506;
  transition: all 0.3s ease-out;
}

/* MAIN STYLES: PARALLAX SECTIONS */

main {
  position: relative;
}

section {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  clip: rect(0, auto, auto, 0);
  padding: 1rem;
  box-shadow: inset 0 1px 2rem hsl(0 0% 0% / .05);
  background-color: white;
}

.fixed {
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: calc(1rem + var(--navBarHeight));
}

section:nth-child(1) {
  top: 0;
  z-index: 1;
}

section:nth-child(2) {
  top: 100vh;
  z-index: 2;
}

section:nth-child(3) {
  top: 200vh;
  z-index: 3;
}

section:nth-child(4) {
  top: 300vh;
  z-index: 4;
}

.booknow {
  background-color: white;
}

.description {
  background-color: lightcyan;
}

.findDeals {
  background-color: white;
}

.explore {
  background-color: lightyellow;
}

.btn {
  width: 300px;
  height: 80px;
  border: none;
  color: aqua;
  background-color: #04d9ff;
  border-radius: 4px;
  box-shadow: inset 0 0 0 0 #f9e506;
  transition: ease-out 0.3s;
  font-size: 2rem;
  outline: none;
}

.btn:hover {
  box-shadow: inset 300px 0 0 0 #f9e506;
  cursor: pointer;
  color: #000;
}

<header>
    <div class="nav-container">
      <nav class="navbar">
        <h3 id="navbar-logo">iTravel</h3>
        <div class="menu-toggle" id="mobile-menu">
          <span class="bar"></span>
          <span class="bar"></span>
          <span class="bar"></span>
        </div>
        <ul class="nav-menu">
          <li><a href="#" class="nav-links">Home</a></li>
          <li><a href="#" class="nav-links">Flights</a></li>
          <li><a href="#" class="nav-links">Hotels</a></li>
          <li><a href="#" class="nav-links">My Bookings</a></li>
          <li><a href="#" class="nav-links nav-links-btn">Log In</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main>
    <section class="booknow">
      <div class="fixed">
        <h1>iTravel</h1>
        <h2>Travelling has never been easier</h2>
        <button class="btn"><a href="#">Book Flights Now</a></button>
      </div>
    </section>
    <section class="description">
      <div class="fixed">
        <h3>Why fly with us?</h3>
        <p>A travel agency like ours offers a one-stop solution for all your travel needs. From finding the perfect destination to planning...</p>
      </div>
    </section>
    <section class="findDeals">
     <div class="fixed">
       <h3>Check out these deals!</h3>
     </div>
    </section>
    <section class="explore">
     <div class="fixed">
       <h3>Explore destinations</h3>
     </div>
    </section>
  </main>

Please signup or login to give your own answer.

Click here to cancel reply.

The next section of the page always appears on top of the first one – CSS

Answers