Webデザインコミュのcssでの横ナビゲーションについてうまくいきません＞＜

閲覧ありがとうございます。
cssでの横ナビゲーションを制作していたのですが、
<li class="active">としアクティブにしたいのでが適用されないため困っています。
以下にhtmlとcss載せておきます。
いろいろ試しているのですが一向にうまくいかないため質問いたしました。
詳しい方、教えていただけると嬉しいです。

<div id="cnavi">
<ul>
<li class="active"><a href="http://www.gamoora.jp">攻略１</a></li>
<li><a href="http://www.gamoora.jp">攻略２</a></li>
<li><a href="http://www.gamoora.jp">攻略３</a></li>
<li><a href="http://www.gamoora.jp">攻略４</a></li>
<li><a href="http://www.gamoora.jp">攻略５</a></li>
</ul>
</div>
<div class="clear"></div>

#cnavi {
width: 590px;
height: 24px;
display: block;
background-position: 0 0;
margin: 0px 5px 10px 5px;
}
#cnavi ul {
width: 590px;
float: right;
}
#cnavi li {
display: inline;
list-style-type: none;
}
#cnavi li a {
width: 118px;
height: 24px;
text-align: center;
display: block;
line-height: 24px;
float: left;
}
#cnavi a { background-image: url("img/cnavi.png"); background-position: 0 0px; }
#cnavi a:hover { background-image: url("img/cnavi.png"); background-position: 0 -24px; }
#cnavi li.active { background-image: url("img/cnavi.png"); background-position: 0 -48px; }

コメント(6)

最初
全て
最新の40件

[2] mixiユーザー 12月09日 16:32

よーく考えてみてください。

ノーマルな状態で背景を入れているのは<a>。
ホバーな状態で背景を入れているのは<a>。
アクティブな状態で背景を入れているのは・・・

[3] mixiユーザー 12月09日 16:38

あ、先越されたｗ

ちなみに私はこういう時にはこうします。

#cnavi li a.active {・・・}

普段はactiveではなく“now”を使いますけどｗ

[4] mixiユーザー 12月09日 16:47

#cnavi {width:590px; height:24px; margin:0px 5px 10px 5px; overflow:hidden;}
#cnavi ul {width:590px; height:24px; overflow:hidden;}
#cnavi li {display:inline; width:118px; margin:0px; list-style-type:none; overflow:hidden; float:left;}
#cnavi li a {display:block; width:118px; height:24px; text-align:center; line-height:24px;
　　　　　　　　background:transparent url("img/cnavi.png") no-repeat 0px 0px; overflow:hidden;}
#cnavi li a:hover {background-position:0px -24px;}
#cnavi li.active a {background-position:0px -48px;}

僕ならこう組みそうかな～。
やたら overflow:hidden とか数値を指定するのは、
IEとかFireFoxとかmarginがらみの癖ですね（笑）
クラス張替えによる挙動のおかしなところは、
前述の方々のおっしゃる通りで（＾＾

[5] mixiユーザー 12月11日 06:33

これ、アフィリエイトの宣伝でしょ？
こないだもURLガンガン貼ったソースを貼り付けて、アドバイスのコメントに対するレスはナシでしたよね。

[6] mixiユーザー 12月13日 00:23

ありがとうございます。
#cnavi li.active { background-image: url("img/cnavi.png"); background-position: 0 -48px; }
ではダメなんですね...＞＜
言われてみれば確かにってことですが...
<li>で指定すれは<a>は入れなくても大丈夫だと勘違いしていたようです。
以後気をつけます。

>タクロさん
そういうつもりは全くなかったのですが...申し訳ないです＞＜
以後気をつけます。
ありがとうございました。

ログインすると、みんなのコメントがもっと見れるよ