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按钮

回答

相关问题