상자와 이미지가있는 수평 스크롤 가능한 navbar가 필요합니다.

가로가 navbar이고 스크롤 할 수있는 한 개의 그림과 검은 색 배경이 필요합니다. 검은 배경이있는이 그림은 navbar 이상이어야하며 수정해야합니다.상자와 이미지가있는 수평 스크롤 가능한 navbar가 필요합니다.

\\! 편집! //// 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 규칙에 이미 text-align: center을 사용하여 해당 이미지를 정렬하고 있습니다.

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 기사를 포장 제거하고 CSS 규칙을 추가하여 기사를 아래로 이동하여 헤더의 고정 위치 아래에서 시작합니다. & nav.

#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

괜찮습니다. 죄송합니다. 여기 독일에서 당신을 위해 정말 고마워요! – 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

상자와 이미지가있는 수평 스크롤 가능한 navbar가 필요합니다.

답변

관련 문제