下のNavbarヘッダー対応の問題

私のブログを手に入れようとしていますが、私はこの問題に悩まされています。私は、頭上に星空のデザイン、そしてそのすぐ下に小さなnavbarをつけようとしていますが、ページのサイズを変更するたびに、ヘッダーイメージがページ上に表示され、下のnavbarはそれから切り離されます。ヘッダーにヘッダーを付けるにはどうすればサイズが変更されたときに接続されていて分離されていないのですか？ここに私のコード下のNavbarヘッダー対応の問題

body { 
 
    background-color: #D3D3D3; 
 
    margin: 0 0 100px; 
 
    font-family: "PT-Sans", sans-serif; 
 
} 
 
.header { 
 
    position: relative; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 25%; 
 
    background-image: url("./img/header-img.png"); 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
} 
 
.topnav { 
 
    background-color: #333; 
 
    overflow: hidden; 
 
    position: relative; 
 
    top: 0; 
 
} 
 

 
.topnav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
} 
 

 
.topnav a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
.topnav a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 
.item-right { 
 
}

<html> 
 
    <title>Political Blog</title> 
 
    <link rel="stylesheet" type="text/css" href="/blog/bootstrap.css"> 
 
    <link rel="stylesheet" type="text/css" href="/blog/style.css"> 
 
    <head> 
 
    
 
    </head> 
 
    <body> 
 
    <div class="header"> 
 
    
 
    </div> 
 
    <div class="topnav"> 
 
     <a href="/">Home</a> 
 
     <a href="./latest">Latest</a> 
 
     <a href="./all">All</a> 
 
     <a href="./about">About</a> 
 
    </div> 
 
    </body> 
 
<hr>

出典

2017-08-08 Piers Chalmers

あなたは、ブートストラップを呼び出し、それを使用していない任意の特定の理由：eがデモを働いていますか？それが最速の方法でしょう。何かをヘッダーに入れてみてください。なぜなら、何らかの理由で空の要素が不思議な動作をするからです。 –

背景画像の高さを25％に設定しました。何の25％？提供されたコードでは、ヘッダーは表示されません。 – Gerard

彼女https://jsfiddle.net/ma5sn8c0/

body { 
 
    background-color: #D3D3D3; 
 
    margin: 0 0 100px; 
 
    font-family: "PT-Sans", sans-serif; 
 
} 
 
.header { 
 
    display: block; 
 
    width: 100%; 
 
    height: 200px; 
 
    background-image: url("http://via.placeholder.com/900x150/42f4aa/ffffff"); 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
    background-size:cover; 
 
    background-position: center center; 
 
} 
 

 
.topnav { 
 
    background-color: #333; 
 
    overflow: hidden; 
 
    position: relative; 
 
    top: 0; 
 
} 
 

 
.topnav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
} 
 

 
.topnav a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
.topnav a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 
.item-right { 
 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="header"> 
 
</div> 
 
<div class="topnav"> 
 
    <a href="/">Home</a> 
 
    <a href="./latest">Latest</a> 
 
    <a href="./all">All</a> 
 
    <a href="./about">About</a> 
 
</div>

出典

2017-08-08 11:51:31 kastriotcunaku

使用ヘッダーで、このCSSプロパティだとCSSや位置、それに100％の代わりにカバーを使用しています。あなたは<head>タグ内に応答ページを作るために
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
を使用する必要が

background-size:cover; 
background-position:top center;

出典

2017-08-08 11:45:03

Here is the working demo in code pen:

.header { 
    position: relative; 
    width: 100%; 
    min-height: 100px; 
    background-image:url("http://lorempixel.com/1200/100/sports"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-color:#ff0000; 
}

出典

2017-08-08 11:48:56 gudboisgn

body { 
 
    background-color: #D3D3D3; 
 
    margin: 0 0 100px; 
 
    font-family: "PT-Sans", sans-serif; 
 
} 
 
.header { 
 
    position: relative; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 25%; 
 
    background-image: url("./img/header-img.png"); 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
} 
 
.topnav { 
 
    background-color: #333; 
 
    overflow: hidden; 
 
    position: relative; 
 
    top: 0; 
 
} 
 

 
.topnav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
} 
 

 
.topnav a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
.topnav a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 
.item-right { 
 
}

<html> 
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
 
<title>Political Blog</title> 
 
<link rel="stylesheet" type="text/css" href="/blog/bootstrap.css"> 
 
<link rel="stylesheet" type="text/css" href="/blog/style.css"> 
 
<head> 
 

 
</head> 
 
<body> 
 
<div class="header"> 
 

 
</div> 
 
<div class="topnav"> 
 
    <a href="/">Home</a> 
 
    <a href="./latest">Latest</a> 
 
    <a href="./all">All</a> 
 
    <a href="./about">About</a> 
 
</div> 
 
</body> 
 
</html>

出典

2017-08-08 11:50:03

下のNavbarヘッダー対応の問題

答えて

関連する問題