cssでのリンクに対する拝啓設定

質問

よく見かける
<ul>
<li><a href="#">トップ</a></li>
<li>><a href="#">サービス</a></li>
<li>><a href="#">会社概要</a></li>
</ul>
の場合、<a>の背景に矢印の画像をリピートなしで設定してますが、
<a>に対してフロートが設定されていないと編集画面で背景の矢印
画像が見えませんが、これはCSSの設定自体に誤りがあるのでしょうか？それとも、編集画面で見えないのはDreamweaver8のエラーなのでしょうか？プレビューではきちんと表示されますが・・・。
どなたか有識者の方のご教授をお願いいたします。

回答No.1

abril · ベストアンサー

> <a>に対してフロートが設定されていないと編集画面で背景の矢印画像が見えませんが、

<a>のスタイルとしてのこの構成そのものは、floatの有無は関係ないと思いますが…
backgroundプロパティで画像を指定し、（画像がテキスト先頭に付く感じであれば）padding-leftで画像のwidth＋αの余白を与えれば表示される筈です。

「編集画面で背景の矢印画像が見えませんが」「プレビューではきちんと表示されます」ということは、ブラウザでの表示結果は、意図した通りの見え方になっているのですね？であれば「これはCSSの設定自体に誤りがある」のか「Dreamweaver8のエラーなの」かは、実際にその部分にCSSでどういう定義をされているのかがわからないと何とも答え様がないですね。

お礼

ありがとうございました。padding-leftで画像のwidth＋αの概念を忘れておりました。

回答No.2

cieux

ソースを見てみないとわかりませんが、今適当にHTMLを作ってみた感じですと、
a {
　background:url("gazou.gif");
　background-repeat: no-repeat;
}
というように書かれていれば、画像が背景に出ます。
外部ファイルでも、直接HTMLに書いてあっても表示されますし、その下に、
a:hover{
　background:;
}
のように書けば、onmouseのときには画像が消えます。
特定のアプリ上で見えないだけで、HTMLファイルを直接開けば表示されるのであれば、アプリの問題でしょう。
HTMLを開いても表示されないのであれば、CSSの記述に問題があるかと思われます。