网页顶部在导航和主体内容之间的白色条纹

huangapple
go评论59阅读模式
英文:

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

问题

在导航栏（Navigation）和主体之间有一条白色的条纹，我似乎找不到问题所在。似乎有些东西在轻微地向下推动网格，显示出白色的条纹。我也在这个网站上使用了Javascript，它不应该影响任何东西。

我已经尝试更改导航列表项（nav list items）的位置并添加了margin: 0，但似乎都没有起作用。

英文:

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.

答案1

得分: 0

你的解决方案很简单，在.nav类内。移除display属性。

.nav {
    width: 100%;
    height: 4.8vw;
    background-color: #0c4eab;
    top: 0;
    left: 0;
    padding: 0;
    margin: 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;
}

答案2

得分: 0

这是更改 nav 为 display: inline-block 的效果（但我无法确切理解为什么）。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
* {
    margin: 0;
    padding: 0;
}

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

main {
    height: 20vh;
    background-color: dodgerblue;
}

<!-- language: lang-html -->
<nav></nav><main id="main"></main>

<!-- end snippet -->

然而，你应该使用 Flexbox 来布局 nav 元素，而不是使用绝对定位。我不会为你完成所有工作，但这会让你有个起点。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
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;
}

<!-- language: lang-html -->
<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>

<!-- end snippet -->
英文:

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* {
    margin: 0;
    padding: 0;
}

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

main {
    height: 20vh;
    background-color: dodgerblue;
}

<!-- language: lang-html -->

&lt;nav&gt;&lt;/nav&gt;&lt;main id=&quot;main&quot;&gt;&lt;/main&gt;

<!-- end snippet -->

<br>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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

&lt;nav class=&quot;nav&quot;&gt;
  &lt;div id=&quot;name&quot;&gt;PNBHS Squash Academy&lt;/div&gt;
  &lt;ul id=&quot;buttons-nav&quot;&gt;
    &lt;li class =&#39;navbutton&#39; id=&quot;homebutton&quot;&gt;&lt;a href=&quot;Index.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li class =&#39;navbutton&#39; id=&quot;coachbutton&quot;&gt;&lt;a href=&quot;Coaching.html&quot;&gt;Coaching&lt;/a&gt;&lt;/li&gt;
    &lt;li class =&#39;navbutton&#39; id=&quot;registerbutton&quot;&gt;&lt;a href=&quot;Register.html&quot;&gt;Register&lt;/a&gt;&lt;/li&gt;
    &lt;li id=&quot;contactbutton&quot;&gt;&lt;a&gt;Contact&lt;/a&gt;&lt;img id=&#39;contactimg&#39;src=&quot;Img/Asset1.png&quot; alt=&quot;triangle&quot;&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;

&lt;main id=&quot;main&quot;&gt;&lt;/main&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月26日 08:51:38
  • 转载请务必保留本文链接：https://go.coder-hub.com/76552955.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定