Question

У меня 9 кнопок вдоль нижней навигации моего веб-приложения (думаю, панель навигации iOS - но это НЕ мобильное приложение).

Все кнопки являются изображениями Sprite с 3 состояниями.

Как мне выровнять все изображения, т.е. кнопки, по нижней части навигационной панели (или div)?По сути, каждый значок немного отличается по размеру, а внутри PNG под каждым значком находится текст.

Я хочу, чтобы весь текст был выровнен, поэтому все кнопки должны быть выровнены снизу.

Как мне это сделать?Решение CSS?HTML Solution?

Спасибо за помощь,

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>

j-man86 · Answer 1 · 01 августа 2011

Похоже, что это вопрос о том, как разбить фотошоп. Вот как я бы подошел, предполагая, что ваша разметка структурирована следующим образом:

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

Вам придется очень аккуратно расположить значки в файле спрайта и расположить значки равномерно в соответствии с максимальной шириной и высотой, которые я упомянул выше (я бы использовал линейки и направляющие для фотошопа, чтобы создать сетку, которая облегчит вашу жизнь) , Каждое состояние значка должно быть в ряд. Ключ к выравниванию значков в нижней части - это способ размещения значков в фотошопе.

Я бы сделал это так, если бы ваш самый высокий значок был 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}

ramono · Answer 2 · 01 августа 2011

Независимо от того, какого размера каждая иконка, вы должны сделать свой спрайт с равномерно расположенными иконками на нем.

Если у вас есть пространство, скажем, 36 х 36 пикселей для каждой кнопки, то вам нужно разместить каждуюзначок уже выровнен внизу квадрата 36x36 в вашем спрайте, тогда вы просто размещаете спрайт с помощью сетки 36px.

CSS Sprites - Как выровнять нижние все кнопки Sprite

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

CSS Sprites - Как выровнять нижние все кнопки Sprite

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы