Как использовать спрайты css в этом виде меню?

Question

Я пытаюсь использовать css спрайты в этом MENU, используя простые значки для каждого элемента меню без везения, потому что ему нужно установить 16px widht. Но если я это сделаю, то все это будет беспорядочно (лично).

Образ спрайта находится HERE, но я не знаю, cnw wnought, чтобы он работал сам по себе, я пытался без везения и не влиял на текущую функциональность. (li ul должен иметь widht auto, чтобы получить родительский widht и автоматически настроить на промежутки).

Пожалуйста, мне нужна помощь с этим :(

. Решение: CSS

.nav li a{ 

line-height: 16px; /* new position */ 
position: relative; /* new position */ 
padding-left: 24px; /* new position */ 

} 

.iconized i{ 
background: url("images/icons/menu.png") no-repeat scroll transparent; 
display: inline-block; 
height: 16px; 
vertical-align: middle; 
width: 16px; 
margin-right: 3px; 

position: absolute; /* new position */ 
left: 5px;/* new position */ 
} 

.iconized li .user{ 
background-position: -2px -2px; 
} 

РЕШЕНИЕ: HTML

<ul class="nav iconized left"> 
    <li><a href="#"><i class="user"></i><span>Profile</span></a></li> 
</ul> 

Answer 1

спрайт изображение только изображение, которое лишь частично отображается. Это достигается путем создания элемента (обычно это div, но может быть и другим элементом). Вы придаете элементу фиксированную ширину и высоту (16 пикселей в вашем случае). n вы используете свойство background css для размещения части изображения на фоне элемента. Установив свойство css background-position, вы можете определить, какая часть изображения отображается, указав координаты пикселя фонового изображения, который должен находиться в левом верхнем углу вашего элемента.

Так вы CSS вы пишете что-то вроде этого:

.icon { 
    background-image: url('yoursprite.png'); 
    width: 16px; 
    height: 16px; 
} 

.icon.i1 { 
    background-position: 0 0; /* Second image on the first row */ 
} 
.icon.i2 { 
    background-position: 0, -16px; /* Second image on the first row */ 
} 
/* Etc */ 

И в вашем HTML вы пишете это:

<div class="icon i1"></div> 
<div class="icon i2"></div> 
<div class="icon i3"></div> 
<div class="icon i4"></div> 

Таким образом, каждый ДИВ будет отображать различную часть изображения в его фоне.