![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
表示が上手くいかないのでお助け下さい。
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ベストアンサー
- 回答日時:
>class指定をしない状態ですと普通に表示されるのですが、
このスタイルシートの書き方はどうなってますか?
>div#side ul#sidenav li.a {
このセレクタの、background-positionを消してみるとどうなりますか?
ご回答ありがとうございます。
>このスタイルシートの書き方はどうなってますか?
div#side ul#sidenav li {
background: url(../common/test.gif) no-repeat left;
}
このように表記していました。
が、ご指示頂いたセレクタのbackground-positionを消してみたら、よくわからないのですが無事に表示がされました!
本当にありがとうございます! 感謝です。
No.2
- 回答日時:
>htmlやcssの記述に対する細かいツッこみは勘弁して下さい。
それに原因があるので、申し訳ありませんがどこが間違っているか指摘できません。
きちんと子孫セレクタ(空白スペース)や、セレクタのグループ化、詳細度の勉強をしましょう。
No.1
- 回答日時:
ちょっとよくわからないのですが
>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;
}
これをしたいのでしょうか・・・?
ご回答ありがとうございます。
言葉が足りなくて申し訳ありません、そういう事です。
実際はそのように表記しているのですが上手く行きません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
画像イメージの上下左右、欲し...
-
widthやheightの数値に単位(px...
-
モーダルダイアログでのボタン...
-
【CSS】ヘッダーの高さが不明の...
-
ライトボックスでスクロールバー
-
画像と一緒にスライドするリン...
-
ul liのclass指定について
-
日本地図(白地図的)にリンク...
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
CSS テキストフィールドの文字...
-
div内に外部のurlを表示させたい
-
Media Queries 4 で 非推奨とな...
-
CSSで、画像を左寄せにして全体...
-
CSSだけで、テーブルにスクロー...
-
IE6で外部リンク画像の下に隙間
-
HTMLで一部だけスクロールする...
-
font-sizeが効かない
-
スタイルシート float
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
W3Cのソースコードの検証サービ...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報