stackoom
  简体   繁体   中英

Gap between nav bar and background-image?

 原文  2015-10-29 23:38:05  7   1    html/ css

Question

I have a gap between the bottom of my navigation bar and my background image. I have had a look at my code but I cant seem to fix it or find out what is wrong. Any help?

HTML: 

<body>
<div class="landingContent">
        <input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">

    <nav id="middle" class="menu">
                    <li><a href="#" id="logo-nav"> < /> </a></li>
        <ul>
            <li><a href="#" id="active">Home</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Store</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <label for="navbar-checkbox" class="navbar-handle"></label>
    </nav>

    <div class="content-main">
        <h1>System</h1>
        <p>"A new look into technology"</p>
        <center>
        <div class="first"><button class="button" id="btn-nw" type="button" onclick="smoothScroll(document.getElementById('second'))"><i class="fa fa-angle-double-down"></i></button></div>
    </center>
    </div>
</div>
<div class="otherContent">
    <h1 id="second">Services</h1>
    <br>

</div>





</body>

CSS: (I posted it all because I am not sure what is wrong) 

*, body, html{
  margin: 0px;
  padding: 0px;
}
html {
    min-height: 100%;
    overflow-x: hidden;
}
h1 { 
    margin: 0;
    padding: 0;
}

.landingContent{
  width:100vw;
  height:100vh;
  background: #FFFFFF;
  background-image: url('../img/BG-2.jpg');
  background-size: cover;
  }
.otherContent{
  margin: 0px;
  width:100vw;
  height:1000px;
  background: #FFFFFF;
  text-align: center;

  }


.content-main p, h1{
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    color: #F2F2F2;
}
.content-main h1{
    font-size: 120px;
}
.content-main p{
  font-size: 20px;
  margin-top: 20px;
}
.content-main{
  position: relative;
  margin-top: 80px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}
.button{
  color: #000000;
  font-size: 60px;
  background-color: transparent;
  margin-left: auto;
  margin-right: auto;
  border: none;
  padding: 10px;
  margin-top: 20px;
  margin: 5px;
}
.button:hover{
  opacity: 0.9;
}

button:focus {outline:0;}
/*Navigation CSS*/
#logo-nav {
    float: left;
    font-family: 'Ubuntu', sans-serif;
    font-size: 30px;
    color: #FFFFFF;
}


@media (min-width: 900px) {
  .menu {
    font-size: 1.2em;
  }
}
.menu {
  padding: 0.5em;
  background: #323131;
  min-height: 2em;
  line-height: 1em;
  width: 100%;
}
.menu a{
    color: #5D5A5A;
    font-family: 'Oswald', sans-serif;
    text-decoration: none;
}
.menu a:hover{
    color: #FFFFFF;
}
#active{
    color: #FFFFFF;
}
.menu > ul {
  transition: max-height 0.25s linear;
}
.menu ul {
  margin: 0;
  padding: 0;
  float: right;
}
.menu li {
  transition: visibility .25s linear;
  display: inline-block;
  padding: .45em 1.0em;
  margin: 0 .3em;
  position: relative;
}

@media (min-width: 651px) {
  .menu li ul {
    display: none;
    position: absolute;
    top: 100%;
    margin-top: 1px;
    left: -1px;
    right: -1px;
  }
  .menu li:hover ul {
    display: block;
  }
  .menu li li {
    margin: -1px 0 0 0;
    box-sizing: border-box;
    width: 100%;
  }
}
@media (max-width: 650px) {
  .content-main{
    margin-top: 80px;
  }
  #logo-nav{
    visibility: visible;
  }
  .content-main h1{
    font-size: 45px;
  }
  .menu > ul {
    max-height: 0;
    overflow: hidden;
    margin: 0 3.5em 0 1em;
  }
  .menu li {
    visibility: hidden;
    display: block;
    padding: 0.5em 0.6em;
    border: none;  }
  .menu li ul {
    margin-top: 0.5em;
    border-left: 1px solid #000;
  }
  .menu .navbar-handle {
    display: block;
  }
  #navbar-checkbox:checked + .menu ul {
    max-height: 300px;
  }
  #navbar-checkbox:checked + .menu li {
    visibility: visible;
  }
  #navbar-checkbox:checked + .menu .navbar-handle,
  #navbar-checkbox:checked + .menu .navbar-handle:after,
  #navbar-checkbox:checked + .menu .navbar-handle:before {
    border-color: #aaa;
  }
}
.navbar-checkbox {
  display: none;
}
.navbar-handle {
  display: none;
  cursor: pointer;
  position: relative;
  font-size: 45px;
  padding: .5em 0;
  height: 0;
  width: 1.66666667em;
  border-top: 0.13333333em solid;
  margin-right: 10px;
}
.navbar-handle:before,
.navbar-handle:after {
  position: absolute;
  left: 0;
  right: 0;
  content: ' ';
  border-top: 0.13333333em solid;
}
.navbar-handle:before {
  top: 0.37777778em;
}
.navbar-handle:after {
  top: 0.88888889em;
}
.menu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.menu .navbar-handle {
  position: absolute;
  font-size: 1.2em;
  top: 0.7em;
  right: 12px;
  z-index: 10;
  color: white;
}

}
}

