CSS Sprites - 如何对齐所有Sprite按钮

时间：2011-08-01 04:38:13

标签： html css css-sprites sprite

我的网络应用程序底部导航中有9个按钮（想想iOS导航栏 - 但这不是移动应用程序）。

所有按钮都是具有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>

2 个答案:

答案 0 :(得分：2)

无论每个图标的大小是多少，都应该让你的精灵上有均匀分布的图标。

如果每个按钮有一个36 x 36px的空间，那么你需要将每个图标放在你的精灵中36x36方块底部对齐，然后你只需使用36px网格定位精灵。 / p>

答案 1 :(得分：2)

这看起来像是一个比任何东西都更像是一个切纸的问题。假设你的标记结构如下：

，这就是我的方法 
<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。我将高度设置为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}
相关问题
最新问题