我的div是重叠的

时间：2014-11-14 20:47:15

标签： html css

这里是我的html和css。我的问题是，如果我不应用上边距，div是相互重叠的，如果位置不是绝对的，div不填充浏览器窗口。任何帮助表示赞赏。 PS我是html和css的新手，思想stackoverflow会帮助我发展。 编辑： http://jsfiddle.net/reyaqmc7/ JS小提琴代码，以帮助您评估。谢谢！

HTML 

<html>
    <head>
       <link rel="stylesheet" type="text/css" href="stylesheet.css">
       <!-- The world wide web project. Explaining the people the use of world wide web  -->
       <title>The world wide web</title>
    </head>
    <body>
       <header>
         <div id="maincontainer">
           <div id="logo"><img src="logopng.png" class="logo" /></div>
           <div ID="nav">
             <nav>
               <ul>
                 <li><a href="">What</a></li>
                 <li><a href="">How</a></li>
                 <li><a href="">When</a></li>
                 <li><a href="">Who</a></li>
                 <li><a href="awesome">Awesome!</a></li>
               </ul>
             </nav>
           </div>
         </div>
       </header>
       <!-- The navigation -->
       <div id="slider"></div>
       <section id="page-section what">
         <div class="containers"></div>
       </section>
       <section id="page-section what">
         <div class="containers"></div>
       </section>
       <section id="page-section what">
         <div class="containers"></div>
       </section>
       <section id="page-section what">
         <div class="containers"></div>
       </section>
       <footer></footer>
   </body>
</html>

CSS 

@font-face{
  font-family: klavika; src:url(klavika.woff);
}

div#nav{
   height: 5em;
   width: 70%; 
   top: 0;
   right:0;
   background-color: rgba(242, 242, 242, 1);
   position: absolute;
}

/*ul{list-style: none; float: right;}

li{
   display: inline-block;
   height: 3em;
   width: 5em;
   vertical-align: middle;
   text-align: center;
   text-decoration: none;
   font-weight: 400px;
   font-size: 25px;
   color: white;
   font-style: bold;
 }

div#slider{
   height: 20em;
   width: 100%;
   left: 0; 
   right: 0;
   top: 5em;
   background-color: rgba(220, 220, 220, 1);
   position: absolute;
 }
li a{
  text-decoration: none;
  color: rgba(150,150,150,1);
 } 
li:hover{
 border-bottom: 3px solid;
 border-bottom-color: rgba(0, 216, 255, 1);}*/

nav a{
  background-color: rgba(242, 242, 242, 1);
  border-bottom: 3px transparent;
  font-family: klavika;
  display: block;
  padding: 2em 2em 1.65em 1.5em;
  text-decoration: none; 
  color: rgba(150,150,150,50);
 -webkit-transition:border-bottom 0.3s ease, background-color 0.4s ease;
  transition: border-bottom 0.3s ease, background-color 0.4s ease;
 }

nav a:hover{
  border-bottom: 3px solid;
  border-bottom-color: rgba(0, 148, 255, 1);
  color: rgba(82, 212, 214, 1);
  /*background-color: rgba(150,150,150,50);*/
 }

nav ul{
 list-style: none;
 float: right; 
 margin: 0;
}

li{
 display: inline-block;
 height: 5em;
}

div#logo{
   float: left; 
   height: 5em;
   width: 8em;
   margin-left: 5em;
   opacity: .3; 
  -webkit-transition:opacity 1s ease;
}

div#logo:hover{opacity: 100}

img.logo{max-width: 100%; max-height: 100%; opacity: 10;}

div#maincontainer{
   height: 5em;
   width: 100%;
   top: 0;
   left: 0;
   right: 0;
   background-color: rgba(242, 242, 242, 1);
   position: absolute;
}

div#slider{
   background-color:red;
   width: 100%;
   position: absolute;
   right: 0;
   left: 0;
   height: 15em;
   margin-top: 7em;
}

2 个答案:

答案 0 :(得分：1)

如果要填充没有绝对位置的窗口

，请将体边距设置为0

从#maincontainer和#slider中删除绝对位置，然后你可以从#slider中删除margin-top。

div正在崩溃，因为你没有内容，请尝试添加以下内容：

body { 
  margin:0; 
}
.containers {
    height:50px;
    background: blue;
    margin-top: 5px;
}

现在，您将看到4个容器。

答案 1 :(得分：0)

试试这个。

CSS：

＆＃13;
＆＃13; 
 @font-face {
     font-family: klavika;
     src:url(klavika.woff);
 }
 div#nav {
     height: 5em;
     width: 100%;
     top: 0;
     right:0;
     background-color: rgba(242, 242, 242, 1);
     position:absolute;
 }
 /*ul{list-style: none; float: right;}
li{display: inline-block; height: 3em;width: 5em; vertical-align: middle; text-align: center; text-decoration: none; font-weight: 400px; font-size: 25px; color: white; font-style: bold;}
div#slider{height: 20em; width: 100%;left: 0; right: 0; top: 5em; background-color: rgba(220, 220, 220, 1); position: absolute; }
li a{text-decoration: none; color: rgba(150,150,150,1);} 
li:hover{border-bottom: 3px solid; border-bottom-color: rgba(0, 216, 255, 1);}*/
 nav a {
     background-color: rgba(242, 242, 242, 1);
     border-bottom: 3px transparent;
     font-family: klavika;
     display: block;
     padding: 2em 2em 1.65em 1.5em;
     text-decoration: none;
     color: rgba(150, 150, 150, 50);
     -webkit-transition:border-bottom 0.3s ease, background-color 0.4s ease;
     transition: border-bottom 0.3s ease, background-color 0.4s ease;
 }
 nav a:hover {
     border-bottom: 3px solid;
     border-bottom-color: rgba(0, 148, 255, 1);
     color: rgba(82, 212, 214, 1);
     /*background-color: rgba(150,150,150,50);*/
 }
 nav ul {
     list-style: none;
     float: right;
     margin: 0;
 }
 li {
     display: inline-block;
     height: 5em;
 }
 div#logo {
     float: left;
     height: 5em;
     width: 8em;
     margin-left: 5em;
     opacity: .3;
     -webkit-transition:opacity 1s ease;
 }
 div#logo:hover {
     opacity: 100
 }
 img.logo {
     max-width: 100%;
     max-height: 100%;
     opacity: 10;
 }
 div#maincontainer {
     height: 5em;
     width: 100%;
     top: 0;
     left: 0;
     right: 0;
     background-color: rgba(242, 242, 242, 1);
     position: absolute;
 }
 div#slider {
     background-color:red;
     width: 100%;
     position: absolute;
     right: 0;
     left: 0;
     height: 15em;
     margin-top: 5em;
 }
＆＃13;
＆＃13;
＆＃13;

HTML： 

<header>
    <div id="maincontainer">
        <div id="logo">
            <img src="logopng.png" class="logo" />
        </div>
        <div ID="nav">
            <nav>
                <ul>
                    <li><a href="">What</a>

                    </li>
                    <li><a href="">How</a>

                    </li>
                    <li><a href="">When</a>

                    </li>
                    <li><a href="">Who</a>

                    </li>
                    <li><a href="awesome">Awesome!</a>

                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>
<!-- The navigation -->
<div id="slider"></div>
<section id="page-section what">
    <div class="containers"></div>
</section>
<section id="page-section what">
    <div class="containers"></div>
</section>
<section id="page-section what">
    <div class="containers"></div>
</section>
<section id="page-section what">
    <div class="containers"></div>
</section>
<footer></footer>
相关问题
最新问题