みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

CSSの勉強をしているのですが、Fire Fox2.0ではうまく表示されるのに対し、IE6,7では何も表示されず困っています。どこが間違っているのか教えて頂けませんでしょうか?よろしくお願い致します。
作っている物は以下の通りです。(すべて同じ階層にあります)

---------------------------------------------------------------
navi.gif(100*30のメニューが横3縦2で300*30の1枚の画像)
---------------------------------------------------------------
list.html(とりあえずメニュー1つだけです)
<!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="#">リスト1</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;
}

投稿日時 - 2007-08-20 09:46:32

QNo.3269861

すぐに回答ほしいです

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

はじめまして。

疑問はすでに解決しましたでしょうか?
まだでしたら参考にしてください。
多分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ってパズルみたいですよね。やってて楽しいです。

投稿日時 - 2007-08-23 17:37:55

ANo.3

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.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>

投稿日時 - 2007-08-21 07:17:52

ANo.1

><li id="btn01">
.globalnavi li と .globalnavi li#btn01 が別物扱いになってるからでは?

っていうか#付きのIDのcssはこうじゃない?
#btn01 .globalnavi li

投稿日時 - 2007-08-20 14:29:45

お礼

アドバイスありがとうございます!
早速試してみたのですが、やっぱり画像が表示されませんでした。
もう少し頑張って調べてみます。

投稿日時 - 2007-08-20 20:27:22

あなたにオススメの質問