CSS Sprites - 모든 Sprite 버튼을 정렬하는 방법

내 웹 앱의 아래쪽 탐색 버튼에 9 개의 버튼이 있습니다 (iOS 탐색 바를 생각해보세요.하지만 모바일 앱은 아닙니다).CSS Sprites - 모든 Sprite 버튼을 정렬하는 방법

모든 버튼은 3 개의 상태가있는 스프라이트 이미지입니다.

모든 이미지, 즉 버튼을 탐색 표시 줄 (또는 div)의 하단에 어떻게 정렬합니까? 기본적으로 각 아이콘의 크기가 약간 다르며 PNG 내 각 아이콘 아래에 텍스트가 있습니다.

모든 텍스트를 정렬하려면 모든 단추가 아래쪽에 맞춰져 있어야합니다.

어떻게하면됩니까? CSS 솔루션? HTML 솔루션? 당신의 도움에 대한

감사합니다,

페이지의 마크 업 아래

D :

는 관계없이 각 아이콘은 무엇 크기의

<html> 
<head> 

<link href='http://fonts.googleapis.com/css?family=Lobster&amp;v2' rel='stylesheet'type='text/css' /> 
<link href='http://fonts.googleapis.com/css?family=Lobster+Two&amp;v2' rel='stylesheet' type='text/css' /> 
<style type="text/css"> 

body { 
    background: #000; 
    color: #ffffff; 
    font-family: 'Lobster', cursive; 
    font-family: 'Lobster Two', cursive; 
    background:#ffffff url('../Background1.png'); 
    } 

/*Get Boxeeee with it*/ 
.box 
{ 
width: 1700px; 
height: 100px; 
margin: 0px; 
padding: 0px; 

} 

.box a 
{ 

float: left; 
margin-right:20px; 
} 



/*Logo CSS Sprites CSS ONLY*/ 

