текстовые и графические спрайты в горизонтальном меню UL

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/