CSS Sprites - How to Align-bottom all Sprite Buttons

2023-03-24 00:35 问答作者：

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,

See markup below:

<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')开发者_JS百科;
    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>

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}

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.

继续阅读：css css-sprites sprite

CSS Sprites - How to Align-bottom all Sprite Buttons

更多精彩内容

精彩评论

最新问答

绝区零男女主角怎么切换?？

索尼索尼65x95j怎样辨别是新机？

极品飞车集结最低配置是什么?？

输卵管造影有治疗作用吗？

绝区零是单机游戏吗?？

问答排行榜

Escaping "<" in Perl-generated XML

微信重新建群怎么建？

imessage会显示已读吗？

太快了能不能慢一点好爽~好大~不要拔出来了？

二年级家长回音怎么写大全简短的（二年级家长回音怎么写）？