ボックスと画像付きの水平スクロール可能なナビゲーションバーが必要

水平のnavbarが必要です。スクロール可能な1つの画像と黒い背景が必要です。黒い背景のこの写真はnavbar以上であり、修正する必要があります。ボックスと画像付きの水平スクロール可能なナビゲーションバーが必要

\\ !!! EDIT !!! //// its like i described in my comment to your answer

i hope that is better to understand this black box takes me to an endless night :S

<head> 
 
<style> 
 
header { 
 
    margin_top: 0; 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    clear: left; 
 
    text-align: center; 
 
} 
 

 
footer { 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    clear: left; 
 
    text-align: center; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    font-family: verdana; 
 
} 
 

 
li { 
 
    border-right: 1px solid #bbb; 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
nav ul a.active { 
 
    background-color: #555; 
 
    color: white; 
 
    } 
 

 
nav ul a:hover { 
 
    background-color: black; 
 
} 
 
</style> 
 
</head>

<!DOCTYPE html> 
 
<meta lang="de_DE"> 
 
<html> 
 
<body> 
 
<header> 
 
\t <a href="LINK" target="_blank"> 
 
\t <img src="######" alt="Picture" align="middle"> 
 
\t </a> 
 
</header>  
 
<nav> 
 
    <ul> 
 
    <li><b><a class="active" href="LINK">London</a></b></li> 
 
    <li><a href="#">Nizza</a></li> 
 
    <li><a href="#">California</a></li> 
 
    <li><a href="#">Munich</a></li> 
 
\t <li><a href="#">Tokyo</a></li> 
 
\t <li><a href="#">Mumbai</a></li> 
 
\t <li><a href="#">Mauritius</a></li> 
 
    <li style="float:right" padding-right:"1em"><a href="#">Impressum</a></li> 
 
    </ul> 
 
</nav> 
 

 
<div style="padding:1px 16px;height:1000px;"> 
 
<article> 
 
    <h1>City of London</h1> 
 
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
 
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> 
 
</article> 
 
</div> 
 
<footer>Copyright © i dont know</footer> 
 
</body> 
 
</html>

出典

2016-10-24 DrZee

に感謝します。 –

あなたのCSSにいくつかの不要なスタイル規則を持っており、ほとんどのあなたの位置はあなたのulです。私はあなたのコードを以下のように整理しました。 header CSSルールのmargin_topは有効なプロパティではありません（s/b margin-top）。 ulからpositionとtopのプロパティを削除し、headerにwidth: 100%を追加します。また、imgタグからalign="middle"を削除します。を使用して既に画像を調整しています（header CSSルール）。今

header { 
 
    margin-top: 0; 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
footer { 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    clear: left; 
 
    text-align: center; 
 
} 
 
nav { 
 
    width: 100%; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
    width: 100%; 
 
    font-family: verdana; 
 
} 
 
li { 
 
    border-right: 1px solid #bbb; 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
nav ul a.active { 
 
    background-color: #555; 
 
    color: white; 
 
} 
 
nav ul a:hover { 
 
    background-color: black; 
 
}

<!DOCTYPE html> 
 
<meta lang="de_DE"> 
 
<html> 
 

 
<body> 
 
    <header> 
 
    <a href="LINK" target="_blank"> 
 
     <img src="http://lorempixel.com/200/100/" alt="Picture"> 
 
    </a> 
 
    </header> 
 
    <nav> 
 
    <ul> 
 
     <li><b><a class="active" href="LINK">London</a></b> 
 
     </li> 
 
     <li><a href="#">Nizza</a> 
 
     </li> 
 
     <li><a href="#">California</a> 
 
     </li> 
 
     <li><a href="#">Munich</a> 
 
     </li> 
 
     <li><a href="#">Tokyo</a> 
 
     </li> 
 
     <li><a href="#">Mumbai</a> 
 
     </li> 
 
     <li><a href="#">Mauritius</a> 
 
     </li> 
 
     <li style="float:right" padding-right: "1em"><a href="#">Impressum</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 

 
    <div style="padding:1px 16px;height:1000px;"> 
 
    <article> 
 
     <h1>City of London</h1> 
 
     <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
 
     <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> 
 
    </article> 
 
    </div> 
 
    <footer>Copyright © i dont know</footer> 
 
</body> 
 

 
</html>

あなたは、画面の上部にheaderとnavを修正したい場合は、それを行う最も簡単な方法は、修正するためにCSSを使用し、その後div内のものをラップすることです画面の上部にdivを配置します。私はまたdivあなたの記事をラップし、あなたのヘッダー& navの固定位置の下で始まるように記事を下に移動するCSSルールを追加しました。

#fixMe { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
header { 
 
    margin-top: 0; 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
footer { 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    clear: left; 
 
    text-align: center; 
 
} 
 
nav { 
 
    width: 100%; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
    width: 100%; 
 
    font-family: verdana; 
 
} 
 
li { 
 
    border-right: 1px solid #bbb; 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
nav ul a.active { 
 
    background-color: #555; 
 
    color: white; 
 
} 
 
nav ul a:hover { 
 
    background-color: black; 
 
} 
 

 
article { 
 
    margin-top: 250px; 
 
    height: 1000px; 
 
}

<div id="fixMe"> 
 
    <header> 
 
    <a href="LINK" target="_blank"> 
 
     <img src="http://lorempixel.com/200/100/" alt="Picture"> 
 
    </a> 
 
    </header> 
 
    <nav> 
 
    <ul> 
 
     <li><b><a class="active" href="LINK">London</a></b> 
 
     </li> 
 
     <li><a href="#">Nizza</a> 
 
     </li> 
 
     <li><a href="#">California</a> 
 
     </li> 
 
     <li><a href="#">Munich</a> 
 
     </li> 
 
     <li><a href="#">Tokyo</a> 
 
     </li> 
 
     <li><a href="#">Mumbai</a> 
 
     </li> 
 
     <li><a href="#">Mauritius</a> 
 
     </li> 
 
     <li style="float:right" padding-right: "1em"><a href="#">Impressum</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div> 
 

 
<article> 
 
    <h1>City of London</h1> 
 
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
 
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> 
 
</article> 
 

 
<footer>Copyright © i dont know</footer>

出典

2016-10-24 00:48:04

うわー、私は早急な答えと私の混乱をきれいには非常に感謝しています。 – DrZee

私は新しいスクリーンショットを追加しますが、画面の後ろに黒い背景が表示され、画面が終了するまで表示されず、ナビゲーションバーも75％しか表示されません – DrZee

omg大変申し訳ありません。ドイツでのあなたのおかげです。 – DrZee

デイブクリップスあなたはナビゲーションバーの上に絵を持っていることによって何を意味するのかはまだわからない

#fixMe { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
header { 
 
    margin-top: 0; 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
footer { 
 
    padding: 1em; 
 
    color: white; 
 
    background-color: black; 
 
    clear: left; 
 
    text-align: center; 
 
} 
 
nav { 
 
    width: 100%; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
    width: 100%; 
 
    font-family: verdana; 
 
} 
 
li { 
 
    border-right: 1px solid #bbb; 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
nav ul a.active { 
 
    background-color: #555; 
 
    color: white; 
 
} 
 
nav ul a:hover { 
 
    background-color: black; 
 
} 
 

 
article { 
 
    margin-top: 250px; 
 
    height: 1000px; 
 
}

<div id="fixMe"> 
 
    <header> 
 
    <a href="LINK" target="_blank"> 
 
     <img src="http://lorempixel.com/200/100/" alt="Picture"> 
 
    </a> 
 
    </header> 
 
    <nav> 
 
    <ul> 
 
     <li><b><a class="active" href="LINK">London</a></b> 
 
     </li> 
 
     <li><a href="#">Nizza</a> 
 
     </li> 
 
     <li><a href="#">California</a> 
 
     </li> 
 
     <li><a href="#">Munich</a> 
 
     </li> 
 
     <li><a href="#">Tokyo</a> 
 
     </li> 
 
     <li><a href="#">Mumbai</a> 
 
     </li> 
 
     <li><a href="#">Mauritius</a> 
 
     </li> 
 
     <li style="float:right" padding-right: "1em"><a href="#">Impressum</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div> 
 

 
<article> 
 
    <h1>City of London</h1> 
 
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> 
 
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> 
 
</article> 
 

 
<footer>Copyright © i dont know</footer>

出典

2016-10-25 10:45:20 DrZee

ボックスと画像付きの水平スクロール可能なナビゲーションバーが必要

答えて

関連する問題