1 answers

solution1
 0  2015-10-29 23:50:05

You simply added too much margin in your content-main class. 

 *, body, html{ margin: 0px; padding: 0px; } html { min-height: 100%; overflow-x: hidden; } h1 { margin: 0; padding: 0; } .landingContent{ width:100vw; height:100vh; background: #FFFFFF; background-image: url('../img/BG-2.jpg'); background-size: cover; } .otherContent{ margin: 0px; width:100vw; height:1000px; background: #FFFFFF; text-align: center; } .content-main p, h1{ text-align: center; font-family: 'Ubuntu', sans-serif; color: #F2F2F2; } .content-main h1{ font-size: 120px; } .content-main p{ font-size: 20px; margin-top: 20px; } .content-main{ position: relative; margin-top: 58px; /*Your problem was here*/ top: 50%; left: 50%; transform: translate(-50%, -50%); } .button{ color: #000000; font-size: 60px; background-color: transparent; margin-left: auto; margin-right: auto; border: none; padding: 10px; margin-top: 20px; margin: 5px; } .button:hover{ opacity: 0.9; } button:focus {outline:0;} /*Navigation CSS*/ #logo-nav { float: left; font-family: 'Ubuntu', sans-serif; font-size: 30px; color: #FFFFFF; } @media (min-width: 900px) { .menu { font-size: 1.2em; } } .menu { padding: 0.5em; background: #323131; min-height: 2em; line-height: 1em; width: 100%; } .menu a{ color: #5D5A5A; font-family: 'Oswald', sans-serif; text-decoration: none; } .menu a:hover{ color: #FFFFFF; } #active{ color: #FFFFFF; } .menu > ul { transition: max-height 0.25s linear; } .menu ul { margin: 0; padding: 0; float: right; } .menu li { transition: visibility .25s linear; display: inline-block; padding: .45em 1.0em; margin: 0 .3em; position: relative; } @media (min-width: 651px) { .menu li ul { display: none; position: absolute; top: 100%; margin-top: 1px; left: -1px; right: -1px; } .menu li:hover ul { display: block; } .menu li li { margin: -1px 0 0 0; box-sizing: border-box; width: 100%; } } @media (max-width: 720px) { /* I changed this, too */ .content-main{ margin-top: 80px; } #logo-nav{ visibility: visible; } .content-main h1{ font-size: 45px; } .menu > ul { max-height: 0; overflow: hidden; margin: 0 3.5em 0 1em; } .menu li { visibility: hidden; display: block; padding: 0.5em 0.6em; border: none; } .menu li ul { margin-top: 0.5em; border-left: 1px solid #000; } .menu .navbar-handle { display: block; } #navbar-checkbox:checked + .menu ul { max-height: 300px; } #navbar-checkbox:checked + .menu li { visibility: visible; } #navbar-checkbox:checked + .menu .navbar-handle, #navbar-checkbox:checked + .menu .navbar-handle:after, #navbar-checkbox:checked + .menu .navbar-handle:before { border-color: #aaa; } } .navbar-checkbox { display: none; } .navbar-handle { display: none; cursor: pointer; position: relative; font-size: 45px; padding: .5em 0; height: 0; width: 1.66666667em; border-top: 0.13333333em solid; margin-right: 10px; } .navbar-handle:before, .navbar-handle:after { position: absolute; left: 0; right: 0; content: ' '; border-top: 0.13333333em solid; } .navbar-handle:before { top: 0.37777778em; } .navbar-handle:after { top: 0.88888889em; } .menu { position: absolute; top: 0; left: 0; right: 0; } .menu .navbar-handle { position: absolute; font-size: 1.2em; top: 0.7em; right: 12px; z-index: 10; color: white; } } } 
 <div class="landingContent"> <input type="checkbox" id="navbar-checkbox" class="navbar-checkbox"> <nav id="middle" class="menu"> <li><a href="#" id="logo-nav"> < /> </a></li> <ul> <li><a href="#" id="active">Home</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Store</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <label for="navbar-checkbox" class="navbar-handle"></label> </nav> <div class="content-main"> <h1>System</h1> <p>"A new look into technology"</p> <center> <div class="first"><button class="button" id="btn-nw" type="button" onclick="smoothScroll(document.getElementById('second'))"><i class="fa fa-angle-double-down"></i></button></div> </center> </div> </div> <div class="otherContent"> <h1 id="second">Services</h1> <br> </div> <!-- begin snippet: js hide: false -->

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How would I remove the gap between the image and the Bootstrap Nav bar? gap between navbar and header-image (background-image) due to parallax scroll function How to remove the white gap between the background image and the navigation bar Gap in between nav bar and top of page Background Nav bar Image not displaying Overlaying Nav bar on background image Gap between background image and image in html Why is there a gap between image and navigation bar How to remove the gap between border and background image background image and text horizontal nav bar
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM