为什么我调整屏幕大小时div会保持重叠？

Question

I've done some searching and I just can't seem to find out what's wrong. 我已经进行了一些搜索，但似乎无法找出问题所在。 My main content keeps overlapping the banner. 我的主要内容一直与横幅重叠。 I tried using the position and overflow hidden and auto but I still can't seem to get it right. 我尝试使用该位置，但隐藏和自动溢出，但似乎仍然无法正确处理。

Here's the html 这是HTML

<html>
  <head>
      <title> Website </title>
      <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>
        <div id="Navigation Container"></div>
        <div id="header">
            <a href="index.html"><img src="nav bar logo.png"></a>
        </div>

        <div id='Navigation'>
            <ul>
                <li><a href="#"><font color="#FFFFFF">Contact</font></a></li>
                <li><a href="#"><font color="#FFFFFF">About</font></a></li>
            </ul>
        </div>

        </div></div>

        <div id="Banner">
            <div id="wrapper">
                <div id="container">
                    <img class="banner-img" src="../Banner.png">
                </div>
            </div>
        </div>

        <div id="MainContent">
            <p>
                <font color="#000000">
                    <h1><font face="Palatino Linotype" color="#5DA05D" size="6">Header</font></h1>
                    <font face="Verdana" size="3">
                        <p>Just some text...</p>
                        <p>That keeps overlapping...</p>
                    </font>
                </font>
            </p>
        </div>

        <div id="footer"></div>
    </p>
</body>

Here's the CSS: 这是CSS：

body {
    background: #F9F9F9; margin: 0 auto; padding: 0; font: color: #FFFFFF; text-align: center} 
a {
    color: #2b2bf6;}

#header { 
    float: left; 
    position: fixed;
    Align: left;
    clear: both;
    width: 0x; 
    max-width: 100%;    
    height: 70px;   
    margin: 0; 
    padding: 0; 
    border: 0; 
    background: 
    #FFFFFF; 
    z-index: 2;}



#Navigation {  
    width: 100%;
    height: 70px; 
    margin: 0; 
    padding: 0; 
    background: #000000;
    Font-size: 18px;
    float: right;
    position: fixed;
    z-index: 1;
    display: incline-block;
    }

#Navigation Container {
    WIDTH: 100%;
    float: right; 
    background: #282828;
    position: fixed;
    z-index: 0;}

#Banner {
    height: 100%;
    width: 100%;
    margin: auto;
    padding-top: 70px}

#wrapper {
    width: 100%;
    overflow: hidden; }

#container {
    width: 100%;
    margin: 0 auto; }

#banner-img {
    width: 100%;}


#dropdown {
    position: relative; 
    overflow: hidden; }

#MainContent {
    margin-top: -270px; 
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 100px;
    text-align: left;}

#footer {
    width: 100%;
    height: 120px;
    background: #282828;
    padding: 0px; } 



#navwrap {
    width: 160px;
    height: 70px;
    Float: right;
    display: incline-block;
    z-index: 4; }

#Searchbar {
    float: left;
    padding: 20px;
    }



ul{
        padding: 0;
        list-style: none;
    height: 70px;

    }
ul li{
        float: right;
        width: 110px;
        text-align: center;
        line-height: 21px;
    }
ul li a{
    display: block;
    height: px;
        padding: 5px 10px;
        color: #333;
        background: #282828;
        text-decoration: none;
    }
ul li a:hover{
        color: #fff;
        background: #3d3d3d;
    }
ul li ul{
        display: none;
    }
ul li:hover ul{
        display: block; 
    }

Please help. 请帮忙。

Answer 1

There are a few discrepancies in the HTML posted by you. 您发布的HTML中有一些差异。 I have corrected the same. 我已经更正了。 Can you please reuse the HTML and check. 您能否重用HTML并进行检查。

<html>
  <head>
      <title> Website </title>
      <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>
        <div id="Navigation Container"></div>
        <div id="header">
            <a href="index.html"><img src="nav bar logo.png"></a>
        </div>

        <div id='Navigation'>
            <ul>
                <li><a href="#"><font color="#FFFFFF">Contact</font></a></li>
                <li><a href="#"><font color="#FFFFFF">About</font></a></li>
            </ul>
        </div>
        <div id="Banner">
            <div id="wrapper">
                <div id="container">
                    <img class="banner-img" src="../Banner.png">
                </div>
            </div>
        </div>
        <div id="MainContent">
            <p>
                <font color="#000000">
                    <h1><font face="Palatino Linotype" color="#5DA05D" size="6">Header</font></h1>
                    <font face="Verdana" size="3">
                        <p>Just some text...</p>
                        <p>That keeps overlapping...</p>
                    </font>
                </font>
            </p>
        </div>
        <div id="footer">
        </div>
    </p>
</body>
</html>

为什么我调整屏幕大小时div会保持重叠？

问题描述

1 个解决方案

解决方案1
1 2015-02-09 06:57:18

为什么我调整屏幕大小时div会保持重叠？

问题描述

1 个解决方案

解决方案1 1 2015-02-09 06:57:18

解决方案1
1 2015-02-09 06:57:18