[英]My divs are overlapping?
I'm trying to create a single page site, and while working on the second "page", eg another div that I want to go under the home page div, it over laps the first div and sits at the top. 我正在尝试创建一个单页网站,并在处理第二个“页面”时(例如,我要转到主页div下的另一个div),它位于第一个div的上方,并位于顶部。 I've tried floating and clearing, maybe I'm missing something obvious.
我尝试过浮动和清除,也许我缺少明显的东西。 I just need my divs to stack on top of eachother, not overlap.
我只需要我的div堆叠在彼此之上,而不是重叠。
Heres the basic HTML, 这是基本的HTML,
<div id="lefthead">
<a href="#">
<img src="Images/logo.png" alt="logo" width="198" height="106">
</a>
<div id="nav">
<ul>
<li><a href="#">RECIPES</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<div id="righthead">
<a href="#">
<img src="Images/fb_up.png" alt="fb_up" width="33" height="33"
onmouseover="this.src='Images/fb_over.png';"
onmouseout="this.src='Images/fb_up.png';">
</img>
</a>
</div>
</div>
<div id="slideone">
<img src="Images/home1.jpg" alt="home1">
</div>
<div id="homecontent">
</div
And the CSS 和CSS
#header {
width:100%;
height: 132px;
background-color: white;
top:0; right:0; left: 0;
position:fixed;
z-index:1;
}
#lefthead {
width:80%;
height: 132px;
float: left;
background-color:white;
}
#righthead {
width:20%;
height: 132px;
float: left;
background-color:white;
}
#righthead img{
position:relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#slideone {
position:absolute;
top: 0; right: 0; bottom: 0; left: 0;
width:100%;
height:775px;
background-color:red;
display:block;
float:left;
}
#slideone img {
width:100%;
overflow:hidden;
}
.shadow {
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}
#lefthead img {
display:inline-block;
position:relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#nav {
padding-bottom:35px;
display: inline-block;
}
li {
float: left;
display:block;
}
ul {
list-style-type: none;
}
a {
margin-left:25px;
width: 100px;
font-family: 'Raleway', sans-serif;
font-weight: 700;
text-decoration: none;
}
/* unvisited link */
a:link {
color: #262626;
}
/* visited link */
a:visited {
color: #262626;
}
/* mouse over link */
a:hover {
color: #e37b01;
}
/* selected link */
a:active {
color: #e37b01;
}
#homecontent {
background-color:white;
height:200px;
position:absolute;
display:block;
clear:both;
}
There appears to be an extra closing div in your html. 您的html中似乎有一个额外的结束div。 It's right above the "slideone" div.
它位于“ slideone” div的上方。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.