CODEWITHSUNDEEP
htmlcsssections
Daniel Manning
Daniel Manning

Reputation: 1

Sections not displaying underneath

I'm relatively new to coding and trying to create my WordPress home page in HTML & CSS, this is my home page https://danieljmanning.co.uk

I've added the nav bar and the home page but every time I try to add a section underneath this hero section it displays at the top of the page instead of underneath the hero section.

I expected my info section to display underneath the hero banner container the same as my home page on https://danieljmanning.co.uk

This is my HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>danieljmanning - WordPress Web Designer</title>
    <link rel="stylesheet" href="style.css">
    <meta name="description" content="Daniel Manning's Web Design, SEO optimisation and blog writing services. 
    Do you want to rank #1? Get In Touch Today!">
    <style>
        h1,h2,h3,h4,h5,h6,p{
            color: #fff;
        }
    </style>
</head>
    
<div class="container">
    <nav>
        <img src="/images/danieljmanning_logo.png" class="logo" alt="logo">
        <ul>
            <li><a href="#" aria-label="danieljmanning's home page"></a>Home</li>
            <li><a href="#" aria-label="More about who Daniel Manning is and more about his experience 
                in web design and SEO Optimisation"></a>About</li>
            <li><a href="#" aria-label="Daniel Manning's Portfolio Page"></a>Portfolio</li>
            <li><a href="#" aria-label="Web Design, SEO Optimisation and Monthly Support Services 
                with pricing and detail"></a>Services</li>
            <li><a href="#" aria-label="Blog Listing Page"></a>Blog</li>
        </ul>
        <button class="btn">Apply Now</button>
    </nav>

    <div class="content">
        <h1>DANIELJMANNING</h1>
        <h2>AFFORDABLE WORDPRESS WEB DESIGN</h3>
            <p>I am Daniel J Manning <span class="p-home">here to help you earn more</span> for your business with a 
                website! <span class="p-home">Scroll Down to See My Work.</span></p>
            <button class="portfolio-btn">PORTFOLIO</button>
            <button class="apply-btn">APPLY</button>
    </div>
</div>
<section class="info">
    <h1>Earn more with a website</h1>
    <p>Having a website gives you a forefront, a place where visitors can find you, giving them the opportunity to come 
        to your business.</p>
</section>
</body>
</html>

This is my CSS code:

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box; /*FindOutWhatthismeans*/
}

.container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    background-color: black;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    z-index: -100;
}

nav{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    border-bottom: 0.1px solid #303030;
}

.logo{
    width: 20%;
    cursor: pointer;
    padding-left: 40px;
    padding-top: 0px;
}

nav ul{
    list-style: none;
    width: 100%;
    text-align: right;
    padding-right: 20px;
}

