当前位置： 文江博客话题详情

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

发布于 2024-11-27 00:53:47 字数 14614 浏览 2 评论 0原文

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

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

I have 9 Buttons along the bottom nav of my web app (think iOS nav bar - but this is NOT a mobile app).

All buttons are Sprite Images with 3 states.

How do I align all images, i.e. buttons, to the bottom of the nav bar (or div)? Basically, each icon is slightly different sized, and within the PNG, underneath each icon there is text.

I want all of the text to be aligned, therefore all of the buttons must be bottom-aligned.

How do I do this? CSS solution? HTML Solution?

Thanks for your help,

D

See markup below:

<html>
<head>

<link href='http://fonts.googleapis.com/css?family=Lobster&v2' rel='stylesheet'type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Lobster+Two&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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

梦回旧景 2024-12-04 00:53:47

这看起来更像是一个 Photoshop 剪切问题。以下是我的方法，假设您的标记结构如下：

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

查找最高图标的高度并将其设置为

  • 的高度。然后找到最宽图标的宽度并将其设置为
  • 的宽度。

    • 您必须非常仔细地布局精灵文件中的图标，并根据我上面提到的最大宽度和高度均匀地间隔图标（我将使用 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}

    This seems like more of a photoshop-chopping question than anything. Here's how I would approach, assuming that your markup is structured as follows:

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

    Find height of the tallest icon and set that as the height of your <li>. Then find the width of the widest icon and set that as the width of your <li>.

    You'll have to layout the icons in your sprite file very carefully, and space the icons evenly according to max width and height that I mentioned above (I would use photoshop rulers and guides to create a grid make your life easier). Each icon state should be in a row. The key to aligning the icons on the bottom is how you lay out the icons in photoshop.

    I would do it this way assuming your tallest icon is 40px and your widest icon is 30px. I am setting the height to 60px so there is room at the bottom for the text to go underneath the icon.

    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}
    回复 原文
    楠木可依 2024-12-04 00:53:47

    无论每个图标的大小是多少，您都应该在精灵上均匀放置图标。

    如果每个按钮的空间为 36 x 36 像素，那么您需要将每个已对齐的图标放置在精灵中 36 x 36 正方形的底部，然后只需使用 36 像素网格定位精灵即可。

    Regardless of what size each icon is, you should make your sprite with evenly positioned icons on it.

    If you have a space of lets say 36 x 36px for each button, then you need to place each icon already aligned at the bottom of a 36x36 square in your sprite, then you just position the sprite using a 36px grid.

    回复 原文
    ~没有更多了~

    关于作者

    飘逸的'云

    暂无简介

    0 文章
    0 评论
    24 人气
    发私信

    相关话题

    更多

    热门标签

    操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
    更多

    推荐作者

    胡图图

    文章 0 评论 0

    zt006

    文章 0 评论 0

    z祗昰~

    文章 0 评论 0

    冰葑

    文章 0 评论 0

    野の

    文章 0 评论 0

    天空

    文章 0 评论 0

    更多

    友情链接

    文江博客
      我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
      原文