问题描述:

Here in my html and css. my problem is that if i don't apply the top margin the divs are overlapping each other and div isn't filling the browser window if the position is not absolute.Any Help is appreciated. PS i am a newbie in html and css and thought stackoverflow would help me develop.

Edit:

http://jsfiddle.net/reyaqmc7/

JS fiddle code to help you evaluate. Thank you!

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;

}

网友答案:

Set body margin to 0 if you want fill the window without absolute position

Remove absolute position from #maincontainer and #slider, then you can remove the margin-top from the #slider.

The divs is collapsing because you have no content in them, try add these:

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

You will now see your 4 containers as they a supposed to.

网友答案:

Try this.

CSS:

 @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;
 }
相关阅读:
Top