Question 194219 in Html Question posted in
Some basic documentation can be found here.

Html – White strip at the top of webpage between Navigation and Main Body

There is a white strip between the Navigation and the main body I cant seem to find the problem. there seems to be something pushing the grid down slightly showing the white strip, I am also using Javascript on this website, it shouldn’t affect anything.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-3.6.0.js"></script>
    <script src="Javascript/Index.js"></script> 
    <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>Squash Academy</title>
    <link rel="stylesheet" href="Css/Stylesheet.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
    <nav class="nav">
        <div id="name">PNBHS Squash Academy</div>
        <ul id="buttons-nav">
            <li class ='navbutton' id="homebutton"><a href="Index.html">Home</a></li>
            <li class ='navbutton' id="coachbutton"><a href="Coaching.html">Coaching</a></li>
            <li class ='navbutton' id="registerbutton"><a href="Register.html">Register</a></li>
            <li id="contactbutton"><a>Contact</a><img id='contactimg'src="Img/Asset1.png" alt="triangle"></li>
            </div> 
        </ul>
        <div id="mySidebar" class="sidebar">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
            <a href="Index.html">Home</a>
            <a href="Coaching.html">Coaching</a>
            <a href="Register.html">Register</a>

      </div>
      <div id="mainish">
          <button class="openbtn" onclick="openNav()">☰</button>  
          </div>
    </nav>
    <main id="main">
        <body>
            <div class="grid-container-index">
                <div class="grid-item-index">
                    <h1 id="titleText">PNBHS</h1>
                    <h3 id="subtitleText">Squash Academy</h3>
                    <div id="contactButtonMain">Contact<img id='contactimg'src="Img/Asset1.png" alt="triangle"></div>
                </div>
                <div class="grid-item-index"></div>
                <div class="grid-item-index"><img src="Img/Index image.png" id="indeximg"></div>
                <div class="grid-item-index"></div>
                <div class="grid-item-index"></div>
                <div class="grid-item-index"></div>
                <div class="grid-item-index"></div>
                <div class="grid-item-index"><h3>Why Squash?</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius lacus a nisi porta eleifend. Etiam augue purus, faucibus sed mauris nec, pulvinar interdum mauris. Praesent sit amet arcu lobortis, cursus augue nec, finibus felis. Integer sit amet justo pharetra, scelerisque magna volutpat, blandit nibh. Vestibulum egestas tincidunt eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed in porta tortor.</p></div>
                <div class="grid-item-index"><h3>About Squash at PNBHS</h3><p>Etiam dictum augue ut lorem varius interdum. Nullam ullamcorper magna sed nunc condimentum fringilla. In cursus tempus dictum. Donec in arcu ut magna feugiat convallis congue sed tortor. Proin lacinia eros ac mi varius dictum. Donec scelerisque consequat turpis, vel ornare quam luctus sit amet. Maecenas pretium vehicula arcu nec auctor. Phasellus et venenatis urna, ac bibendum tellus. Phasellus vitae sem nec eros porta vestibulum. Donec at vulputate lorem, ut convallis velit. Morbi vel euismod sapien. Proin viverra dui in arcu aliquam congue. Maecenas at quam tempor, feugiat diam nec, porta est. Proin congue, nisl sed commodo tincidunt, ipsum diam imperdiet nulla, ut euismod ex elit quis felis.</p></div>
            </div>
        </body>
    </main>
</body>
  
<!--<canvas id="myCanvas" width="900" height="500" style="border:1px solid transparent"></canvas>
-->



</body>
</html>

body{
    margin: 0;
}
/* Nav*/
.nav{
    width: 100%;
    height: 4.8vw;
    background-color: #0c4eab;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    display: inline-block;
}

#name{
    position: absolute;
    color: white;
    font-family: 'Raleway';
    font-size: 2.4vw;
    top: 0.8vw;
    left: 3vw;
    width: 35vw;
    margin: 0;
    padding: 0;
}

nav ul{
    list-style-type: none;
    margin: 0;
    margin-right: 0vw;
    margin-bottom: 0;
    padding: 0;
    float: right;
    width: 45vw;
}

