問題タブ [css-sprites]

Web サイトで個別の画像ファイルではなくCSS スプライトを使用して、すべて同じサイズの小さなアイコンを大量に集めたいと考えています。ImageMagickを使用してそれらを 1 つの大きな画像に連結 (タイル) するにはどうすればよいですか?

次のようなタブをWebページに追加しようとしています。

この例をベースとして使用すると、部分的に機能するようになりました。テキストセクションを固定したいのですが、テールセクションを動的にサイズ変更してタブのコンテナの残りの部分を占めるようにするため、私の場合は異なります。

IE 6では見栄えがしますが、実際にはコンテナーの全幅を占めるわけではありません。Firefox 3では、まったくレンダリングされません:(赤はスパン間の空白の領域です）。

これをIE6とFirefoxの両方で正しくレンダリングして、＃Tabに指定された全幅を占めるようにするにはどうすればよいですか？＃Tab4は、できるだけ多くのスペースを占めるようにサイズを調整したい領域です。

ページ内の IMG タグに基づいて CSS スプライトを自動的に作成し、スプライト画像を背景として配置して適切な部分を表示させる適切な CSS を使用して (私が考えていた) DIV に置き換えるコードを作成しました。問題は次のとおりです。 DIV を IMG の代替品として動作させることはできません。

デフォルトの「表示」値を「ブロック」に設定したままにしておくと、元の IMG がテキストの最後に配置されていた場合、置換 DIV はテキストの後の次の行にジャンプします (もちろん、これは何かを期待するものです)表示あり: することをブロックします)。

「表示」をインラインに変更すると、DIV はテキストと同じ行にとどまりますが、設定した「幅」と「高さ」は無視され、折りたたまれます。DIV 内に 's を入れようとしましたが、nbsp を含めるのに十分な幅しか占有しません。

display をすべての可能な値 (「table-row」、「run-in」、「compact」などの「あいまいな」値を含む) に設定して実験してみましたが、すべてうまくいきませんでした。IMG と同じレイアウト動作で DIV を作成することさえ可能ですか?

私は単一のDIVよりも複雑なものを用意していますが、そこで明らかなことを試しました(内側のDIVが表示されるように設定されている別のDIV内の1つのDIV:表示する外側のセットを持つブロック:インライン)が、私は持っていません動作する組み合わせも見つかりませんでした。

置き換えられた IMG/DIV の外で、必要なレイアウトを取得するためにできる特定のことは常にありますが、私の目標は、残りの HTML に関係なく機能する汎用の自動 CSS スプライト メカニズムを持つことです。

作業中の Web ページのスプライトを作成するためにCSS スプライト ジェネレーターを使用していますが、動作していないようで、理由がわかりません... 明らかなことだと思いますが..!

そこで、3 つの画像を取得し、zip 圧縮し、PNG ファイルを生成しました (結果を確認したところ、問題ないようです)。次の css クラスが返されました。

ここに私がテストしている HTML がありますが、何らかの理由で空白のページしか表示されません。

任意のヒント？

前景画像でのスプライトトリックを可能にするcssスプライトの拡張に関するこの記事に出くわしました。：hoverでこの手法を使用しようとしましたが、IEとOperaでは機能しないようです。ここでメニューにこのテクニックを使用する私の試みを参照してください：http ：//www.kavoir.com/examples/jenny-css-sprites/menu.html

FFとSafariでは正しく動作しますが、IEとOperaではまったく動作しません。いくつかの方法でコードを変更しましたが、それでもまったく機能しません。多分それは不可能ですか？

著者に尋ねようとしましたが、彼女は私のコメントを削除しました。

これをすべてのブラウザで機能させる方法はありますか？

更新：回答ありがとうございますが、：hoverはのためのものなので、すべてのIEブラウザーが効果を解決するはずです。したがって、問題はおそらくクリップのプロパティにある可能性があります。

：hoverがクリップオンで正しく機能するかどうかを確認したいだけです。今のところ表示されていません。

最近のStackoverflow ポッドキャストの 1 つで、Jeff は、ページ全体にある小さな画像をすべて含む単一の画像ファイルを用意し、それを CSS でカットして、すべての画像が正しく表示されるようにすることについて話しました。全体のポイントは、サーバー リクエストの数を減らして、ページの読み込みを高速化することです。私は、「うわー、それは本当にクールだ、私たちの製品で本当にこれを使用できる」と思っていました.

私の質問は次のとおりです:これはCSSでどのように行われますか? background-image で画像をロードする必要がありますが、大きな画像でサブ画像のオフセットを指定するにはどうすればよいですか? つまり、大きな画像の (50px, 50px) にハンマーのアイコンがあり、そのサイズが 32px * 32px だとすると、ブラウザにそのビットのみを表示させるにはどうすればよいでしょうか?

cssスプライトを作成するための優れたツールはありますか？

理想的には、画像のディレクトリと、それらの画像を参照する既存の.cssファイルを指定して、すべての小さな画像で最適化された大きな画像を作成し、.cssファイルを変更してそれらの画像を参照するようにします。

少なくとも、画像のディレクトリを取得して、大きなスプライトと、それぞれを背景として使用するために必要な.cssを生成する必要があります。

これを行うための優れたフォトショッププラグインまたは本格的なアプリはありますか？

CSS でスプライトを使用してリスク マトリックスをアニメーション化しようとしています...Firefox と Chrome では問題なく動作しますが、IE では画像が表示されません...

コードは以下のとおりです。ここにすべてを貼り付けたくはありませんが、抜粋はパターンを示しています。

CSS:

IE Dev でスタイルを確認しました。ツールバー (私は IE の firebug が必要です)、すべてのスタイルが配置され、サーバー上に画像が表示されますが、IE では表示されません !!!

ばかげたIE CSSの癖だと確信しています。助けてください。

更新: @RoBorg: あなたの提案は問題を解決しませんでしたが、「ホバー」の問題は解決しました。問題は、絶対配置された外側の div といくつかのメニュー スタイルにあることが判明しました。

CSS スプライトでは、各画像の間にパディングが見られることがよくあります。ページのサイズが変更された場合に、ある画像が別の画像に流れ込まないようにするためのアイデアだと思います。

これは、さまざまな種類のブラウザ ズームに依存すると思います(Jeff が最もよく説明しています)。

ただし、テストではこの動作を確認できませんでした。これは古いブラウザだけの問題ですか? （現時点ではIE6でテストできていないので、「古い」と数えています）。

スペースを残すことについてまだ心配する必要がありますか? そのような痛み。

例えば ​​：

AOL 用に見つけた CSS スプライトには、各画像の間にパディングがあります: VIEW

しかし、デイリーショーは気にしないことに決めました : VIEW