.sprite-Bunches-small-normalcopy { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: 0 -94px; width: 139px; height: 44px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-Bunches-small-normalcopy:hover { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: 0 0; width: 139px; height: 44px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-Bunches-small-normalcopy:active { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: 0 -188px; width: 139px; height: 44px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 


/*Start Bunches Button CSS ONLY*/ 

.sprite-start-regular { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -189px -737px; width: 130px; height: 43px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-start-regular:hover { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: 0 -282px; width: 130px; height: 43px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-start-regular:active { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -189px -644px; width: 130px; height: 43px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

/*Press to Talk Button CSS ONLY*/ 

.sprite-talk-normal { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -189px -923px; width: 130px; height: 43px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-talk-normal:hover { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -189px -830px; width: 130px; height: 43px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-talk-normal:active { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -189px -1016px; width: 130px; height: 43px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 


/*Camera Pic Button CSS ONLY*/ 

.sprite-camera-normal { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: 0 -530px; width: 123px; height: 105px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    vertical-align: bottom; 
    } 

.sprite-camera-normal:hover { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: 0 -375px; width: 123px; height: 105px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-camera-normal:active { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: 0 -685px; width: 123px; height: 105px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

/*Chat Button w/JS (+1 to Hover Y, and -1 to Active(s)), +1 to Active Height*/ 

.sprite-chat-normal{ 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: 0 -992px; width: 102px; height: 102px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-chat-normal:hover { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: 0 -841px; width: 102px; height: 102px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-chat-normal:active, .chat-active { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: 0 -1143px; width: 102px; height: 103px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-chat-normal1:active { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: 0 -1144px; width: 102px; height: 102px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 


/*Invite Button w/JS (+1 to Hover Y, and -1 to Active(s)), +1 to Active Height*/ 

.sprite-invite-normal{ 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: 0 -1439px; width: 105px; height: 93px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-invite-normal:hover { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: 0 -1297px; width: 105px; height: 93px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-invite-normal:active, .invite-active{ 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: 0 -1581px; width: 105px; height: 94px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-invite-normal1:active { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: 0 -1582px; width: 105px; height: 93px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 



/*MIC Button w/JS (abs+1 to Hover Y, and abs-1 to Active(s)), +1 to Active Height*/   

.sprite-mic-normal { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: 0 -1886px; width: 74px; height: 111px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-mic-normal:hover { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: 0 -1726px; width: 74px; height: 111px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-mic-normal:active, .mic-active { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -189px 1; width: 74px; height: 112px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

     .sprite-mic-normal1:active{ 
      background-image: url('../Images/Sprites/giantsprite.png'); 
      background-position: -189px 0; width: 74px; height: 111px; 
      display: block; 
      text-indent: -9999px; 
    vertical-align: bottom; 
      } 


/*Music Button w/JS (abs+1 to Hover Y, and abs-1 to Active(s)), +1 to Active Height*/  

.sprite-music-normal { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -189px -322px; width: 99px; height: 111px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-music-normal:hover { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -189px -162px; width: 99px; height: 111px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-music-normal:active, .music-active { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -189px -482px; width: 99px; height: 112px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

    .sprite-music-normal1:active{ 
     background-image: url('../Images/Sprites/giantsprite.png'); 
     background-position: -189px -483px; width: 99px; height: 111px; 
     display: block; 
     text-indent: -9999px; 
    vertical-align: bottom; 
     } 


/*Movie Button w/JS (abs+1 to Hover Y, and abs-1 to Active(s)), +1 to Active Height*/ 

.sprite-video-normal { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -189px -1252px; width: 103px; height: 93px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-video-normal:hover { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -189px -1110px; width: 103px; height: 93px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-video-normal:active, .video-active{ 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -189px -1394px; width: 103px; height: 94px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

    .sprite-video-normal1:active{ 
     background-image: url('../Images/Sprites/giantsprite.png'); 
     background-position: -189px -1395px; width: 103px; height: 93px; 
     display: block; 
     text-indent: -9999px; 
    vertical-align: bottom; 
     } 

/*Webcam Button w/JS (abs+1 to Hover Y, and abs-1 to Active(s)), +1 to Active Height*/ 

.sprite-webcam-normal { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -779px 0; width: 70px; height: 86px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-webcam-normal:hover { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -189px -1929px; width: 70px; height: 86px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-webcam-normal:active, .webcam-active { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -779px -136px; width: 81px; height: 89px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

    .sprite-webcam-normal1:active{ 
     background-image: url('../Images/Sprites/giantsprite.png'); 
     background-position: -779px -136px; width: 81px; height: 89px; 
     display: block; 
     text-indent: -9999px; 
    vertical-align: bottom; 
     } 

/*Who's Here Button w/JS (abs+1 to Hover Y, and abs-1 to Active(s)), +1 to Active Height*/ 

.sprite-who-normal { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -779px -424px; width: 105px; height: 99px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-who-normal:hover { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -779px -276px; width: 105px; height: 99px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

.sprite-who-normal:active, .who-active { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -779px -572px; width: 105px; height: 100px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 

    .sprite-who-normal1:active { 
     background-image: url('../Images/Sprites/giantsprite.png'); 
     background-position: -779px -573px; width: 105px; height: 99px; 
     display: block; 
     text-indent: -9999px; 
     vertical-align: bottom; 
     } 



.sprite-waiting-video { 
    background-image: url('../Images/Sprites/giantsprite.png'); 
    background-position: -189px -1538px; width: 540px; height: 340px; 
    display: block; 
    text-indent: -9999px; 
    vertical-align: bottom; 
    } 
</style> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

$(document).ready(function(){ 
    $('.sprite-chat-normal').click(function() { 
     $(this).toggleClass('sprite-chat-normal').toggleClass('sprite-chat-normal1').toggleClass('chat-active'); 
    }); 
    }); 


/* Invite Button Toggle */ 

$(document).ready(function(){ 
    $('.sprite-invite-normal').click(function() { 
     $(this).toggleClass('sprite-invite-normal').toggleClass('sprite-invite-normal1').toggleClass('invite-active'); 
    }); 
    }); 



/* Mic Button Toggle */ 

$(document).ready(function(){ 
    $('.sprite-mic-normal').click(function() { 
     $(this).toggleClass('sprite-mic-normal').toggleClass('sprite-mic-normal1').toggleClass('mic-active'); 
    }); 
    }); 



/* Music Button Toggle */ 

$(document).ready(function(){ 
    $('.sprite-music-normal').click(function() { 
     $(this).toggleClass('sprite-music-normal').toggleClass('sprite-music-normal1').toggleClass('music-active'); 
    }); 
    }); 

/* Movie Button Toggle */ 

$(document).ready(function(){ 
    $('.sprite-video-normal').click(function() { 
     $(this).toggleClass('sprite-video-normal').toggleClass('sprite-video-normal1').toggleClass('video-active'); 
    }); 
    }); 



/* Webcam Button Toggle */ 

$(document).ready(function(){ 
    $('.sprite-webcam-normal').click(function() { 
     $(this).toggleClass('sprite-webcam-normal').toggleClass('sprite-webcam-normal1').toggleClass('webcam-active'); 
    }); 
    }); 


/* Who's Here Button Toggle */ 

$(document).ready(function(){ 
    $('.sprite-who-normal').click(function() { 
     $(this).toggleClass('sprite-who-normal').toggleClass('sprite-who-normal1').toggleClass('who-active'); 
    }); 
    }); 


</head> 
<body> 
<div class="box"> 
<!--<a class="sprite-Bunches-small-normalcopy" href="#"></a> 
<a class="sprite-start-regular" href="#"></a> 
<a class="sprite-talk-normal" href="#"></a>--> 
<a class="sprite-camera-normal" href="#"></a> 
<a class="sprite-chat-normal" href="#"></a> 
<a class="sprite-invite-normal" href="#"></a> 
<div style="float:right;"> 
<a class="sprite-mic-normal" href="#"></a> 
<a class="sprite-music-normal" href="#"></a> 
<a class="sprite-video-normal" href="#"></a> 
<a class="sprite-webcam-normal" href="#"></a> 
<a class="sprite-who-normal" href="#"></a> 
</div> 
</div> 
</body> 
</html>

출처

2011-08-01 David J. Phillips

왜 여기에 HTML을 표시하지 않으시겠습니까? 절대 위치 지정을 사용하거나 left : x 및 top : y를 사용할 수 있습니다. – Kangkan

Thx, 마크 업을 추가했으며 HTML은 하단에 있습니다. –

이것은 포토샵을 도마뱀 찍는 질문보다 더 좋아 보입니다. 여기에 다음과 같이 마크 업의 구조 가정, 접근 할 방법은 다음과 같습니다

<nav> 
    <ul> 
      <li class="icon-a"> 
       <a> 
        <span class="icon"></span> 
        Text 
       </a> 
      </li> 

      <li class="icon-b"> 
       <a> 
        <span class="icon"></span> 
        Text 
       </a> 
      </li> 
    </ul> 
</nav>

찾기 가장 높은 아이콘의 높이와 설정 당신의 <li>의 높이와. 그런 다음 가장 넓은 아이콘의 너비를 찾고 너비 <li>의 너비로 설정하십시오.

스프라이트 파일의 아이콘을 매우 조심스럽게 배치하고 위에 언급 한 최대 너비와 높이에 따라 아이콘을 균등하게 배치해야합니다 (포토샵 눈금자와 격자를 사용하여 그리드를 만드는 것이 더 쉬워 짐)). 각 아이콘 상태는 한 행에 있어야합니다. 아래쪽의 아이콘을 정렬하는 열쇠는 Photoshop에서 아이콘을 배치하는 방법입니다.

가장 큰 아이콘이 40px이고 가장 넓은 아이콘이 30px라고 가정하면 이렇게 할 것입니다. 높이를 60px로 설정하면 하단에 텍스트가 아이콘 아래로 갈 수있는 공간이 있습니다.

nav li { 
    width: 30px; 
    height: 60px; 
    display: block; 
    float: left; 
} 

nav li a { 
    width: 30px; 
    height: 60px; 
    line-height: 15px; 
    display: block; 
    text-align: center 
} 

nav li a span { 
    width: 30px; 
    height: 40px; 
    padding-bottom: 5px; 
    display: block; 
    background: url(icons.png) no-repeat 
} 

nav li.icon-a span {background-position: 0 0} 
nav li.icon-a span:hover {background-position: 0 -40px} 
nav li.icon-a span:active {background-position: 0 -80px} 

nav li.icon-b span {background-position: -30px 0} 
nav li.icon-b span:hover {background-position: -30px -40px} 
nav li.icon-b span:active {background-position: -30px -80px}

출처

2011-08-01 05:03:42

, 당신이 그것을에 균등하게 배치 아이콘으로 스프라이트를해야한다.

각 버튼에 36 x 36px의 공간이 있다면, 36x36 사각형의 하단에 이미 정렬 된 각 아이콘을 스프라이트에 배치 한 다음 36px 그리드를 사용하여 스프라이트를 배치해야합니다.

출처

2011-08-01 04:53:01 ramono

나는 개인적인 PNG를 모두 권장했습니다. 많은 PNG가 있기 때문에 CSS Sprite Generator (http://spritegen.website-performance.org/)를 통해 하나의 거대한 PNG에 모든 이미지를 넣었습니다. 각 이미지의 모든 좌표를 제공합니다. –

43px에서 112px 높이의 다양한 크기의 버튼 (아이콘 제외)이 있습니다. 스프라이트를 편집하는 것을 포함하여 많은 수의 매뉴얼이 필요합니다. – ramono

CSS Sprites - 모든 Sprite 버튼을 정렬하는 방법

답변

관련 문제