ul liのclass指定について

表示が上手くいかないのでお助け下さい。
ul　liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、
なぜかclass指定をすると画像が消えてしまいます。
class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。
どなたか教えて頂けないでしょうか？

また、申し訳ありませんがとりあえず表示されれば良いだけなので
htmlやcssの記述に対する細かいツッこみは勘弁して下さい。

宜しくお願いします！


【html】

<div id="side">
<ul id="sidenav">
<li class="a"><a href="test.html">test</a></li>
</ul>
</div>

【css】

div#side {
display: inline;
float: left;
width: 178px;
margin-top: 20px;
text-align:center;
background:#fff;
}

div#side ul#sidenav {
list-style-type:none;
border: none;
}

div#side ul#sidenav li.a {
background:url(../common/side.gif) no-repeat left;
background-position: 6px 11px;
}

div#side li {
position:relative;
width: 165px;
height:40px;
padding: 1px;
margin: 5px;
text-align:left;
border: 1px solid #8c8c8c;
}

No.3 ベストアンサー 回答者： taloo 回答日時： 2011/08/03 03:06

>class指定をしない状態ですと普通に表示されるのですが、

このスタイルシートの書き方はどうなってますか？

>div#side ul#sidenav li.a {
このセレクタの、background-positionを消してみるとどうなりますか？

この回答へのお礼

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

＞このスタイルシートの書き方はどうなってますか？

div#side ul#sidenav li {
background: url(../common/test.gif) no-repeat left;
}

このように表記していました。
が、ご指示頂いたセレクタのbackground-positionを消してみたら、よくわからないのですが無事に表示がされました！
本当にありがとうございます！　感謝です。

お礼日時：2011/08/04 10:04

No.2 回答者： ORUKA1951 回答日時： 2011/08/02 15:55

＞htmlやcssの記述に対する細かいツッこみは勘弁して下さい。

　それに原因があるので、申し訳ありませんがどこが間違っているか指摘できません。

　きちんと子孫セレクタ(空白スペース)や、セレクタのグループ化、詳細度の勉強をしましょう。

この回答へのお礼

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

お礼日時：2011/08/04 10:00

No.1 回答者： hinananana 回答日時： 2011/08/02 15:04

ちょっとよくわからないのですが

＞ul　liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが
それぞれのclassに異なる背景画像を表示させるというのに
背景画像が書いてあるclassが一つしかないのですが・・・。

<li class="a"><a href="test.html">test</a></li>
<li class="b"><a href="test.html">test</a></li>
<li class="c"><a href="test.html">test</a></li>

となっていて

div#side ul#sidenav li.a {
background:url(../common/side1.gif) no-repeat left;
background-position: 6px 11px;
}

div#side ul#sidenav li.b {
background:url(../common/side2.gif) no-repeat left;
background-position: 6px 11px;
}

div#side ul#sidenav li.c {
background:url(../common/side3.gif) no-repeat left;
background-position: 6px 11px;
}

これをしたいのでしょうか・・・？

この回答へのお礼

ご回答ありがとうございます。
言葉が足りなくて申し訳ありません、そういう事です。
実際はそのように表記しているのですが上手く行きません。

お礼日時：2011/08/04 10:00