0

CSSスプライトを使用してナビゲーションメニューを作成しています。多くの画像をアップロードする代わりに、それらをすべてマージし、背景位置を移動することでホバー、アクティブな効果を見ることができます。 -apples-navigation-bar-using-css-sprites/

私のナビゲーションの違いは、ナビゲーション要素の間にスペースがあり、背景をうまく動かす方法が見つからないことです。

要素が互いに近すぎてポップアップするか (つまり、要素間でホバリングしているときに要素間にスペースが残っていない)、プロパティを変更すると背景がほとんど/大きく移動しすぎます。

(http://s17.postimage.org/ska9gj065/navprrrob.jpg)

これが私のナビゲーションとサイズです：

「プライサー」ボタン - 幅: 100px;
「Priser」と「Reservere」の間のスペース - 15px。
"Reservere" - 幅: 120px;
"Reservere" と "Klub" の間のスペース - 14px。
"クラブ" - 幅: 100px;

画像に全部載せられなくてすみません。

ここに私のHTMLがあります:

<div class="nav">
  <ul id="nav">
    <li id="list1"><a href="#"><span>Priser</span></a></li>
    <li id="list2"><a href="#"><span>Reservere</span></a></li>
    <li id="list3"><a href="#"><span>Klub</span></a></li> 
  </ul>
</div>

そして私のCSS： 

#nav span {
  display: none;
}

#nav li {
  list-style-type: none;
  float: left;
}

#nav a {
  height: 45px;
  display: block;
}

#list1 { width: 100px; }
#list2 { width: 130px; }
#list3 { width: 100px; }

#list1 a:hover {
  background: url(images/nav.png) 0px -45px no-repeat;
}

#list2 a:hover {
  background: url(images/nav.png) -115px -45px no-repeat;   
}

#list3 a:hover {
  background: url(images/nav.png) -260px -45px no-repeat;   
}

テストするまで理解するのは簡単ではないかもしれませんが、現時点ではホストする場所がありませんでした.

だから、質問：

  1. 要素間に未使用のスペースがある場合、この CSS スプライトを使用することは可能ですか?
  2. もしそうなら、この場合のパラメータは何であるべきですか?
4

2 に答える 2

0

背景画像を持つコンテナに幅と高さを指定し、画像の幅と高さと同じように表示:ブロックにする必要があります(例:プライザーの幅は100にする必要があります)。

于 2012-06-04T10:20:42.193 に答える
0

確かにあなたはそれを行うことができます。まず<li>、背景ボタンとまったく同じ幅を -s に設定する必要があります。次に、使用marginして目的の間隔を取得します。つまり、次のようになります。

#list2 { width: 120px; margin-right: 15px; }
于 2012-06-04T10:21:38.410 に答える