nav li{
    display: inline-block;
    padding: 1.5vw;
    margin: 0;
    width: 5vw;
    text-align: center;
    color: white;
    height: 1.4vw;
    font-family: 'Raleway';
    position:initial;
}
nav ul li:hover {
  color: #000;
}

nav ul li:last-child {
  margin-right: 20px;
}

nav ul li.active {
  color: #000;
}

nav li a{
    color:white;
    padding: 10px 12px;
    text-decoration: none;
  margin: 0;
}
.navbutton{
    border: #0c4eab solid;
    background-color: #0c4eab;
}
#contactbutton{
    background-color: #062857;
    border-radius: 50px;
    width: 6vw;
}

#contactimg{
    width: 10px;
    height: 10px;

}
/*End NAv*/
/*Side Bar*/
#mySidebar {
    height: 30vw;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    border-radius: 0, 20px,0,0;
  }
  .sidebar a{
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  .sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  .openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
    position:fixed; top:1vw; right:1vw;
    
  }
  
  .openbtn:hover {
    background-color: #444;
  }
  #mainish {
    display: none;    
}
/*ENd Sidebar*/

/*Main*/
.main{
    background-color: #030821;
    height: 800px;
}
.grid-container-index{
    display: grid;
    grid-template-columns: 31vw 31vw 31vw; /* Two columns with equal width */
    grid-template-rows: auto auto auto; /* Three rows with automatic height */
    gap: 0px; /* Gap between grid items */
    background-color: #030821;
    height: 1000px;
    position: relative;
    font-family: 'Raleway';
}

.grid-item-index {
    background-color: #030821; /* Background color for grid items */
    padding: 20px; /* Padding for grid items */
    color: white;
}

#titleText {
  float: right;
  position: relative;
  top: 200px;
}
#subtitleText {
  float: right;
  position: relative;
  top: 260px;
  left: 150px;
}
#indeximg {
  width: 600px;
  float: right;
}
#contactButtonMain {
  background-color: #0f0982;
  border-radius: 50px;
  width: 6vw;
  text-align: center;
  position: relative;
  top: 340px;
  left: 350px;
}
@media only screen and (max-width: 1535px) {
    nav ul{
        display: none;
    }
    #mainish {
        display: inline-block;
        
    }
}

.grid-container-register{
    display: grid;
    grid-template-columns: 31vw 31vw; /* Two columns with equal width */
    grid-template-rows: auto auto; /* Three rows with automatic height */
    gap: 10px; /* Gap between grid items */
    background-color: #030821;
    height: 1000px;
    position: relative;
}

.grid-item-register {
    background-color: #030821; /* Background color for grid items */
    padding: 20px; /* Padding for grid items */
    color: white;
}
/* Register*/
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
  background-color: #030821;
  padding: 20px;
  border-radius: 10px;
  position: relative;
}

.message {
  color: rgba(88, 87, 87, 0.822);
  font-size: 14px;
}

.flex {
  display: flex;
  width: 100%;
  gap: 6px;
}

.form label {
  position: relative;
  background-color: #030821;
}
.form input {
    color: #fff;
}
.form textarea {
    color: #fff;
}
.form label .input {
  width: 100%;
  padding: 10px 10px 20px 10px;
  outline: 0;
  border: 1px solid rgba(105, 105, 105, 0.397);
  border-radius: 5px;
  background-color: #030821 ;
}

.form label .input + span {
  position: absolute;
  left: 10px;
  top: 15px;
  color: #fff;
  font-size: 0.9em;
  cursor: text;
  transition: 0.3s ease;
}

.form label .input:placeholder-shown + span {
  top: 15px;
  font-size: 0.9em;
}

.form label .input:focus + span,.form label .input:valid + span {
  top: 30px;
  font-size: 0.7em;
  font-weight: 600;
}

.form label .input:valid + span {
  color: green;
}

.input01 {
  width: 100%;
  padding: 10px 10px 20px 10px;
  outline: 0;
  border: 1px solid rgba(105, 105, 105, 0.397);
  border-radius: 5px;
  background-color: #030821;

}

.form label .input01 + span {
  position: absolute;
  left: 10px;
  top: 50px;
  color: #fff;
  font-size: 0.9em;
  cursor: text;
  transition: 0.3s ease;
}

