ベストアンサー

CSSで画像１枚によるロールオーバー

2007/08/20 09:46

CSSの勉強をしているのですが、Fire Fox2.0ではうまく表示されるのに対し、IE6,7では何も表示されず困っています。どこが間違っているのか教えて頂けませんでしょうか？よろしくお願い致します。作っている物は以下の通りです。（すべて同じ階層にあります） --------------------------------------------------------------- navi.gif(100*30のメニューが横3縦2で300*30の１枚の画像) --------------------------------------------------------------- list.html（とりあえずメニュー１つだけです） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>リストお勉強</title> <link href="list1.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="globalnavi"> <ul> <li id="btn01"><a href="#">リスト１</a></li> </ul> </div> </body> </html> --------------------------------------------------------------- list.css /* CSS Document */ .globalnavi { width:300px; height:30px; margin:0px; padding:0px; text-align:left; } .globalnavi ul { margin:0px; padding:0px; } .globalnavi li { display:block; list-style-type:none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li a { display:block; list-style-type::none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li#btn01{ width:100px; background-position:0 0; } .globalnavi li#btn01 a{ width:100px; } .globalnavi li#btn01 a:hover{ width:100px; background-position: 0 -30px; }

waltz_love
お礼率63% (24/38)

HTML
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

2pola4
ベストアンサー率25% (1/4)

2007/08/23 17:37 回答No.3

はじめまして。疑問はすでに解決しましたでしょうか？まだでしたら参考にしてください。多分FIRE FOXで見れて、IEはだめ、は background:url(navi.gif)no-repeat; この部分のno-repeat直前の半角スペースがないのが問題ではないでしょうか？正：background:url(navi.gif) no-repeat; 自分で試してみましたがうまくいきました。画像は300×60でいいですよね？（300×30と書いていましたが・・・）高さ60のうち、上30ピクセルに通常時の画像を。下30ピクセルにhover時の画像を用意し、以下のソースで表示されます。 --------------------------------------------------------------- /* CSS Document */ .globalnavi { width:300px; height:30px; margin:0px; padding:0px; text-align:left; } .globalnavi ul { margin:0px; padding:0px; } .globalnavi li { display:block; list-style-type:none; float:left; width:100px; height:30px; margin:0px; padding:0px; text-indent:-9999px; } .globalnavi li a{ width:100px; height:30px; display:block; } li#btn01{ background:url(navi.gif) 0 0 no-repeat; } li#btn01 a:hover{ background:url(navi.gif) 0 -30px no-repeat; } li#btn02{ background:url(navi.gif) -100px 0 no-repeat; } li#btn02 a:hover{ background:url(navi.gif) -100px -30px no-repeat; } li#btn03{ background:url(navi.gif) -200px 0 no-repeat; } li#btn03 a:hover{ background:url(navi.gif) -200px -30px no-repeat; } --------------------------------------------------------------- なるべく簡潔なソースになるよう頑張ってください！ CSSってパズルみたいですよね。やってて楽しいです。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

leap_day
ベストアンサー率60% (338/561)

2007/08/21 07:17 回答No.2

こんにちはこういうことですか? <style type="text/css"> .globalnavi { width:300px; height:30px; margin:0px; padding:0px; text-align:left; } .globalnavi ul { margin:0px; padding:0px; } .globalnavi li{ display:block; float:left; list-style-type:none; width:100px; height:30px; margin:0px; padding:0px; } .globalnavi a{ display:block; width:100px; height:30px; background-image:url(navi.gif); background-repeat:no-repeat; } .globalnavi #btn01 a{ background-position: 0px 0px; } .globalnavi #btn02 a{ background-position: -100px 0px; } .globalnavi #btn03 a{ background-position: -200px 0px; } .globalnavi #btn01 a:hover{ background-position: 0px -30px; } .globalnavi #btn02 a:hover{ background-position: -100px -30px; } .globalnavi #btn03 a:hover{ background-position: -200px -30px; } </style> <div class="globalnavi"> <ul> <li id="btn01"><a href="#">リスト1</a></li> <li id="btn02"><a href="#">リスト2</a></li> <li id="btn03"><a href="#">リスト3</a></li> </ul> </div>

ログインすると、全ての回答が全文表示されます。