list-styleでの画像CSS設定について

list-styleのをCSS設定で画像を指定しています。

文字サイズより大きい画像の場合に、うまく位置を調整できないのですが、どのように設定すればよいでしょうか？

現在のCSSはこのように設定しています。

.style_1 {
list-style-image: url(画像url.gif);
}

フォントサイズ14ピクセルではピッタリはまるのですが、12ピクセルにするとリスト画像が上部に浮いたような形になってしまっています。

また、リスト画像とli要素(文章)までの間隔も離したいです。
CSSに詳しい方がいましたら、ご教授下さいませ。

No.3 回答者： noname#100277 回答日時： 2008/10/11 01:06

listに対して別途CSSを適応させるのは？

text-indentやpadding、marginで・・・

この回答へのお礼

ご回答下さいまして誠にありがとうございました。勉強になりました。

お礼日時：2008/10/17 17:37

No.2 回答者： hetare560 回答日時： 2008/10/11 00:15

こんにちは。

この場合、list-style-imageで指定するより<li>に背景画像をおいて、
background-positionで位置を指定したほうがいいと思いますよ。

例

<ul>
<li>サンプル</li>
<li>サンプル</li>
</ul>

li {
padding:0 0 0 20px;/* 背景画像分の余白を取る */
background:url(画像パス) no-repeat 5px 5px;/* 5px 5pxとなっている所で位置を調整 */
}

詳しくはこちらを参考にしてください
http://www.htmq.com/style/background.shtml

この回答へのお礼

ご回答下さいまして誠にありがとうございました。とても丁寧なご投稿を嬉しく思います。<li>への背景画像指定で調節できるのですね。CSSの関連本を見ながらチャレンジしてみますね。

お礼日時：2008/10/17 17:40

No.1 回答者： higekuman 回答日時： 2008/10/10 16:57

cssには marker-offset というのがあるみたいですが、対応しているブラウザはほとんど無いようですね。

この回答へのお礼

ご回答下さいまして誠にありがとうございました。勉強になりました。

お礼日時：2008/10/17 17:40