HTML/CSSでナビゲーションバーとバナーが重なっている本体の停止方法

現在、ウェブサイトを設計中で、ナビゲーションバーとヘッダーに問題があります。スクロールするときに、ナビゲーションバーとバナー画像がページの上部にとどまるように、CSSをコーディングしました。HTML/CSSでナビゲーションバーとバナーが重なっている本体の停止方法

これは成功していますが、本文のテキストはナビゲーションバーを越えて上がります。私はすべてのマージンとパディングをナビゲーションバーの周りに設定しました。バナー、ナビゲーションバー、本体がすべて1つに従うように設定する方法はありますか？本文は明らかですが、明らかにページリンクはまだ記入されていません。

何が起こっているかの例を見てください。ここに行く：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

あなたはまた、スクロールするoverflowセットで固定位置のdiv内のメインテキストのdivを置くことができます。これは、場所に保管されますと、あなたのコンテンツがページの代わりにそれの上をオフにスクロールします：

<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

ありがとうございます。最初の解決策は治療になりました。しかし、2番目の解決策では、本体のテキストがヘッダーを超えてしまっただけです。（まったく動きませんでしたが、私は相対的な位置に変更しました） – 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

を台無しに<header>

どこでも上記全く開口部がありません私がスクロールダウンしたときにページの上にとどまる – JamWill

あなたのHTMLが間違っています。あなたは<img src="Exbanner.jpg" alt="Banner" height="150px" width= "100%"/> を持っている必要があり<img src="Exbanner.jpg" alt "Banner" height="150" width= 100%/> は、あなたは</header>を持っていますが、私は、彼らはページをスクロールアップし、私が望んでいたことを行うとも<ul> <li>メニュー

出典

2017-09-03 23:04:24 mlegg

ボディの直後に「

」タグが表示されています... –

ありがとう、バナーHTMLを変更しました。しかし、はい、bodyタグによって開始ヘッダーがあります。 – JamWill

HTML/CSSでナビゲーションバーとバナーが重なっている本体の停止方法

答えて

関連する問題