問題タブ [css-sprites]

CSSスプライトを使用して垂直ナビゲーションメニューを作成しようとしています。メニューオプションが少しスライドするホバー効果を入れたいと思います。

そのため、a：linkとa：hoverの両方に同じスプライト画像を使用しています。ポップアウト効果を作成するために、a：hoverの場合は幅を広げています。

このアナロジーを考えてみましょう。タブがすべてx=0に配置されている場合、現在のシナリオは次のとおりです。

これが私の完全なcssコードです：

誰かがここで私を助けてくれますか？

ありがとう

CSS スプライト ナビゲーションで 3 つの画像を使用することは可能ですか?

これはこういうことかもしれません

私の画像 http://img710.imageshack.us/img710/1429/navigx.jpg

可能な場合、結果はどうなりますか？

1 回のナビゲーションで 2 つ以上の画像を使用できますか。つまり、その画像にカーソルを合わせると、6 つの異なる画像が表示されます。単一のナビゲーション画像を作成することは可能ですか? 可能であれば、どのように意味しますか?

これは皆さんお分かりだと思いますが

代替テキスト http://img714.imageshack.us/img714/2786/mubeen.gif

ボタンと部分的に重なる透明なPNGがあります。画像が重なる部分ではボタンが非アクティブになります。透明度を「オフ」にして、ボタンがその後ろでクリックできるようにする方法はありますか？または、この問題を解決する可能性のある他のトリックはありますか？

私はcssスプライト技術を使用して、サイト上のすべてのボタンを1つのPNG画像に保持しています。

この手法は、通常のスタイルボタンのすべてのブラウザーで正常に機能しますが、IE 7/8の場合、cssクラスを使用して画像を定義するすべての入力に境界線と赤いxが表示されます。この手法はFirefoxでうまく機能します。

私はここで何かが欠けていますか？

HTML：

http://img85.imageshack.us/img85/7493/spriteerrorhtml.png

CSS：

http://img514.imageshack.us/img514/1382/spriteerrorcss.png

比較：

http://img99.imageshack.us/img99/3251/spriteerrorcomparison.png

アイコン（左）とテキスト（右）、または反対のテキストを左に、アイコンを右に配置する最良の方法は何ですか?

アイコンの画像とテキストは同じサイズにする必要がありますか? 理想的には、それらは異なるが、同じ垂直方向の配置にあることを望みます.

大きな画像からアイコンを取得するために background-position css プロパティを使用しています。

これが私が今やっている方法ですが、それらを同じ行に配置するか、下に垂直に配置するのに苦労しています。

文章

これは、私があなたの提案を試した後に得られるものです。

テキストはアイコンに合わせて配置されましたが、必要なアイコンの右側に重ねて表示されています。より大きな画像セットからアイコンを表示するために背景位置を使用していることに注意してください。

基本的に私は得ています

いくつかのボタンと画像でスタイリングの問題をエレガントに解決しようとしています。私の目標は、次のようなボタンを持つことです。

(Hacky mspaint モックアップ)

_{(ソース: robhruska.com )}

ただし、満たしたい一連の基準があります。

• また、アイコン イメージをテキストなしのボタンとしてのみ存在させる必要があります (つまり、ボタンの背景はアイコン イメージであり、ボタンの幅/高さ = アイコン イメージの幅/高さ)。
• アイコンのみのボタンは:hover、背景アイコンを変更する状態をサポートする必要があります。
• テキスト ボタンは、グラデーション背景の変更をサポートする必要:hoverがありますが、アイコン自体は変更する必要はありません。

アイコン画像とグラデーション画像の両方を垂直 CSS スプライト画像で使用できます。

現在、次の行に沿って、テキスト ボタンとアイコンのみのボタンの個別のスタイル セットでこれを行うことしか考えられません。

<div>不要なマークアップを追加するように見えるので、テキスト ボタンにインナーを使用するのは特に好きではありません。また、後で戻ってボタンにテキストを追加したい場合は、ボタン クラスを変更するだけでなく、いくつかのコンポーネントを変更する必要があります。また、DRY ではない、ボタン/div スタイルのいくつかの異なる組み合わせに対して、アイコン スプライトの画像位置をおそらく定義する必要があることも意味します。

私の質問を要約すると:アイコンとテキストのボタンにネストされた要素や個別のスタイルを使用するのではなく、単一のトップレベルのスタイルでこれを行うにはどうすればよいですか? <button>必ずしも<button>いずれかである必要はありません。これをエレガントに実現するのであれば、どの要素でもかまいません。

完全なコード サンプルは必要ありません。最適な方法を提案するだけです。

私は以前にこれを尋ねましたが、それを解決することができなかったので、もう一度尋ねます。

垂直スプライトのアイコン（左側）をテキスト（右側）に揃えようとしています。アイコンとテキストのサイズに関係なく、テキストとアイコンの下部の両方を揃えたいです。つまり、テキストはh1またはh5にすることができます。アイコンのサイズは25pxのままほぼ同じです。

現在、以下のcssを使用しています。

しかし、アイコンの背景の位置をいじらなければ、アイコンを右側のテキストに合わせることができません。理想的には、それを行わず、隣のテキストサイズに関係なく、同じアイコンのcssクラスで使用するだけです。

-webkit-border-imageスタイルでメインのスプライト画像を指定するために使用しています。スプライト画像はボタン画像の集まりです。メイン スプライト イメージにインデックスを付けるために使用するスタイル属性は何ですか?

赤いボタン スプライトは x=0、y=21 にあります。

どの属性を使用しますか? それが背景だったら、私はbackground-position. 何に使うのかわからない-webkit-border-image。

2つのスプライト画像があります。1つの画像には、丸みを帯びたボタンの本体と他の状態（ホバー、クリック、電気ショック療法）が含まれ、もう1つの画像には画像の左端の曲線が含まれます。

私はこれらを使用しているので、Webページに複数のボタン画像を表示する必要はありません。これらのボタンは任意のサイズに拡大縮小できます。

およびCSS

、（アイコンの大部分）を含むdivの部分にカーソルを合わせると、スプライトの両方の部分に「ホバー」スタイルが適用されます。ただし、「画像のチャックだけが表示される前に画像の一部にカーソルを合わせると、「ホバー」スタイルが適用されます。

私ができるようにしたいのは、親divにホバースタイルが適用されている場合は常に、スパンの「ホバー」スタイルをアクティブにすることです。

何かアドバイス？

ありがとう