締切済み

ＤＩＶタグ（中央揃え）内の画像にリストマーク

2006/09/03 22:11

DIVタグの中央揃えの中に画像があるのですが、その画像の一点で素材集のリストマーク（跳ねる緑の玉）を表示したいです。「インターネットエクスプローラーの起動」で確認してみると画像は画面のセンターに行くので、リストマークが中央に行く画像についていけません。どうすればいいのでしょうか？（質問の表現が悪いかも？・・・この質問文が一番難問ですが教えてください。よろしくお願いします。）

chocolemon
お礼率77% (7/9)

ホームページ作成ソフト
回答数4
ありがとう数2

みんなの回答 （4）
専門家の回答

みんなの回答

345itati
ベストアンサー率48% (795/1639)

2006/09/04 00:46 回答No.4

画像に画像を重ねたいなら、スタイルシートを使ってz-indexで重なりを指定して、position: relative;で相対位置を指定することでお望みの位置に表示出来ると思います。。 (今Win版IEで確認してないので思い切り自信が無いのですが。こんな感じでどうにかなるでしょうか・・ <head></head>内のスタイルシート指定部分 #container { margin-left: auto; margin-right: auto; text-align: center; } #img1 { z-index: 0; } #img2 { z-index: 1; position: relative; top: -100px; left: -110px; } 以下HTMLソース部分 <body> <div id="container"> <div><img src="map.jpg" id="img1" alt=""><img src="mark.gif" id="img2" alt=""> </div> </div> </body> 表示させたい位置に合わせて、img2内のtopとleftのピクセルを微調整すればどうにかなると思います。 (値はマイナスで指定。

質問者

お礼 2006/09/04 11:22

ご指導ありがとうございます何度も試みているのですが、うまくいきません。初心者の私には、高望みかも。。。もう少し頑張ってみます。ありがとうございました。

noname#20371

2006/09/04 00:29 回答No.3

訂正 <div style="width:320px;height:240px;background-image:url(map.jpg);"> ここは地図のサイズとファイル名を書き替え

質問者

お礼 2006/09/04 11:26

難解文章をご理解いただいた事とご指導ありがとうございます。何度も試みているのですが、うまくいきません。初心者の私には、高望みかも。。。もう少し頑張ってみます。ありがとうございました。すぐに設定出来そうにないので、まずお礼まで。

noname#20371

2006/09/04 00:24 回答No.2

わかりましたこれでいかがですか？ <div align="center"> <div style="width:320px;height:240px;background-image:url(map.jpg);"> <div style="padding-top:100px;padding-left:50px;"> <img src="icon.gif" width="26" height="24" alt="ここだよ！" title="ここだよ！"> </div> </div> </div> <div style="width:320px;height:240px;background-image:url(map.jpg);margin:0px;padding:0px;"> ここは地図のサイズとファイル名を書き替え <div style="padding-top:100px;padding-left:50px;"> ここは地図の左上からの距離 <img src="icon.gif" width="26" height="24" alt="ここだよ！" title="ここだよ！"> ここはリストマークのサイズとファイル名を書き替え

noname#20371

2006/09/03 23:02 回答No.1

> リストマークが中央に行く画像についていけません。ここがよくわかりませんが・・・中央揃えで画像とリストマーク（画像）を挿入した。編集画面では両方とも中央揃えで見えているのに、 IEでプレビューするとリストマークが中央ではなく画像の横に来てしまう。ということだったら、画像の後ろ（リストマークの前）で改行してください。見当違いだったらごめんなさい

質問者

補足 2006/09/03 23:31

こんな難解文章にお時間頂き申し訳ありません。地図を表示したくて、まず中央に地図（jpeg）があるんです。その地図の中に、「ここですよ～！」って目的地にポンポン跳ねるリストマークを置きたいのに画像の中に配置できないんです。レイアウト枠を使って無理やり置いたとしてもＩＥで確認すると、「ここですよ～」って配置したいところからはずれるんです。分かります？説明・・・すみません。