콘텐츠가 원하지 않음 DIV 미만

-1

나는 HTML과 CSS를 배우는 데에 익숙하지 않다. 특정 사이트의 일부 디자인 인터페이스를 다시 만들려고 시도 중이지만 문제가 발생했습니다. 헤더의 탐색 메뉴는 어떤 이유로 든 그 아래에 나타납니다. 수정본을 여러 번 조합했지만 시도가 끝나지 않고 왜 그런 일을 할 수 있는지 완전히 이해할 수있는 초보자입니다. 내 사이트를 업로드하고 디렉토리를 열어 탐색합니다. 코드는 매우 작으므로 실수를 지적하는 것이 다소 쉬울 것입니다.콘텐츠가 원하지 않음 DIV 미만

http://razorcloud.cz.cc/

HTML :

<body class="body"> 
     <header class="header"> 
      <img style="padding-left: 20px" src="images/versace-logo.bmp" width="230" height="120" /> 
      <div class="bottom-header"> 
       <div class="navigation-bar"> 
        <ul> 
         <li> 
          <a href="#">Home</a> 
          <div class="dropdown-container dropdown-shadow"> 
           <div class="dropdown-column"> 
            <p>This is a simple test to determine how dynamic and fluid the dropdown-container is.</p> 
           </div> 
          </div> 
         </li> 
        </ul> 
        <ul> 
         <li> 
          <a href="#">Video</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
      <!--<div class="header-alert"> 
       This website is still under development! 
      </div>--> 
     </header>

CSS :

당신은 당신의 요소를 떠 필요

.body 
{ 
    margin: auto; 
    width: 95%; 
    clear: both; 
} 

.body a 
{ 
    color: inherit; 
} 

.header 
{ 
    background-color: black; 
    color: white; 
    display: block; 
    font-family: "GillSansStdRegular"; 
    margin-bottom: 20px; 
    position: relative; 
} 

.bottom-header 
{ 
    display: block; 
    position: relative; 
    padding: 0 20px; 
} 

.navigation-bar 
{ 
    color: white; 
    display: inline-block; 
    font-size: 12px; 
    float: right; 
    text-transform: uppercase; 
} 

.navigation-bar > ul 
{ 
    border: transparent 1px solid; 
    border-bottom: 0; 
    float: left; 
    height: 34px; 
    list-style: none; 
    margin-left: 5px; 
} 

.navigation-bar > ul a 
{ 
    display: block; 
    line-height: 16px; 
    margin-right: 23px; 
    padding: 0px 2px 0px 2px; 
    text-decoration: none; 
} 

.navigation-bar > ul:active a 
{ 
    background-color: white; 
} 

.navigation-bar > ul:hover a 
{ 
    color: black; 
    height: 31px; 
    background: white; 
} 

.navigation-bar > ul:hover .dropdown-container 
{ 
    display: block; 
} 

.dropdown-column 
{ 

} 

.dropdown-container 
{ 
    color: black; 
    display: none; 
    position: absolute; 
    z-index: 99; 
    left: 0; 
    width: 100%; 
    border-color: black; 
    border-top: 2px; 
    border-top-style: solid; 
} 

.dropdown-shadow 
{ 
    margin-top: 0; 
    background: url("../images/backgrounds/submenu-bg.png"); 
    -webkit-box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16); 
    -moz-box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16); 
    box-shadow: 0 3px 3px 0 rgba(000,000,000,0.16); 
} 

.dropdown-shadow:after 
{ 
    display: block; 
    clear: both; 
} 

.header-alert 
{ 
    background-color: white; 
    border-bottom: 2px solid black; 
    color: black; 
    font-family: "GillSansStdLightRegular"; 
    font-size: 110%; 
    text-align: center; 
    text-transform: uppercase; 
    width: 100%; 
}

출처

2015-01-04 datOverflow

여기에 몇 가지 실제 코드를 게시하시기 바랍니다, 그것은 가장 가능성이 아래로 이동합니다 귀하의 사이트를 통해 파고 우리를 강제로 지역 사회에 도움이되지 않습니다/미래에 수정. –

. 머리글 내부에서 <img/>은 float:left으로 설정하고 탐색 컨테이너 (.navigation-bar)는 float:right으로 설정해야합니다. 그리고 당신은 수레 후 clearfix을 추가해야합니다 :

FIDDLE

출처

2015-01-04 23:40:26 jmore009

감사합니다. 나는 둘 다 쓸데없이 떠 다녔다. 나는 클리어 픽스 (Clearfix)가 무엇을 할 것인지를 몰랐다. – datOverflow

콘텐츠가 원하지 않음 DIV 미만

답변

관련 문제