.form label .input01:placeholder-shown + span {
  top: 40px;
  font-size: 0.9em;
}

.form label .input01:focus + span,.form label .input01:valid + span {
  top: 50px;
  font-size: 0.7em;
  font-weight: 600;
}

.form label .input01:valid + span {
  color: green;
}

.fancy {
  background-color: transparent;
  border: 2px solid #cacaca;
  border-radius: 0px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: 390;
  letter-spacing: 2px;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 8px 30px;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition: all 0.3s ease-in-out;
  user-select: none;
  font-size: 13px;
}

.fancy::before {
  content: " ";
  width: 1.7rem;
  height: 2px;
  background: #cacaca;
  top: 50%;
  left: 1.5em;
  position: absolute;
  transform: translateY(-50%);
  transform: translateX(230%);
  transform-origin: center;
  transition: background 0.3s linear, width 0.3s linear;
}

.fancy .text {
  font-size: 1.125em;
  line-height: 1.33333em;
  padding-left: 2em;
  display: block;
  text-align: left;
  transition: all 0.3s ease-in-out;
  text-transform: lowercase;
  text-decoration: none;
  color: #818181;
  transform: translateX(30%);
}

.fancy .top-key {
  height: 2px;
  width: 1.5625rem;
  top: -2px;
  left: 0.625rem;
  position: absolute;
  background: white;
  transition: width 0.5s ease-out, left 0.3s ease-out;
}

.fancy .bottom-key-1 {
  height: 2px;
  width: 1.5625rem;
  right: 1.875rem;
  bottom: -2px;
  position: absolute;
  background: white;
  transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy .bottom-key-2 {
  height: 2px;
  width: 0.625rem;
  right: 0.625rem;
  bottom: -2px;
  position: absolute;
  background: white;
  transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy:hover {
  color: white;
  background: #030821;
}

.fancy:hover::before {
  width: 1.5rem;
  background: white;
}

.fancy:hover .text {
  color: white;
  padding-left: 1.5em;
}

.fancy:hover .top-key {
  left: -2px;
  width: 0px;
}

.fancy:hover .bottom-key-1,
 .fancy:hover .bottom-key-2 {
  right: 0;
  width: 0;
}

I have tried changing the Position of the nav list items and add margin 0 but neither of these seemed to work.

Tags:

2

Answers


  1. 0

    Your solution is simple, inside the .nav class. Remove the display property.

    .nav{
    width: 100%;
    height: 4.8vw;
    background-color: #0c4eab;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
}
    Login or Signup to reply.
  2. 0

    This is an effect of changing nav to display: inline-block (but I couldn’t figure out exactly why.)

    * {
    margin: 0;
    padding: 0;
}

nav {
    display: inline-block;
    width: 100%;
    height: 5vw;
    background-color: #0c4eab;
}

main {
    height: 20vh;
    background-color: dodgerblue;
}
    <nav></nav><main id="main"></main>

    However, you should be using Flexbox for the nav elements instead of absolute positioning. I’m not going to do all the work for you but this will get you started.

    body {
    margin: 0;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #0c4eab;
    padding: 1em;
}

#name {
    color: white;
    font-size: 2.4vw;
}

nav ul {
    display: flex;
    list-style-type: none;
    padding: 0;
}

nav li a {
    color:white;
    padding: 10px 12px;
    text-decoration: none;
}

#contactbutton {
    background-color: #062857;
    border-radius: 50px;
}

main {
    height: 90vh;
    background-color: #030821;
}
    <nav class="nav">
  <div id="name">PNBHS Squash Academy</div>
  <ul id="buttons-nav">
    <li class ='navbutton' id="homebutton"><a href="Index.html">Home</a></li>
    <li class ='navbutton' id="coachbutton"><a href="Coaching.html">Coaching</a></li>
    <li class ='navbutton' id="registerbutton"><a href="Register.html">Register</a></li>
    <li id="contactbutton"><a>Contact</a><img id='contactimg'src="Img/Asset1.png" alt="triangle"></li>
  </ul>
</nav>

<main id="main"></main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search