如何阻止我的主體與HTML/CSS中的導航欄和橫幅重疊

我目前正在設計一個網站，並且在導航欄和標題中遇到了一些問題。我已經對CSS進行了編碼，以便導航欄和橫幅圖像在滾動時保留在頁面的頂部。如何阻止我的主體與HTML/CSS中的導航欄和橫幅重疊

這是成功的，但是身體的文字會通過導航欄。我已經在導航欄上設置了所有邊距和填充。有沒有一種方法可以設置它，以便橫幅，導航欄和主體都作爲一個整體進行跟蹤？正文文本顯然是一個例子，顯然頁面鏈接還沒有填寫等。

要看到發生了什麼的例子。去這裏：www.jamiewebguy.com

HTML代碼：

<!DOCTYPE html> 

<html lang="en"> 



<head> 

<meta charset="utf-8"> 

<title>Jamie. The Web Guy</title> 

<link rel="stylesheet" type="text/css" href="homep.css"> 

</head> 



<body> 

<header> 

<span class="banner_h"> 
<img src="Exbanner.jpg" alt "Banner" height="150" width= 100%/> 
</span> 

<p><ul> 

    <li><a class="active" href="#home">Home</a></li> 

    <li><a href="#news">What?</a></li> 

    <li><a href="#contact">Pricing</a></li> 

    <li><a href="#about">Contact Us</a></li> 

<li><a href="#about">Testimonials</a></li> 

<li><a href="#about">About</a></li> 

</header> 

</ul></p> 
<div id="main-content"> 
     <h1>Some Heading</h1> 
     <p>Some Text</p> 
    <div>A div</div> 


<h1>Some Heading</h1> 
     <p>Some Text</p> 
     <div>A div</div> 
<h1>Some Heading</h1> 
     <p>Some Text</p> 
     <div>A div</div> 
<h1>Some Heading</h1> 
     <p>Some Text</p> 
     <div>A div</div> 
<h1>Some Heading</h1> 
     <p>Some Text</p> 
     <div>A div</div> 
<h1>Some Heading</h1> 
     <p>Some Text</p> 
     <div>A div</div> 
<h1>Some Heading</h1> 
     <p>Some Text</p> 
     <div>A div</div> 
<h1>Some Heading</h1> 
     <p>Some Text</p> 
     <div>A div</div> 
<h1>Some Heading</h1> 
     <p>Some Text</p> 
     <div>A div</div> 
<h1>Some Heading</h1> 
     <p>Some Text</p> 
     <div>A div</div> 
    </div> 


</body>

CSS代碼：

header { 
     position:fixed; 
     top: 0; 
     width: 100%; 
} 

ul { 
    position: fixed; 
    width: 100%; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    background-color: #f3f3f3; 
    border: 1px solid #e7e7e7; 
} 

a { 
    display: inline-block; 
    width: 80px; 
    text-align: center; 
} 

li { 
    width: 100px; 
    margin: auto; 
    display: inline; 
    border-right: 1px solid #bbb; 

} 

li:last-child { 

} 

li a 
{ 
    display: inline-block; 
    color: #666; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 

} 

li a:hover 
{ 

    background-color: #111; 
} 
.active 
{ 
    background-color: #4CAF50; 
} 


#main-content 
{ 
margin: 300px 0 0 0; 
}

來源

2017-09-03 JamWill

您有幾個選擇：

您可以定義標題的背景，使內容仍然滾動下面，但你不會看到它：

header: background-color: white

你也可以把主文本的div固定的位置DIV中與overflow設置爲滾動。這將保持它在的地方，你的內容將改爲滾動頁面的關閉它的頂部：

<div id="container"> 
    <div id="main-content">

用CSS：

#container { 
    top: 230px; 
    bottom:0; 
    width: 100%; 
    position: fixed; 
    overflow: scroll; 
}

來源

2017-09-03 22:57:43

謝謝。第一個解決方案工作。然而，第二種解決方案只是讓正文文本遍歷標題。（當然，它並沒有動彈，但我改變了立場相對。） – JamWill

給頭和無序列表的相對位置，而不是固定的：

header { 
     position: relative; 
     top: 0; 
     width: 100%; 
} 

ul { 
    position: relative; 
    width: 100%; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    background-color: #f3f3f3; 
    border: 1px solid #e7e7e7; 
}

來源

2017-09-03 22:54:39

當我這樣做，他們滾動了頁面，我想當我向下滾動時，他們留在頁面頂部。 – JamWill

你的HTML是錯誤的。你已經<img src="Exbanner.jpg" alt "Banner" height="150" width= 100%/> 你需要有<img src="Exbanner.jpg" alt="Banner" height="150px" width= "100%"/> 那麼你必須</header>但上面的任何地方

也攪亂<ul> <li>菜單沒有開口<header>

來源

2017-09-03 23:04:24 mlegg

我看到一個開放''

標籤身體之後...... –

謝謝你，已經改變了旗幟HTML。但是，是的，body標籤有一個開頭標題。 – JamWill

如何阻止我的主體與HTML/CSS中的導航欄和橫幅重疊

回答

相關問題