texte et image sprites sur le menu horizontal UL

Question

im essayant de construire un menu horizontal avec des images et du texte sprites

Voici une image de ce que je veux, mais à défaut de faire avec css.

mon css ressemble à ceci.

 

    #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;} 

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

Comme vous pouvez le voir, les images sont au-dessus du texte et montrant également plus d'une icône. :(

Quelqu'un peut-il s'il vous plaît me aider avec ça? Je ne veux pas appeler chaque icône par séparé. Merci beaucoup!

Answer 1

Vous devrez créer vos sprites un peu différemment .

au lieu de mettre les icônes suivant les uns aux autres, les mettre sur les uns des autres. de cette façon, tout ce que vous avez à faire est d'ajuster le positionnement y pour se rendre à l'icône que vous voulez.

Vous pourriez être également intéressé à utiliser un de ces outils:

http://csssprites.com/

http://spriteme.org/