页面内容由导航栏覆盖

时间：2013-12-15 02:07:07

标签： html css html5 navigation

我的页面顶部有一个导航栏，其位置是固定的，但我想要在其下方的内容最终会被导航栏部分覆盖。

Screenshot of Problem

这是html：

<html>
<head>
  <title>A Plus Graphing</title>
  <link rel="stylesheet"
        type="text/css"
        href="index.css"/>
</head>
<body>
<div id="all">
  <div id="header">
    <div class="header_container">
      <h1 class="heading"><b class="a_main">A+</b> Graphing</h1>

      <ul id="top_nav">

        <li class="nav_item"><a href="ourmission.html">Our Mission</a></li>
        <li class="nav_item"><a href="about.html">About</a></li>
        <li class="nav_item"><a href="contact.html">Contact</a></li>
        <li class="rfloat"><a href="register_main.html">Sign Up</a></li>
      </ul>


    </div>
  </div>
  <div id="content">
    <div class="global_container">
      <b class="welcome">Welcome to <b class="a">A+</b> Graphing!</b>
      <div class="login_links">
        <a class="login_button" href="teacher_login.html">Teacher Login</a> <a class="login_button" href="student_login.html">Student Login</a>
      </div>
      <p class="intro_p">A+ Graphing is designed to introduce technology in the classroom and cut down teacher grading time.<br/>
        <a href="about.html">Learn More</a></p>

    </div>
  </div>

  <div class="footer_container">
    A Harsh Mehta and Kevin Turner Production
    <div id="donate_main">
      <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
        <input type="hidden" name="cmd" value="_s-xclick">
        <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
    ">
        <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
        <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
      </form>
    </div>
  </div>

</div>
</body>
</html>

和css：`

#header {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    display: block;
    background-color: #F2EEEE;
    height: 51px;
    width: 100%;
}

body {
    font-family: arial, sans-serif;
    height: 100%;

}
#all {
 height: 100%;
}

body a {
    color: red;

}
html {
height: 100%;
}
.a_main {
    color: red;
}

.heading {
    font-size: 20px;
    float: left;
}

.header_container {
    margin-left: auto;

    margin-right: auto;

   width: 700px;
    height: 51px;
}


.header_teacher {
    margin-left: auto;

    margin-right: auto;

   width: 1200px;
    height: 51px;
}

body ul {
    list-style-type: none;
    float: left;
}

#top_nav a {
text-decoration: none;
color: black;


}

#top_nav a:hover {
    text-decoration: none;
    border-bottom: 5px solid red;

}

#top_nav li {

   display: block;
    float: left;
    margin-left: 50px;

}

#content {
    margin-top: 100px;

}

#content {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    margin-top: 0;
    width: 400px;
    min-height: 100px;
}

.global_container {
 position: absolute;
}

.welcome {
    font-size: 30px;
}

.a {
    color: red;
}



.login_button {
    background-color: red;
    color: white;
    border-radius: 15px;
    text-decoration: none;
    padding: 5px 10px 5px 10px;
}

.intro_p {
    margin-top: 60px;
    margin-bottom: 300px;
}


#donate_main {
    float: right;
}


.login {

}


#info_container {
    margin-bottom: 350px;
}
.login_links {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    margin-top: 20px;
    width: 300px;
}

.footer_container {
margin-left: auto;
color:  grey;
border-top: 1px solid grey;
padding-top: 10px;
font-size: 15px;
    margin-right: auto;
    margin-bottom: 0;
    margin-top: 20px;
    width: 700px;
}



.login_container {
    margin-top: 50px;
    border: 1px solid grey;
    border-radius: 15px;
     box-shadow: 5px 5px 5px 5px #888;
    width: 450px;
    margin-left:  -5em;
   margin-bottom: 350px;
   padding: 20px 50px 50px 30px;
}

.login_class {
 border-bottom: 1px solid grey;   
}

.username {
    width: 300px;
    height: 20px;
}

.password {
     width: 300px;
    height: 20px;
}

.username2 {
    width: 300px;
    height: 30px;
}

.password2 {
     width: 300px;
    height: 30px;
}

.inline_info1 {
    float: left;
    width: 200px;

}

inline_info {
    float: left;  
}

.apple{
    margin-top: 20px;
}

.student {
    margin-top: 30px;
}

#register_content {

margin-bottom: 200px;
}

.main_inner {
    margin-bottom: 300px;
}

.test_make {
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    width: 400px;
}

.list_item {
    display: inline-block;
    margin-right: 250px;
    width: 150px;
}


#quizes_main_list {
    width: 90%;
}

.inner_list{
   width: 100%;
}

.greeting_head {
    width: 100%;
  text-align: center;
}

.view_quiz {
    color: white;
    background-color: red;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    border-radius: 15px;
}

#quizes_main_list a {
    text-decoration: none;

}

.quiz_item {
    margin-bottom: 50px;
}

.tests {
    margin-top: 100px;
}

.tests a{
    text-decoration: none;
}

.quiz_main {
    margin-top: 200px;

}

#main {
    border: 1px solid grey;
    padding-bottom: 25px;
    padding-top: 25px;
    padding-left: 100px;
    padding-right: 100px;
    border-radius: 15px;
      box-shadow: 5px 5px 5px 5px #888;
}

.results_main {
    margin-top: 100px;
}


.score {
    font-size: 50px;
}

.results_green {
    color: green;
    font-size: 60px;
}

#question_stat {
    float: left;
}

#grades_main_list {
    margin-top: 50px;
    width: 90%;
}

.link_nav {
    margin-top: 100px;
}

.link_inner {
color: white;
background-color: red;
border-radius: 15px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}

.global_content a{
    text-decoration: none;
}

.inner_list {
    margin-bottom: 30px;
    border-bottom: 1px solid grey;
    padding-bottom: 20px;

}

.quiz_item {
    width: 100%;
}

.inline_info a{
    color: white;
}

.inline_info1 a{
    color: white;
}`

提前感谢您的帮助。

4 个答案:

答案 0 :(得分：2)

你已经取得了前0名的差距

这是来自您的代码。只需删除margin-top：0;

的行 
#content {
    margin-top: 100px;

}

#content {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    margin-top: 0;  //remove this line
    width: 400px;
    min-height: 100px;
}

答案 1 :(得分：1)

我搜索了你的代码，试图找到导致这种情况的原因。由于你浮动了标题，我想我可以使用clear:both;来修复它，但这不起作用。

现在，添加margin-top:50px;就可以了。

#content{
  margin-top:50px;
}

我还在您的标题中添加了z-index:10，因此它会站在您的所有内容之前。我觉得它看起来更好;）

#header{
  z-index:10;
}

JSFIDDLE

答案 2 :(得分：-1)

我有同样的问题。无法回想起我最终看到答案的地方，但我通过转到故事板并选择有问题的视图控制器来修复它，然后选择了属性检查器。在View Controller部分下，找到Extend Edges并根据需要取消选择Under Top Bars或Under Bottom Bars。不知道为什么默认情况下不会取消选择这些内容。

答案 3 :(得分：-1)

我遇到了同样的问题，并已解决。 尝试通过添加以下内容来将导航栏的底部边距更改为零。

.nav_bar {
 margin-bottom: 0px;
}

然后添加另一个类来处理溢出

.clearfix::after{
 content: "";
 clear: both;
 display: table;
}

应该完成的工作。

相关问题
最新问题