nav ul li{
    display: inline-block;
    margin: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

nav ul li a{
    color: #fff;
    text-decoration: none;
}

.btn{
    display: flex;
    width: 190px;
    height: 55px;
    padding-top: 17px;
    padding-bottom: 17px;
    padding-left: 40px;
    padding-right: 40px;
    border: 0;
    outline: 0;
    border-radius: 0px;
    background: #fff;
    color: black;
    font-weight: 500;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.content{
    margin-top: 22%;
    color: #fff;
    max-width: 1000px;
    margin-left: 10%;
    height: 100vh;
}

.content h1{
    display: block;
    width: 100%;
    border-bottom: 1px solid #fff;
}

.content h2{
    padding-top: 20px;
    padding-bottom: 20px;
    color: rgb(47, 193, 255);
    font-size: 18px;
}

.content p{
    padding-bottom: 40px;
}

.p-home{
    font-weight: bold;
}

.home-btn{
    display: flex;
    width: 180px;
    height: 50px;
    padding-top: 17px;
    padding-bottom: 17px;
    padding-left: 40px;
    padding-right: 40px;
    border: 0;
    outline: 0;
    border-radius: 0px;
    background: #fff;
    color: black;
    font-weight: 500;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.portfolio-btn{
    display: inline-block;
    width: 180px;
    height: 50px;
    padding-top: 17px;
    padding-bottom: 17px;
    padding-left: 40px;
    padding-right: 40px;
    border: 1px;
    outline: 1px;
    border-radius: 0px;
    background: transparent;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    
}

.apply-btn{
    display: inline-block;
    width: 180px;
    height: 50px;
    padding-top: 17px;
    padding-bottom: 17px;
    padding-left: 40px;
    padding-right: 40px;
    border: 0;
    outline: 0;
    border-radius: 0px;
    background: transparent;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.info{
    margin-top: 100px;
}

Upvotes: 0

Views: 32

Answers (1)

Mohammed Alwedaei
Mohammed Alwedaei

Reputation: 751

If I get your question right. The problem is that you have added position: fixed; to the container, so this will result in pinning/fixing the container class relative to the viewport, thus the info div will be positioned underneath the container div.

I have fixed your code as follows:

  1. I have removed the positioning properties from .container class.
  2. I have added display: flex; and align-items: center; to maintain the original layout (you can change it if you want).
  3. I have added background-color: black; to the nav since it was moved outside the .container div (I don't think you really need it to be in the container div).
  4. I have fixed some HTML tags issues (some tags were not closed properly, check if the tags are closed as you wanted).

I suggest reading this MDN docs about positions:

Position docs

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
  /*FindOutWhatthismeans*/
}

.container {
  width: 100%;
  position: relative;
  min-height: 100vh;
  background-color: black;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  
  /* newly added to center the content */
  display: flex;
  align-items: center;
}

nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  border-bottom: 0.1px solid #303030;
  
  /* newly added since the nav was moved outside the container classs */
  background-color: black;
}

.logo {
  width: 20%;
  cursor: pointer;
  padding-left: 40px;
  padding-top: 0px;
}

nav ul {
  list-style: none;
  width: 100%;
  text-align: right;
  padding-right: 20px;
}

nav ul li {
  display: inline-block;
  margin: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

.btn {
  display: flex;
  width: 190px;
  height: 55px;
  padding-top: 17px;
  padding-bottom: 17px;
  padding-left: 40px;
  padding-right: 40px;
  border: 0;
  outline: 0;
  border-radius: 0px;
  background: #fff;
  color: black;
  font-weight: 500;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.content {
  color: #fff;
  max-width: 1000px;
  margin-left: 10%;
}

.content h1 {
  display: block;
  width: 100%;
  border-bottom: 1px solid #fff;
}

.content h2 {
  padding-top: 20px;
  padding-bottom: 20px;
  color: rgb(47, 193, 255);
  font-size: 18px;
}

.content p {
  padding-bottom: 40px;
}

.p-home {
  font-weight: bold;
}

.home-btn {
  display: flex;
  width: 180px;
  height: 50px;
  padding-top: 17px;
  padding-bottom: 17px;
  padding-left: 40px;
  padding-right: 40px;
  border: 0;
  outline: 0;
  border-radius: 0px;
  background: #fff;
  color: black;
  font-weight: 500;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.portfolio-btn {
  display: inline-block;
  width: 180px;
  height: 50px;
  padding-top: 17px;
  padding-bottom: 17px;
  padding-left: 40px;
  padding-right: 40px;
  border: 1px;
  outline: 1px;
  border-radius: 0px;
  background: transparent;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.apply-btn {
  display: inline-block;
  width: 180px;
  height: 50px;
  padding-top: 17px;
  padding-bottom: 17px;
  padding-left: 40px;
  padding-right: 40px;
  border: 0;
  outline: 0;
  border-radius: 0px;
  background: transparent;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.info {
  margin-top: 100px;
}
<nav>
  <img src="/images/danieljmanning_logo.png" class="logo" alt="logo">
  <ul>
    <li>
      <a href="#" aria-label="danieljmanning's home page"></a>Home</li>
    <li>
      <a href="#" aria-label="More about who Daniel Manning is and more about his experience 
                    in web design and SEO Optimisation"></a>About</li>
    <li>
      <a href="#" aria-label="Daniel Manning's Portfolio Page"></a>Portfolio</li>
    <li>
      <a href="#" aria-label="Web Design, SEO Optimisation and Monthly Support Services 
                    with pricing and detail"></a>Services</li>
    <li>
      <a href="#" aria-label="Blog Listing Page"></a>Blog</li>
  </ul>
  <button class="btn">Apply Now</button>
</nav>

<div class="container">
  <div class="content">
    <h1>DANIELJMANNING</h1>
    <h2>AFFORDABLE WORDPRESS WEB DESIGN</h3>
      <p>I am Daniel J Manning <span class="p-home">here to help you earn more</span> for your business with a website! <span class="p-home">Scroll Down to See My Work.</span></p>
      <button class="portfolio-btn">PORTFOLIO</button>
      <button class="apply-btn">APPLY</button>
  </div>
</div>

<section class="info">
  <h1>Earn more with a website</h1>
  <p>Having a website gives you a forefront, a place where visitors can find you, giving them the opportunity to come to your business.</p>
</section>

<h1>a website</h1>
<p>Having a website gives you a forefront, a place where visitors can find you, giving them the opportunity to come to your business.</p>
</section>

Upvotes: 0

Related Questions