幅違うメニュー（リスト）、floatで横並びで背景画像でテキスト飛ばしたいが・・

Question

お世話になります。メニュー（リスト）のテキストを、CSSで飛ばして、背景の画像を表示させるようにしたいのですが、何も表示されません。マウスオーバーすると、画像がかわるようにしたいです。どうか、何が問題なのか、教えてくださいませ。 ★メニューのwidthは、全てちがいます。 ★背景の画像は、「./images/gNavi/gNav.gif」という幅513px高さ14pxの画像。　マウスオーバーの背景画像は、「./images/gNavi/gNav_ov.gif」という幅513px高さ14pxの画像。 ★リストは、横並びにしたい。【HTML】

【CSS】 #gNavi { width:513px; height:14px; } #gNavi ul{ list-style: none; margin: 0; padding: 0; height: 14px; overflow: hidden; } #gNavi li { float:left; margin:0; padding:0; } #gNavi li a{ display:block; height:100%; width: 100%; height: 0 !important; height /**/: 14px; background:url(../images/gNavi/gNav.gif) no-repeat; text-decoration:none; text-indent:-7777px; } #gNavi li a:hover{ background:url(../images/gNavi/gNav_ov.gif) no-repeat; } #gNavi li#01 a{ background-position: 0 0; width: 52px; } #gNavi li#02 a{ background-position: -52px 0; width: 71px;} #gNavi li#03 a{ background-position: -123px 0; width: 105px;} #gNavi li#04 a{ background-position: -228px 0; width: 93px;} #gNavi li#05 a{ background-position: -321px 0; width: 93px;} #gNavi li#06 a{ background-position: -414px 0; width: 99px;} #gNavi li#01 a:hover {background-position: 0 0;} #gNavi li#02 a:hover {background-position: -52px 0;} #gNavi li#03 a:hover {background-position: -123px 0;} #gNavi li#04 a:hover {background-position: -228px 0;} #gNavi li#05 a:hover {background-position: -321px 0;} #gNavi li#06 a:hover {background-position: -414px 0;} （何か、他に必要な情報があれば、言ってください！）

abril · Accepted Answer

#gNavi li a{（省略）}の定義に不適当なものがあるからだと思われます。 #gNavi li a{ （省略） height: 0 !important; height /**/: 14px; （省略） } これだと、結果としての高さは0になってしまい、背景画像が表示される領域がなくなってしまいます。おそらく、質問者様は「テキストを表示させない」という別々の手法の2種類をごちゃ混ぜにした上で必要な部分を削除してしまったのではないかと思われます。"#gNavi li a"に対して"text-indent:-7777px;"を定義済みですから、これでテキストは表示領域から追いやられます。一方、上記の様にheightの高さを無くして表示させなくする手法をとった場合には、なくなった高さの替わりに上方向への余白としてpadding-topに高さと同じ値を与えてやらねばなりません。質問者様の定義では肝心のpadding-topの定義が抜けてしまっていますし、もとよりtext-indentでテキストの表示対策をしているので、上記の定義自体が不要です。ちなみに、text-indentのマイナス値はテキストに対してのみ有効、背景画像には無関係ですので、この定義自体は本件の不具合とはなりません。上記の箇所を削除するだけでも不具合はなくなりますが、ちょっと無駄な構成・定義になっているので、できるだけシンプルになる様、改良してみたサンプルです。id名はNo.1の回答者様ご指摘の通り、頭に"N"をつけて数字で始まらない様に変更してあります。表示確認はIE6.0/7.0、Firefox2.0～、Opera9.25 on Windows XPです。サンプルの通り書式はXML宣言有り、エンコーディングはEUC-JPです。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- サンプル

---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- ul#gNavi{ width: 513px; height: 14px; list-style: none; margin: 0; padding: 0; overflow: hidden; } ul#gNavi li { float: left; margin: 0; padding: 0; } ul#gNavi li a { display: block; width: 100%; height: 100%; background: url(../images/gNavi/gNav.gif) no-repeat; text-decoration: none; text-indent: -7777px; } ul#gNavi li a:hover { background:url(../images/gNavi/gNav_ov.gif) no-repeat; } （以下の指定はオリジナルのままでよいので省略） ---------------------------------------------------------------------- div#gNaviの領域が子要素ulと全く同じなので、ulに直接幅と高さを定義すればdivは不要となり、HTMLのマークアップもCSSの定義もすっきりします。こういうテキストを非表示にさせる技の様な、ちょっとひねった仕掛けを使う場合は、まず「どういう理屈でそうなっているのか」を理解してからでないと、ぐちゃぐちゃになるだけですよ。その気になればいろんなところから凝ったレイアウトのサンプルを持ってこれるお手軽な時代ですが、ただコピペして使えばいい、というものではないのできちんと「理屈」を勉強なさって下さい。

leap_day · Answer

こんにちは

#gNavi ul {
margin:0px;
padding:0px;
list-style:none;
}
#gNavi li {
float:left;
}
#gNavi li a {
display:block;
text-decoration:none;
text-indent:-7777px;
height:14px;
background-image:url(../images/gNavi/gNav.gif);
}
#gNavi li a:hover {
background-image:url(../images/gNavi/gNav_ov.gif);
}
#gNavi li#nav01 a{ background-position: 0 0; width: 52px; }
#gNavi li#nav02 a{ background-position: -52px 0; width: 71px;}
#gNavi li#nav03 a{ background-position: -123px 0; width: 105px;}
#gNavi li#nav04 a{ background-position: -228px 0; width: 93px;}
#gNavi li#nav05 a{ background-position: -321px 0; width: 93px;}
#gNavi li#nav06 a{ background-position: -414px 0; width: 99px;}

これだけで十分機能すると思いますが？
背景の表示位置を変えるなら別ですが同じであるなら li#nav* a:hover　の指定はいりません
総幅513px、高さ14pxのところに513px*14pxの画像を使用するので overflow:hidden;もno-repeatもいりません(念の為に入れておいてもいいです)

※floatを使用しているので</div>の前か後でfloat解除を行っておいてください
※もしくは #gNavi ul { } に height:14px;を追加

Nine-nine · Answer

うーんと、いまいちわからない。画像は全画像のメニューまで入った大きな画像ですか？それとも小さな画像ですか？メニューが飛ぶのはtext-indent:-7777px;だから。画像も飛ぶのも、マイナスの値が適切でないと思うんだけど。小さな共通画像でなら、とりあえず、色は便宜上つけたから消してください

聞きたいこととずれてる気がするけど、ヒントということで。

Nine-nine · Answer

idの名前を変えてみてください。
先頭の一文字は数字は不可です。

幅違うメニュー（リスト）、floatで横並びで背景画像でテキスト飛ばしたいが・・

#gNavi li a{（省略）}の定義に不適当なものがあるからだと思われます。

こんにちは

うーんと、いまいちわからない。

idの名前を変えてみてください。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング