스프라이트 이미지가 표시되지 않습니까?

Question

왜 내 스프라이트 이미지가 노란색 테두리가있는 상자의 배경으로 표시되지 않습니까?

사람이 좋은 것 내가 변화해야하는지에 대한 몇 가지 예제와 함께 할 수 있다면 ..

그냥 날, allready 게시이의 코드에 comapred 더 많은 텍스트를 필요로하게 예를 들면 다음과 같습니다이 있습니다 게시 여기

-.- 내 코드입니다 :

HTML :

<div class="repeat"> 
    <div style='width:100%;'> 
     <div style='float:left;margin-top:107px;margin-left:50px;width:80px;height:100px;border:1px solid yellow;'> 
      <div class="menu"> 
       <ul id='nav'> 
        <li class='front'><a href='?p=front'>Front</a></li> 
       </ul> 
      </div> 
     </div> 
     <div style='float:left;margin-top:107px;margin-left:10px;width:80px;height:100px;border:1px solid yellow;'></div> 
     <div style='clear:both;'></div> 
    </div> 
</div> 

CSS는 :

.repeat { 
    float:left; 
    width: 884px; 
    height: auto; 
    min-height:700px; 
    background: url(images/repeat.png) repeat-y; 
    z-index:2; 
} 

.menu { 
    width:80px; 
    height:100px; 
    position:relative; 
    } 
    ul#nav { 
     list-style: none inside; 
     } 
     ul#nav li { 
      display: inline; 
      } 
      ul#nav li a { 
       display: block; 
       height: 40px; 
       float: left; 
       } 
       ul#nav li.front a{ 
        width:80px; 
        background: url(images/menu/p1.png) top center no-repeat; 
        }    
        ul#nav li a:hover { 
         background-position: bottom center; 
        } 
       ul#nav li.front2 a{ 
        width:80px; 
        background: url(images/menu/p1.png) bottom center no-repeat; 
       } 

Answer 1

background-image은 spritemap (center top)의 일부가 비어 있고 no-repeat으로 설정되어 있다는 것을 제외하고는 정상적으로 나타납니다. 또한 목록을 재설정하지 않아 하위 요소가 이상하게 오프셋됩니다.

개정 :

ul#nav { padding: 0; } 

ul#nav li.front a { 
     background: url("images/menu/p1.png") repeat-y center bottom transparent; 
     width: 80px; 
     height: 87px; 
} 

이 아마 모든 문제가 해결되지 않습니다. 마크 업과 CSS를 통해 달성하고자하는 목표는 분명하지 않습니다. 앵커 태그의 절대 위치를 지정하는 것이 좋을지도 모르며 단순히 정리를 해보십시오.

Answer 2

스프라이트가 잘 보여주고있다 ... 그것은 전체 설정에서 보이지 않는 그냥 것을
. "ul # nav li.front a"선택기에 높이 : 80px를 추가하면 잘못된 위치가 표시됩니다.
거기에서 직접 시도하십시오.

힌트 : 브라우저 개발자 도구 (Chrome을 선호 함)를 사용하고 각 요소 위에 마우스를 올리면 차지하는 영역을 확인할 수 있습니다. 귀하의 경우에는 'div 메뉴'와 'li a'요소를 확인하십시오.

Answer 3

이렇게해야합니다. 원하는 스타일의 상자를 타겟팅하는 규칙이 없습니다. 그리고 둘 사이의 틈을 메우는 단일 빨간색 이미지를 원하지 않으면 "ul # nav li.front a"선택기에 대한 규칙을 제거해야합니다. `백그라운드에서 상대 URL이 아닌 절대 퍼팅

.yellowBox 
{ 
    float: left; 
    margin-top: 107px; 
    width: 80px; 
    height: 100px; 
    border: 1px solid yellow; 
    background-image: url(images/menu/p1.png); 
} 

#box1 
{ 
    margin-left: 50px; 
} 

#box2 
{ 
    margin-left: 10px; 
} 


<div class="repeat"> 
    <div style="width:100%;"> 
     <div class='yellowBox' id='box1'> 
      <div class="menu"> 
       <ul id="nav"> 
        <li class="front"><a href="?p=front">Front</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class='yellowBox' id='box2'></div> 
     <div style="clear:both;"></div> 
    </div> 
</div>