-1

I am trying to build a personal website and I have been using the parallax scrolling effect from w3schools. I have a div for each of my sections, but there is a 20px gap between each div and I'm noth sure why. Any help would be amazing.

I replaced the parallax images with colors because I have the images saved locally and links might expire. Also I have jquery 3.3.1 but that probably wouldn't matter for this; I'm only using jquery to smooth scroll on anchor clicks.

CSS & HTML:

html, body {
    padding: 0;
    margin: 0 auto 0 auto;
    height: 100%;
}

#header {
    width: 100%;
    margin: 0px;
    padding: 12px 0px;
    float: left;
    background: rgba(238, 238, 238, 0.5);
    position: fixed;
    font-family: Arial;
    font-size: 20px;
}
#header-right {
 float: right;
}
#header a {
    vertical-align: middle;
    margin: 15px;
    text-decoration: none;
    color: #000000;
}
#header a:hover {
    color: #909090;
}

.parallax-window {
    min-height: 400px;
    background: transparent;
}

.content {
    padding-top: 60px;
    display: block;

    background-image: url('kalle-kortelainen-242413-unsplash.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#intro {
    min-height: 800px;
    padding-top: 60px;
    background-color: #ef69a1;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#about {
    min-height: 800px;
    padding-top: 60px;
    background-color: #82ff9e;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#projects {
    min-height: 800px;
    padding-top: 60px;
    background-color: #2092e4;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#contact {
    min-height: 800px;
    padding-top: 60px;
    background-color: #dfee80;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="author" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="test.css" rel="stylesheet">
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>

<body>
  <!-- Script for smooth scrolling on anchor link click -->
  <script type="text/javascript">
    $(document).ready(function() {
      var height = 0 // Dist to not travel so header doesn't cut off section on scroll
      $(document).on('click', 'a[href^="#"]', function (event) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: $($.attr(this, 'href')).offset().top-height
        }, 500);
      });
    });
  </script>

  <div id="header">
    <a href="#intro">Bob</a>
    <div id="header-right">
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
      <a href="Stella_Lu_Resume.pdf" target="_blank">Resume</a>
    </div>
  </div>

  
  <div id="intro">
    aksdhgflha
  </div>

  <div id="about">
    <h2>About</h2>
  </div>
    
  <div id="projects">
    <h2>Projects</h2>
  </div>
    
  <div id="contact">
    <h2>Contact</h2>
  </div>  
</body>
</html>
Ben Wu
  • 67
  • 1
  • 6
  • You need to have a look into collapsing margins - that's what is causing your gap (the bottom margin from your h2 is collapsing) you can fix it by using 1px bottom padding in your divs: `body > div { padding-bottom:1px; }` – Pete May 24 '18 at 08:14

2 Answers2

0

By Default h2 tag take some margin. Just set that margin 0 to resolve this issue. check updated snippet below..

html, body {
    padding: 0;
    margin: 0 auto 0 auto;
    height: 100%;
}

#header {
    width: 100%;
    margin: 0px;
    padding: 12px 0px;
    float: left;
    background: rgba(238, 238, 238, 0.5);
    position: fixed;
    font-family: Arial;
    font-size: 20px;
}
#header-right {
 float: right;
}
#header a {
    vertical-align: middle;
    margin: 15px;
    text-decoration: none;
    color: #000000;
}
#header a:hover {
    color: #909090;
}

.parallax-window {
    min-height: 400px;
    background: transparent;
}

.content {
    padding-top: 60px;
    display: block;

    background-image: url('kalle-kortelainen-242413-unsplash.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#intro {
    min-height: 800px;
    padding-top: 60px;
    background-color: #ef69a1;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#about {
    min-height: 800px;
    padding-top: 60px;
    background-color: #82ff9e;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#projects {
    min-height: 800px;
    padding-top: 60px;
    background-color: #2092e4;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#contact {
    min-height: 800px;
    padding-top: 60px;
    background-color: #dfee80;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

h2 {
    margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Script for smooth scrolling on anchor link click -->
  <script type="text/javascript">
    $(document).ready(function() {
      var height = 0 // Dist to not travel so header doesn't cut off section on scroll
      $(document).on('click', 'a[href^="#"]', function (event) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: $($.attr(this, 'href')).offset().top-height
        }, 500);
      });
    });
  </script>

  <div id="header">
    <a href="#intro">Bob</a>
    <div id="header-right">
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
      <a href="Stella_Lu_Resume.pdf" target="_blank">Resume</a>
    </div>
  </div>

  
  <div id="intro">
    aksdhgflha
  </div>

  <div id="about">
    <h2>About</h2>
  </div>
    
  <div id="projects">
    <h2>Projects</h2>
  </div>
    
  <div id="contact">
    <h2>Contact</h2>
  </div>
Super User
  • 9,448
  • 3
  • 31
  • 47
0

you can also use 

body > div {
    float: left;
    width: 100%;
}

to fix this space issue

html, body {
    padding: 0;
    margin: 0 auto 0 auto;
    height: 100%;
}
body > div {
    float: left;
    width: 100%;
}

#header {
    width: 100%;
    margin: 0px;
    padding: 12px 0px;
    float: left;
    background: rgba(238, 238, 238, 0.5);
    position: fixed;
    font-family: Arial;
    font-size: 20px;
}
#header-right {
 float: right;
}
#header a {
    vertical-align: middle;
    margin: 15px;
    text-decoration: none;
    color: #000000;
}
#header a:hover {
    color: #909090;
}

.parallax-window {
    min-height: 400px;
    background: transparent;
}

.content {
    padding-top: 60px;
    display: block;

    background-image: url('kalle-kortelainen-242413-unsplash.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#intro {
    min-height: 800px;
    padding-top: 60px;
    background-color: #ef69a1;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#about {
    min-height: 800px;
    padding-top: 60px;
    background-color: #82ff9e;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#projects {
    min-height: 800px;
    padding-top: 60px;
    background-color: #2092e4;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#contact {
    min-height: 800px;
    padding-top: 60px;
    background-color: #dfee80;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="author" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="test.css" rel="stylesheet">
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>

<body>
  <!-- Script for smooth scrolling on anchor link click -->
  <script type="text/javascript">
    $(document).ready(function() {
      var height = 0 // Dist to not travel so header doesn't cut off section on scroll
      $(document).on('click', 'a[href^="#"]', function (event) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: $($.attr(this, 'href')).offset().top-height
        }, 500);
      });
    });
  </script>

  <div id="header">
    <a href="#intro">Bob</a>
    <div id="header-right">
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
      <a href="Stella_Lu_Resume.pdf" target="_blank">Resume</a>
    </div>
  </div>

  
  <div id="intro">
    aksdhgflha
  </div>

  <div id="about">
    <h2>About</h2>
  </div>
    
  <div id="projects">
    <h2>Projects</h2>
  </div>
    
  <div id="contact">
    <h2>Contact</h2>
  </div>  
</body>
</html>
Rahul
  • 4,294
  • 1
  • 10
  • 12