YUIメニューバーに適用する正しいCSSとは何ですか？

Question

YUI menu controlのヘッダーイメージとしてCSSスプライトを使用する最良の方法を理解しようとしています。

私は、次のCSSとCSSスプライトを持っている：私はYUIのメニューにこれを適用することができますどのように

.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;} 

？

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

彼らが正しい位置に出てくるが、いくつかの問題で：

• 項目間の行があると私はボタンに正しいロールオーバー作品をロールオーバーするとき、私は
• それらを削除するには理想的な方法を必要としますしかし、メニューをロールオフして画面の主要部分に移動すると、ボタンが消えます。
• タグは<li>の下にあり、最上位レベルの項目はもう機能しません。

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

Answer 1

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

2：これがロールバックされると、これは聞いたことがありません。あなたは動的なイメージを使用していますか？ CSSでは、サーバー側のコードを使ってオンザフライで作成しているようです。これは問題、あるいは多分何らかのキャッシュ問題かもしれません。わからない。

3：スプライトシートには、既に表示されているテキストがありますか？通常、それはスプライトシートでどのように動作するのですか？これにより、一般にテキストが隠されます。このテキストが依然として必要な場合は、タグをという表示に設定するCSSを確認してください：なし。それはまたYUIのjavascriptにあるかもしれません、私はひどくYUIに精通していません。 ;）

Answer 2

あなたが見ている問題の実例を提供できますか？あなたの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;} 

Answer 3

スプライトを使用するいくつかのYUIメニューがありますが、それはちょっと難しいです。

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

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

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

希望に役立ちます。