0

CSS スプライトをYUI メニュー コントロールのヘッダー イメージとして使用する最良の方法を見つけようとしています。

次の CSS を持つ CSS スプライトがあります。

.navImg0{width:61px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-0px -0px;}
.navImg0:hover{width:61px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-0px -23px;}
.navImg1{width:75px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-65px -0px;}
.navImg1:hover{width:75px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-65px -23px;}
.navImg2{width:96px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-144px -0px;}
.navImg2:hover{width:96px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-144px -23px;}
.navImg3{width:65px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-244px -0px;}
.navImg3:hover{width:65px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-244px -23px;}
.navImg4{width:98px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-313px -0px;}
.navImg4:hover{width:98px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-313px -23px;}

これを YUI メニューに適用するにはどうすればよいですか?

これまでのところ、navImg0、navImg1 などのスタイルをボタンに適用しました。

それらは正しい位置に表示されますが、いくつかの問題があります。

  • アイテムの間に線があり、それらを削除する理想的な方法が必要です
  • ボタンをロールオーバーすると正しいロールオーバーが機能しますが、メニューをロールオフして画面のメイン部分に移動すると、ボタンが消えます
  • 各最上位アイテムの下にある<a>タグは機能しません (内部にテキストがありません)。<li>

CSS の適用に関するドキュメントはたくさんありますが、CSS スプライトを画像として使用する方法の例は見つかりませんでした。

4

3 に答える 3

1

あなたが見ている問題の実際の例を提供できますか? CSS スニペットに基づいてデバッグするのは難しい。

問題とは関係ありませんが、毎回繰り返されるルールを組み合わせることで、CSS を小さくして維持しやすくすることができます。何かのようなもの

.navImg0, 
.navImg0:hover, 
.navImg1, 
.navImg1:hover, 
.navImg2, 
.navImg2:hover, 
.navImg3, 
.navImg3:hover, 
.navImg4, 
.navImg4:hover { background: url('/dynamicimage/navigation') no-repeat top left; }


.navImg0{width:61px;height:23px;background-position:-0px -0px;}
.navImg0:hover{width:61px;height:23px;background-position:-0px -23px;}
.navImg1{width:75px;height:23px;background-position:-65px -0px;}
.navImg1:hover{width:75px;height:23px;background-position:-65px -23px;}
.navImg2{width:96px;height:23px;background-position:-144px -0px;}
.navImg2:hover{width:96px;height:23px;background-position:-144px -23px;}
.navImg3{width:65px;height:23px;background-position:-244px -0px;}
.navImg3:hover{width:65px;height:23px;background-position:-244px -23px;}
.navImg4{width:98px;height:23px;background-position:-313px -0px;}
.navImg4:hover{width:98px;height:23px;background-position:-313px -23px;}
于 2009-04-07T15:24:23.720 に答える
0

1: マージン/パディングの問題のようです。aタグとliタグのマージンとパディングを確認します。

2: ロールバック時にこのようなことが起こるとは聞いたことがありません。使用している画像は動的ですか? CSS では、サーバー側のコードを使用してオンザフライで作成しているようです。これが問題であるか、何らかのキャッシュの問題である可能性があります。わからない。

3: スプライトシートには、表示されているものに既にテキストがありますか? 通常、それがスプライトシートでの動作方法であり、通常、このためテキストを非表示にします。それでもこのテキストが必要な場合は、aタグをdisplay: noneに設定する css を確認してください。YUI JavaScript にもあるかもしれませんが、私は YUI にあまり詳しくありません。;)

于 2009-04-07T13:48:28.973 に答える
0

スプライトを使用するいくつかの YUI メニューがありますが、少しトリッキーです。

マークアップから作成する場合は簡単です。CSS クラス名をアンカー タグに追加するだけです。JavaScript からメニューを構築している場合は、メニューをレンダリングした後にクラスを追加する必要があります。

YAHOO.util.Dom.addClass(theAnchorElemnt, 'the-sprite-css-class');

YUI は classname 構成プロパティーを提供していますが、それはあなたが望むものではありません。アンカーにスプライトを適用する必要があります。

それが役立つことを願っています。

于 2009-06-26T00:58:20.470 に答える