스프라이트 및 절대 위치 지정 문제 : 작업 2 개와 2 개가 필요하지 않습니까?

Question

미안 나는 스프라이트가 꽤 많이 다루어 지지만 내 특정 상황에 대한 답변을 찾을 수 없었다는 것을 알고있다.

'집'버튼에는 3 가지 상태 (링크, 호버, 활성)가있는 동일한 .png 파일을 사용하는 4 개의 절대 배치 버튼이 있지만 호버는 전체 버튼이 아니며 '자동차' 버튼은 호버이지만 다른 두 개의 버튼은 클릭 가능 또는 호버 블 영역이 없습니다.

이 문제를 다루는 대부분의 기사는 높이/너비를 조정한다고 말하지만 이미지는 이동하지만 텍스트는 이동하지 않으므로 어떤 호버링 문제도 변경되지 않습니다. 시도 ..

필요한 스타일 :

span.nav-button-adjust { display:block; 
          position:relative; 
          top:3px; 
          left:9px; 
} 

span.nav-button a:link, 
span.nav-button a:visited { display:block; 
           width: 91px; height: 30px; 
           background-image: url(images/nav-button.png); 
           background-position: top; 
           background-repeat: no-repeat; 
           font-family:arial black; 
           text-decoration:none; 
           color:#1461b2; 
} 

span.nav-button a:hover { background-image: url(images/nav-button.png); 
          background-position: center;  
} 

span.nav-button a:active { background-image: url(images/nav-button.png); 
           background-position: bottom;  
} 

필요한 HTML :

<span class="nav-button"><a href="home.php" style="position:absolute;left:420px;top:17px"><span class="nav-button-adjust">&nbsp;&nbsp;HOME</span></a></span> 
<span class="nav-button"><a href="about.php" style="position:absolute;left:522px;top:17px"><span class="nav-button-adjust">&nbsp;ABOUT</span></a></span> 
<span class="nav-button"><a href="cars.php" style="position:absolute;left:392px;top:59px"><span class="nav-button-adjust">&nbsp;&nbsp;CARS</span></a></span> 
<span class="nav-button"><a href="search.php" style="position:absolute;left:496px;top:59px"><span class="nav-button-adjust">SEARCH</span></a></span> 

편집 : 요청에 따라 :

,536,913,632를 10

이미지 내가 사용하고 : 여기 https://dl.dropboxusercontent.com/u/12017360/cars/images/nav-button.png

Answer 1

당신은 너무 많은 당신의 CSS와 특히 HTML로 진행했다. 다음을 통해 원하는 것을 정리할 수 있습니다. 절대 위치 지정을 사용할 필요가 없습니다.

다음 jsFiddle에서, 마우스를 가져 가거나 링크를 클릭하면 배경 이미지의 다른 부분을 얇게 찔러 보게됩니다. 그건 당신이 스프라이트를 만들거나 셋업하는 방법과 관련이 있습니다.

http://jsfiddle.net/ucsNH/

해당 링크는 키가 30 픽셀 수있는 경우 확실하지. 그렇지 않은 경우 #nav a { height: 29px; line-height: 29px;을 설정하고 을 1 픽셀 조정하여 0 -1px, 0 -30px, 0 -59px이되도록 수정할 수 있습니다. 두 번째 jsFiddle를 참조하십시오.

http://jsfiddle.net/ucsNH/2/

CSS

ul, li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    font: 12px/1.5em Arial, sans-serif; /* this should be inherited */ 
} 
#nav { 
    width: 202px; /* (5px + 91px + 5px) x 2 */ 
} 
#nav li { 
    float: left; 
    margin: 5px; 
} 
#nav a:link, 
#nav a:visited { 
    display: block; 
    width: 91px; 
    height: 30px; 
    line-height: 30px; /* vertically centers text */ 
    text-transform: uppercase; 
    color:#1461b2; 
    background: url(images/nav-button.png) no-repeat 0 0; 
    text-decoration: none; 
    text-align: center; 
    font-weight: bold; 
} 
#nav a:hover { 
    background-position: 0 -29px; 
} 
#nav a:active { 
    background-position: 0 -58px; 
    color: white; 
} 
.home, 
.about { 
    position: relative; 
    left: 25%; 
} 

HTML HTML은 당신이 언급하지 않았다 많은 정돈되어 있는지

<ul id="nav"> 
    <li class="home"><a href="#">Home</a></li> 
    <li class="about"><a href="#">About</a></li> 
    <li><a href="#">Cars</a></li> 
    <li><a href="#">Search</a></li> 
</ul> 

?

탐색은 순서가 지정되지 않은 목록 <ul>에 배치해야합니다. 앵커에 <a> 태그가있는 것처럼 인라인 스타일은 피하십시오. span 태그는 앵커 태그 안에 필요하지 않으므로  을 사용하여 사물 (텍스트)을 푸시하면 안됩니다. 공간이 필요한 경우 margin 및 padding을 사용하십시오.그게 그들이 원하는거야!

Answer 2

당신이 내가 작업하는 모든 호버 버튼이있는 jfiddle을 만들어 가고, 바로 이것이 당신이 찾고 있던 무엇을 확인하기 위해 그것을 클릭? 그렇다면 왼쪽의 진드기를 클릭하여 정답으로 선택하십시오.

난 위치에 있었다 만든 유일한 변경,

<span class="nav-button"><a href="home.php" style="position:absolute;left:220px;top:17px"><span class="nav-button-adjust">&nbsp;&nbsp;HOME</span> 
</a> 
</span> 
<span class="nav-button"><a href="about.php" style="position:absolute;left:322px;top:17px"><span class="nav-button-adjust">&nbsp;ABOUT</span> 
</a> 
</span> 
<span class="nav-button"><a href="cars.php" style="position:absolute;left:192px;top:59px"><span class="nav-button-adjust">&nbsp;&nbsp;CARS</span> 
</a> 
</span> 
<span class="nav-button"><a href="search.php" style="position:absolute;left:296px;top:59px"><span class="nav-button-adjust">SEARCH</span> 
</a> 
</span>