HTML初心者です。。
画像の看板のようなイメージに重ねてテキストを表示したいのに
ブラウザのサイズを変えると画像とテキストがずれてしまい、意図した画像の上にテキストが表示されません…
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0">
<div align="center" style="position: relative;">
<img src="images/test.gif" width="600" height="447" alt="">
<div style="position:absolute; top:170px; left:310px; width: 150px;">
看板の中に文字を表示させたい
</div>
</body>
</html>
No.2
200
42
35pt
div 要素（ブロック要素）は、幅を指定しないとブラウザ幅いっぱいになるため、
画像を格納している div も、文字を格納している div も、
目には見えませんが、ブラウザ幅いっぱいになっています。
つまり、absolute で指定している left:310px は、
画面の左から 310px と指定しているのと同じ事になります。
手っ取り早い方法は「widt: 600px;position: relative;」を指定した要素で画像と文字を囲み、
文字を囲んでいる要素の「left:○px」で文字の位置を調整する事です。
<div align="center"><!-- ここの style は消しても構わない --> <div style="position: relative;width: 600px;"> <img src="images/test.gif" width="600" height="447" alt=""> <div style="position:absolute; top:170px; left:170px;"> 看板の中に文字を表示させたい </div> </div>
このような場合、それぞれの要素に枠や背景色をつけると、
配置や大きさといった挙動がよく分かります。
※枠（border）は、状況によってレイアウトが崩れるため、その場合は背景色を使う
今回の場合、最初の div や、文字を囲んだ div に枠（border）をつけると、
大きさが画面幅いっぱいであることが分かると思います。
No.1
1314393
35pt
それぞれを独立した div と img にするのではなく、div の背景画像としてはどうでしょうか。
<html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div align="center" style="position: relative;"> <div style="position:absolute; top:170px; left:310px; width:600px; height:447px; background-image:url(./images/test.gif);}"> 看板の中に文字を表示させたい </div> </body> </html>
ご提案ありがとうございます。
ただなんて説明したら良いか・・・
背景画像として表示等他の方法ではなく現状の形を保ちたいです。
背景画像とする以外に方法はないものでしょうか…
No.2
20042
ここでベストアンサー
35pt
div 要素（ブロック要素）は、幅を指定しないとブラウザ幅いっぱいになるため、
画像を格納している div も、文字を格納している div も、
目には見えませんが、ブラウザ幅いっぱいになっています。
つまり、absolute で指定している left:310px は、
画面の左から 310px と指定しているのと同じ事になります。
手っ取り早い方法は「widt: 600px;position: relative;」を指定した要素で画像と文字を囲み、
文字を囲んでいる要素の「left:○px」で文字の位置を調整する事です。
<div align="center"><!-- ここの style は消しても構わない --> <div style="position: relative;width: 600px;"> <img src="images/test.gif" width="600" height="447" alt=""> <div style="position:absolute; top:170px; left:170px;"> 看板の中に文字を表示させたい </div> </div>
このような場合、それぞれの要素に枠や背景色をつけると、
配置や大きさといった挙動がよく分かります。
※枠（border）は、状況によってレイアウトが崩れるため、その場合は背景色を使う
今回の場合、最初の div や、文字を囲んだ div に枠（border）をつけると、
大きさが画面幅いっぱいであることが分かると思います。
できましたぁ！！
ありがとうございます！！
勉強になりました！
8
8
chinjoh
ween
ぽこたん
1
1
1
できましたぁ！！
ありがとうございます！！
勉強になりました！