如何讓content div不重疊標題？

我得到的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高度頭部上的標誌）

來源

2013-02-07 Light93

刪除所有'位置：absolute'及相關'頂，左，右，底部屬性，並使用邊距。 – KBN

刪除'header nav'和'＃logo'的'position：absolute'。從頂部到文本的邊距。 'margin-top：30％'，並且爲了理解重疊屬性，我在這裏引用你[http://www.w3schools.com/css/css_margin.asp] – Manoj

HTML

<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> 
      <div class="clear"> </div> 
     </nav> 
     <div class="clear"> </div> 
    </header> 

    <div class="clear"> </div> 

    <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：

html, body { 
    height: 100%; 
} 

#page-wrap { 
    max-width:850px; 
    height:100%; 
    margin: 0 auto; 
} 

header { 
    margin: 80px 0 0 0; 
} 

#logo { 
    width:123px; 
    height:122px; 
    background: url("../images/logo.png") no-repeat; 
    float: left; 
} 

header nav { 
    float: right; 
} 

header nav ul { 

} 

header nav ul li { 
    display:inline; 
    list-style: none; 
} 
#main-content { 
margin: 80px 0 0 0; 
} 

.clear { 
    clear: both; 
}

查找CSS clear: both，你就會明白我爲什麼使用clear。

來源

2013-02-07 07:49:13 KBN

謝謝我會檢查 – Light93

-1

先給爲主要內容部分上邊距...

CODE：

<div id="main-content"> 
//somecode 
<div>

CSS：

# main-content 
{ 
margin-top:somepixel; 
}

來源

2013-02-07 07:56:34 smith269

如何讓content div不重疊標題？

回答

相關問題