CSS Sprites - 如何對齊底部所有Sprite按鈕

我有9個按鈕沿着我的Web應用程序的底部導航（想想iOS的導航欄 - 但這不是一個移動應用程序）。CSS Sprites - 如何對齊底部所有Sprite按鈕

所有按鈕都是具有3個狀態的Sprite圖像。

如何將所有圖像（即按鈕）對齊到導航欄（或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標尺和指南來創建網格，讓你的生活更輕鬆）。每個圖標狀態應該在一行中。調整底部圖標的關鍵是如何在Photoshop中佈置圖標。

我會這樣做，假設您的最高圖標是40px，最寬的圖標是30px。我將高度設置爲60像素，因此底部有空間可放置圖標下方的文字。

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 36像素，那麼您需要將每個圖標都放在您的精靈36x36平方的底部，然後您只需使用36像素的網格來定位精靈。

來源

2011-08-01 04:53:01 ramono

我確實按照您的建議使用了所有我的PNG。由於有許多PNG，我通過CSS Sprite Generator（http://spritegen.website-performance.org/）將它們全部放在一個巨大的PNG上，這使我可以獲得每幅圖像的所有座標。 –

我現在看到你有從43px到112px高度的各種尺寸的按鈕（除了圖標）。我認爲這需要大量的手冊，包括編輯精靈。 – ramono

CSS Sprites - 如何對齊底部所有Sprite按鈕

回答

相關問題