CSSでリストを横並びにし、行頭画像を表示させたい

解決済

質問者：sakimi12
質問日時：2011/10/16 15:26
回答数：2件

XHTMLとCSSでのWebページを作成しています。
リストを横並びに表示、行頭画像も表示させ、さらにポイントした時に画像が変わるようにしたいのですが、下記の記述では横並びにはできても画像が表示されず困っています。
おかしい部分や足りない部分がありましたら、ご指摘お願い致します。

≪CSS≫
#menu li{
display:inline;
list-style-image:url(画像のパス);
}
#menu li a:hover{
list-style-image:url(画像のパス);
}

≪ｈｔｍｌ≫
<div id="menu" name="menu">
<ul>
<li><a href="ファイルのパス">文字列</a></li>
<li><a href="ファイルのパス">文字列</a></li>
<li><a href="ファイルのパス">文字列</a></li>
</ul>
</div>

試しにdisplayを削除すると、画像はちゃんと表示されるので、画像のパスは間違っていないはずです。
何卒、宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2011/10/16 17:23

簡単なサンプルを

★HTML4.01strict
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
※タブは＿に置換してある。
※"△","×","▼"は、url(画像パス)に変更。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header" id="Top">
＿＿<h1>サンプル</h1>
＿＿<div class="nav">
＿＿＿<ul>
＿＿＿＿<li><a href="./index.html">Top</a></li>
＿＿＿＿<li><a href="./product">Product</a></li>
＿＿＿＿<li><a href="./news.html./">News</a></li>
＿＿＿＿<li><a href="./profile">profile</a></li>
＿＿＿</ul>
＿＿</div>
＿</div>
</body>
</html>

この回答への補足

すいません、:beforeの前にスペースを入れてしまっていました。
そこを直したらちゃんと表示されました！本当にありがとうございました。
ベストアンサーにさせていただきます。

お礼と補足の内容が逆になってしまって申し訳ありません。

補足日時：2011/10/16 19:49

通報する

- 0
- 件

通報する

この回答へのお礼

ご丁寧な回答、ありがとうございます。
ご指摘を参考に下記の記述をしてみたのですが、やはり画像は表示されませんでした…。試しにORUKA1951さんのサンプルをコピペしてもみたのですが、記号は表示されませんでした。
私の他の記述が邪魔しているのか、ブラウザの問題か…（ちなみにＩＥ８とChromeです）

#menu ul li{
display:block;
float:left;
}
#menu ul li a :before{
content:url(画像のパス);
}
#menu ul li a:hover :before{
content:url(画像のパス);
}

検証サービスでも特に問題はなかったです。
背景画像にするか、もう少しいじってみます。ありがとうございました！

通報する

お礼日時：2011/10/16 18:46

No.1

回答者： ORUKA1951
回答日時：2011/10/16 15:40

display:inline;は、行内要素であって、list-itemではありません。

その時点で、list-styleは意味が無くなります。
　display:block;にして、floatさせ
・背景画像として画像を置くか、
・conent:url()を使いましょう。

- 0
- 件

通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

質問する（無料）

似たような質問が見つかりました

HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32

今、見られている記事はコレ!

弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」

「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
釣りと密漁の違いは？知らなかったでは済まされない？事前にできることは？

知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
カスハラとクレームの違いは？カスハラの法的責任は？企業がとるべき対応は？

東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。この動きは自治体...
なぜ批判コメントをするの？その心理と向き合い方をカウンセラーにきいた！

今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...
大麻の使用罪がなかった理由や法改正での変更点、他国との違いを弁護士が解説

ドイツで2024年4月に大麻が合法化され、その2ヶ月後にサッカーEURO2024が行われた。その際、ドイツ警察は大会運営における治安維持の一つの方針として「アルコールを飲んでいるグループと、大麻を吸っているグループ...