이 유체 이미지에 내비게이션을 첨부 된 상태로 유지하려면 어떻게해야합니까?

Question

989px (가장 큰 이미지 크기) 이하로 시작하는 미디어 쿼리를 사용하여 배경 이미지의 중단 점을 만들었습니다. 다른 장치에 다른 이미지를 사용하고 싶기 때문에 이미지를 표시하지 않습니다 (모바일 장치가 물론 가장 큰 이미지를 다운로드하지 않도록). 각 이미지는 특정 중단 점에 정의됩니다. 그냥이 http://www.glorkianwarrior.com

라이브입니다, 일찍 말을 이것에 대한 CSS는 같은 간다 : 페이지, 스플래시 (321px 아래로) 988 픽셀 이하에 도달 그것 때문에 일단하게

.splash { 
    max-width: 988px; 
    margin:auto; 
    height:380px; 
} 

@media (min-width: 989px) { 
    .splash { 
     background: url('../images/academy.png') no-repeat; 
    } 
} 

@media (max-width: 989px) and (min-width: 321px) { 
    .splash { 
     background: url('../images/academy-mid.png') no-repeat; 
     max-width: 640px; 
     padding: 4px; 
     position: relative; 
     background-size: 100%; 
    } 
} 

을 이미지가 액체가됩니다. 브라우저가 너비가 640px 미만이 될 때까지 너비/높이가 실제로 변경되지 않습니다. .splash 아래에 중첩되어있는 그 아래의 탐색 막대에서는 위치가 변경되지 않습니다. 이것은 .splash의 높이에 연결되어 있기 때문입니다. html은 다음과 같습니다.

<header class="splashhead"> 
    <div class="splash"> 
    <nav class="kochalka"> 
     <ul> 
     <li class="navclass first active"><a href="http://glorkianwarrior.com/" title="Home" >Home</a></li> 
     <li class="navclass"><a href="news/" title="News" >News</a></li> 
     <li class="navclass"><a href="gallery.html" title="Gallery" >Gallery</a></li> 
     <li class="navclass last"><a href="guide.html" title="Guide" >Guide</a></li> 
     </ul> 
    </nav> 
    </div> 
</header> 

높이를 지정하지 않으면 사라집니다. 나는 페이지 자체의 100 % 또는 백분율을 제공하려고 노력했다. 부모에게 특정 높이를 부여하고 .splash를 100 % 수행하려고 시도했지만 탐색 막대의 배치는 변경되지 않았습니다.

브라우저 크기에 따라이 탐색의 크기를 변경할 수 있습니까? 나 자신의 div 내의 각 이미지를 페이지에서 이미지를 사용하고 미디어 쿼리를 사용하여 표시하는 방법을 찾아야합니까? 관련이없는 div는 없습니다.

Answer 1

nav을 div 안에 넣은 다음 영리한 CSS를 사용하여 가로 세로 비율을 지정해야합니다. 아래 참조 - 여기

은 당신의 코드입니다 : 당신이

<header class="splashhead"> 
    <div class="splash"> 
    <div class="wrapper"> 
     <nav class="kochalka" style=""> 
     <ul> 
      <li class="navclass first active"><a href="http://glorkianwarrior.com/" title="Home">Home</a></li> 
      <li class="navclass"><a href="news/" title="News">News</a></li> 
      <li class="navclass"><a href="gallery.html" title="Gallery">Gallery</a></li> 
      <li class="navclass last"><a href="guide.html" title="Guide">Guide</a></li> 
     </ul> 
     </nav> 
</div> 

    </div></header> 

은 또한 다음과 같은 스타일을 추가 볼 수 있듯이 nav 주위에 wrapper 사업부를 추가 한 을하고 당신이 원하는대로 작동

<style> 
.wrapper { 
width: 100%; 
display: inline-block; 
position: relative; 

} 
.wrapper:after { 
    padding-top: 56.25%; /*16:9 ratio*/ 
    display: block; 
    content: ''; 
} 
</style>