CSSのコーディングで悩んでいます。olの数字の左にリストマーク画像をつけたいのですが、どのようにしたら良いでしょうか。

以下のようにしたいです。宜しくお願いします。

■1.テキストテキストテキストテキスト
■2.テキストテキストテキストテキスト
  テキストテキストテキストテキスト
■3.テキストテキストテキストテキスト

回答の条件
  • 1人10回まで
  • 登録:2008/12/22 11:38:46
  • 終了:2008/12/22 15:55:00

回答(3件)

id:goodvn No.1

goodvn回答回数228ベストアンサー獲得回数182008/12/22 13:08:51

ポイント9pt

GIF などの画像でよいのでしょうか?


li {
  padding: 0px 0px 0px 20px;
  background-image: url(li.gif);
  background-repeat: no-repeat;
}

こんな感じで如何ですか?数値などは適宜調整してください

http://q.hatena.ne.jp/1229913525

id:kanigasuki

ありがとうございます。

残念ながら画像を数字の左に出す事は出来ませんでした。

以下のようになります。

1.■テキストテキストテキスト

2.■テキストテキストテキスト

3.■テキストテキストテキスト

2008/12/22 13:21:01
id:goodvn No.2

goodvn回答回数228ベストアンサー獲得回数182008/12/22 14:24:49

ポイント27pt

ブラウザにもよると思うのですが,margin や padding あたりは,IE では怪しい挙動をするので,きっとそのせいですね

上位の ol の margin や padding を適切に設定した上で,background-positon をマイナスで指定してやると,うまくいくかもしれません

コメント欄を開けておいていただけると助かります

http://q.hatena.ne.jp/1229913525

id:kanigasuki

background-positionをマイナス指定は画像が表示されなくなりました。

2008/12/22 15:30:10
id:takabi No.3

takabi回答回数4ベストアンサー獲得回数12008/12/22 14:57:15

ポイント44pt

リストスタイルを内側にすれば大丈夫だと思います

li {

background-image: url(li.gif);

background-position: 0px center;

background-repeat: no-repeat;

list-style-position: inside;

padding-left: 10px;

}

id:kanigasuki

ありがとうございます。

list-style-position: inside;

を使ってうまく表示できました。

ただ改行したとき1行目にそろってほしかったので、insideで内側にしたのを、ふたたびtext-indentをマイナス指定で揃えました。

li {

padding-left: 70px;

background:url(li.gif) no-repeat;

list-style-position:inside;

text-indent:-30px;

}

2008/12/22 15:52:30

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません