みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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

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

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

投稿日時 - 2011-10-16 15:26:06

QNo.7075263

困ってます

質問者が選んだベストアンサー

簡単なサンプルを
★HTML4.01strict
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )
※タブは_に置換してある。
※"△","×","▼"は、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">
<!--
div.header div.nav{position:absolute;top:0;left:0;text-align:center;}
div.header div.nav{width:100%;background-color:yellow;}
div.header div.nav ul,#header div.nav ul li{display:block;list-style:none;margin:0;padding:0;line-height:30px;}
div.header div.nav ul li{width:22%;float:left;margin-left:10px;border:solid black 1px;}
div.header div.nav ul li a{display:block;width:100%;height:100%;padding-left:0;background-color:gray;text-decoration:none;}
div.header div.nav ul li a:before{content:"△";}
div.header div.nav ul li a:visited:before,div.header div.nav ul li a:focus:before{content:"×";}
div.header div.nav ul li a:hover:before,div.header div.nav ul li a:active:before{content:"▼";}
div.header h1{margin-top:40px;}
-->
_</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>

投稿日時 - 2011-10-16 17:23:59

補足

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

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

投稿日時 - 2011-10-16 19:49:01

お礼

ご丁寧な回答、ありがとうございます。
ご指摘を参考に下記の記述をしてみたのですが、やはり画像は表示されませんでした…。試しにORUKA1951さんのサンプルをコピペしてもみたのですが、記号は表示されませんでした。
私の他の記述が邪魔しているのか、ブラウザの問題か…(ちなみにIE8と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:57

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

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

投稿日時 - 2011-10-16 15:40:32

あなたにオススメの質問