2014-09-01 122 views
0

我不希望我的div重叠,他们与自举导航栏。 有人可以帮助我,因为我不知道为什么它这样做?我甚至尝试添加一些位置:相对;位置:固定;重叠div与自举导航栏

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>MinecraftServerList | Minecraft Server List</title> 
     <link rel="stylesheet" href="css/main.css"> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
    </head> 

    <body> 
     <div class="navbar navbar-default-green navbar-fixed-top" role="navigation"> 
      <div class="container"> 
       <div class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav"> 
         <li><a href="http://www.minecraftserverlist.com"><i class="glyphicon glyphicon-home"></i> Home</a></li> 
         <li><a href="http://www.minecraftserverlist.com/"><i class="glyphicon glyphicon-star"></i> Sponsors</a></li> 
         <li><a href="http://www.minecraftserverlist.com"><i class="glyphicon glyphicon-comment"></i> Forums</a></li> 
         <li><a href="http://www.minecraftserverlist.com"><i class="glyphicon glyphicon-wrench"></i> Tools</a></li> 
         <li><a href="http://www.minecraftserverlist.com"><i class="glyphicon glyphicon-question-sign"></i> Support</a></li> 
        </ul> 
        <form class="navbar-form navbar-right" role="form"> 
         <div class="input-group"> 
          <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> 
          <div class="input-group-btn"> 
           <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 

     <div class="header-container"> 
      <div class="brand"> 
       <div class="container"> 
        MinecraftServerList.com 
       </div> 
      </div> 
      <div class="ad"> 
       <div class="container"> 
        Your ad could be here! 
       </div> 
      </div> 
     </div> 

     <div class="footer"> 
      <div class="container"> 
       © MinecraftServerList | Made by Joel Evans and Sebastian Semma | Minecraft is copyright Mojang and is not affiliated with this site. 
      </div> 
     </div> 
    </body> 

</html> 

继承人我CSS

.navbar-default-green { 
    background-color: #009933; 
    border-color: #559a4b; 
    font-family: 'Roboto Condensed', sans-serif; 
} 
.header-container { 
    margin: 0; 
} 
.brand { 
    margin: 0; 
    width: 100%; 
    height: 130px; 
    background-color: #EFEFEF; 
    border-bottom-color: #DDD; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    font-family: 'Roboto Condensed', sans-serif; 
} 
.ad { 
    margin: 0; 
    width: 100%; 
    height: 150px; 
    background-color: #FFF; 
    border-bottom-color: #DDD; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    text-align: center; 
    vertical-align: center; 
    font-style: italic; 
    font-family: 'Roboto Condensed', sans-serif; 
    line-height: 150px; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 50px; 
    background-color: #EFEFEF; 
    text-align: center; 
    vertical-align: center; 
    font-family: 'Roboto Condensed', sans-serif; 
    line-height: 50px; 
} 

回答

0

试试这个:

使用padding-top在body标签

<body style="padding-top:50px"> 

这就是为什么怎么一回事,因为导航栏设置为固定的顶部,所以它会粘在顶部并覆盖下面的div

DEMO

但愿这对你有用