文本和圖像精靈

Question

我嘗試建立與精靈的圖像和文字

這裏，橫向菜單是什麼，我想，但不能用CSS實現圖像。

我的CSS是這樣的。

 

    #top_menu { 
     color: #FFFFFF; 
     height: 40px; 
     background-color:#222; 
     float: right; 
    } 
    #top_menu ul { 
     font-size: 13px; 
     margin-top: 13px; 
    } 
    #top_menu li { 
     display: inline; 
     list-style-type: none; 
     padding-right: 10px; 
    } 

    .sprite {background:url(images/sprite.png);} 
    .transparent {background:url(/images/transparent.png);} 
     .contact {height:18px;} 


      /*Top menu icons*/ 
      .sales{width:13px;background-position:-1px -72px;} 
      .login{width:13px;background-position:-15px -72px;} 
      .forum{width:13px;background-position:-29px -72px;} 
        .livechat{width:13px;background-position:-44px -72px;} 

HTML部分

<div id="top_menu" class="grid_6"> 
     <ul id="top_nav"> 
     <li class="sprite contact sales"><span>Sales:1-800-555-7777</span></li> 
     <li class="sprite contact login"><span>Administrator</span></li> 
     <li class="sprite contact forum"><span>Forum</span></li> 
     <li class="sprite contact livechat"><span>Live Chat</span></li> 
     </ul> 
    </div> 

正如你所看到的圖像是對文本的頂部，也顯示一個以上的圖標。 :(

任何人都可以請幫我這個？我不想由單獨調用每個圖標。 非常感謝！

Answer 1

你必須以不同的方式創建你的精靈一點。

而不是把圖標下一個彼此的，把它們在彼此的頂部。這樣一來，所有你需要做的就是調整Y定位來獲得你想要的圖標。

您可能也有興趣使用這些工具之一：

http://csssprites.com/

http://spriteme.org/