cssスプライト positionが効かない

質問

現在サイトを制作中で、グローバルナビのcssスプライトでつまずいてしまいました。

background-positionがなぜか効きません、、、、。
htmlとcssのチェックをしていただけないでしょうか？？
どなたか親切なかた宜しくお願い致します！！

<div id="gnav">
<ul>
<li class="gnav_1"><a href="#"><img src="images/gnav_home.png" width="164" height="60" alt="ホーム" /></a></li>
<li class="gnav_2"><a href="#"><img src="images/gnav_intro.png" width="164" height="60" alt="初めての方へ" /></a></li>
<li class="gnav_3"><a href="#"><img src="images/gnav_staff.png" width="164" height="60" alt="スタッフ紹介" /></a></li>
<li class="gnav_4"><a href="#"><img src="images/gnav_price.png" width="164" height="60" alt="料金" /></a></li>
<li class="gnav_5"><a href="#"><img src="images/gnav_access.png" width="164" height="60" alt="アクセス" /></a></li>
<li class="gnav_6"><a href="#"><img src="images/gnav_q&a.png" width="164" height="60" alt="よくあるご質問" /></a></li>
</ul>
</div><!--gnav-->

--------------------------------css------------------------------

#gnav {
overflow: hidden;

}

#gnav ul {
margin: 24px 0 0 7px ;

}

#gnav ul li {
float: left;
width: 164px;
height:60px;
background: url(images/gnav_on.png) 0 0 no-repeat;
}
#gnav ul li a {
display:block;
}

.gnav_2 {
background-position: -164px 0;
}
.gnav_3 {
background-position: -328px 0;
}

.gnav_4 {
background-position: -492px 0;
}
.gnav_5 {
background-position: -656px 0;
}
.gnav_6 {
background-position: -820px 0 ;
}

#gnav ul li a:hover img{
visibility:hidden;
}

回答No.2

H240S18B73 · ベストアンサー

background-positionの個別指定をしてるセレクタの方が
最初にbackgroundを指定してるセレクタより
指定が厳密でなく弱いからじゃないですかね

後ろに書いたところで
#gnav ul li　の指定の方が
.gnav_2より強いでしょうから

IDのほうがclassより強いので
個別のbackground-position指定を
より厳密にするほうがいいでしょうね
#gnav ul li.gnav_2
とかにするのが確実ではないでしょうか

お礼

ご回答ありがとうございます！！

おっしゃる通りでした。ずーっと悩んでいたので本当に感激です。

また一つ勉強になりました。本当にありがとうございました。

回答No.1

ORUKA1951

もっと簡単に・・
<div class="header">
　<div class="nav">
　　<ol>
　　　<li><a href="/">ホーム</a></li>
　　　<li><a href="/intro">初めての方へ</a></li>
　　　<li><a href="/staff">スタッフ紹介</a></li>
　　　<li><a href="/price">料金</a></li>
　　　<li><a href="/access">アクセス</a></li>
　　　<li><a href="/FAQ">よくあるご質問</a></li>
　　</ol>
　</div>
</div>
HTML5だと
<header>
　<nav>
　　<ol>
　　　<li><a href="/">ホーム</a></li>
　　　<li><a href="/intro">初めての方へ</a></li>
　　　<li><a href="/staff">スタッフ紹介</a></li>
　　　<li><a href="/price">料金</a></li>
　　　<li><a href="/access">アクセス</a></li>
　　　<li><a href="/FAQ">よくあるご質問</a></li>
　　</ol>
　</nav>
</header>
div.header div.nav{text-align:center;height:60px;}
div.header div.nav ol{list-style:none;margin:0;padding:0;font-size:0;}
div.header div.nav ol li{display:inline-block;margin:0;padding:0;width:164px;height:60px;position:relative;}
div.header div.nav ol li a{font-size:16px;display:block;width:100%;height:100%;background:url(images/gnav_on.png) gray;overflow:hidden;line-height:60px;text-decoration:none;}
div.header div.nav ol li a:hover{text-align:left;text-indent:-200px;}
div.header div.nav ol li a[href="/"]{background-position: -164px 0;}
div.header div.nav ol li a[href="/intro"]{background-position: -328px 0;}
div.header div.nav ol li a[href="/staff"]{background-position: -492px 0;}
div.header div.nav ol li a[href="/price"]{background-position: -656px 0;}
div.header div.nav ol li a[href="/access"]{background-position: -656px 0;}
div.header div.nav ol li a[href="/FAQ"]{background-position: -820px 0 ;}

★せっかくスプライトを利用するのでしたら、その目的から当初の画像もスプライトのほうが良いです。
　スプライトとは、画像を最初に読み込ませておくことで画像の変更をスムーズに行えるのが利点です。
　そうすることで
div.header div.nav ol li a{text-indent:-200px;overflow:hidden;text-align:center;}
div.header div.nav ol li a[href="/"]{background-position: -164px 0;}
div.header div.nav ol li a[href="/intro"]{background-position: -328px 0;}
div.header div.nav ol li a[href="/staff"]{background-position: -492px 0;}
div.header div.nav ol li a[href="/price"]{background-position: -656px 0;}
div.header div.nav ol li a[href="/access"]{background-position: -656px 0;}
div.header div.nav ol li a[href="/FAQ"]{background-position: -820px 0 ;}

div.header div.nav ol li a[href="/"]:hover,
div.header div.nav ol li a[href="/"]:focus{background-position: -164px 60px;}

div.header div.nav ol li a[href="/intro"]:hover,
div.header div.nav ol li a[href="/intro"]:focus{background-position: -328px 60px;}

div.header div.nav ol li a[href="/staff"]:hover,
div.header div.nav ol li a[href="/staff"]:focus{background-position: -492px 60px;}

div.header div.nav ol li a[href="/price"]:hover,
div.header div.nav ol li a[href="/price"]:focus{background-position: -656px 60px;}

div.header div.nav ol li a[href="/access"]:hover,
div.header div.nav ol li a[href="/access"]:focus{background-position: -656px 60px;}

div.header div.nav ol li a[href="/FAQ"]:hover,
div.header div.nav ol li a[href="/FAQ"]:focus{background-position: -820px 60px;}

div.header div.nav ol li a[href="/"]:active{background-position: -164px 120px;}
div.header div.nav ol li a[href="/intro"]:active{background-position: -328px 120px;}
div.header div.nav ol li a[href="/staff"]:active{background-position: -492px 120px;}
div.header div.nav ol li a[href="/price"]:active{background-position: -656px 120px;}
div.header div.nav ol li a[href="/access"]:active{background-position: -656px 120px;}
div.header div.nav ol li a[href="/FAQ"]:active{background-position: -820px 120px;}
とかは無論、先でデザインを変えるのがスタイルシート側ですべてできます。

　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )

補足

わざわざありがとうございます。
ところで私の記述していたhtml cssにはpositionが効かないようなミスはありましたでしょうか？？