この種のメニューでCSSスプライトを使用するには？

Question

私は、このMENUのCSSスプライトを、各メニュー項目に単純なアイコンの代わりに使用するようにしました。これは16px widhtが設定されている必要があるためです。しかし、もし私がそれをするならば、すべてが乱されてしまいます。

画像スプライトはHEREですが、自分で動作させるためにwnought cssは知らないのですが、私は運が悪くなくても、現在の機能には影響しません。 （親は親を取得し、スパンには自動的に調整するために、ulにはautoのwidhtが必要です）。

私はこの:(助けが必要ください

SOLUTION：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; 
} 

SOLUTION：HTML

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

Answer 1

は、画像スプライトは部分的にしか表示されているだけの画像です。これは要素（通常はdivですが、他の要素も可能です）を作成することで実現されます。要素に固定幅と高さを指定します（あなたの場合は16px）。 n背景の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> 

この方法では、各div要素は、画像内の別の部分が表示されますがそう

は、あなたがこのような何かを書くCSSでその背景。