我得到的HTML结构如下,如何让content div不重叠标题?
<div id="page-wrap">
<header>
<div id="logo">
</div>
<nav>
<ul>
<li><a href="">text 1</a><li>
<li><a href="">text 2</a></li>
<li><a href="">text 3</a></li>
</ul>
</nav>
</heder>
<div id="main-content">
<h1>Some Heading</h1>
<p>Some Text</p>
<div>A div</div>
</div> <!-- end of main-content -->
</div> <!-- end of page-wrap -->
的CSS
#page-wrap {
max-width:850px;
top:0;
bottom:0;
height:100%;
margin: 0 auto;
}
header {
padding: 80px 0px 0px 0px ;
position: relative;
}
#logo {
position: absolute;
left:0;
width:123px;
height:122px;
background:transparent url(../images/logo.png) no-repeat;
}
header nav {
position: absolute;
right:0;
}
header nav ul {
}
header nav ul li {
display:inline;
list-style: none;
}
如上..主内容的div重叠报头>。 <请建议propper CSS的获取主要内容有从头部的底部80px距离。(没有与122px高度头部上的标志)
删除所有'位置:absolute'及相关'顶,左,右,底部属性,并使用边距。 – KBN
删除'header nav'和'#logo'的'position:absolute'。从顶部到文本的边距。 'margin-top:30%',并且为了理解重叠属性,我在这里引用你[http://www.w3schools.com/css/css_margin.asp] – Manoj