1261090107 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>

回答の条件
  • 1人2回まで
  • 登録:2009/12/18 07:48:28
  • 終了:2009/12/25 07:50:02

ベストアンサー

id:kaz No.2

kaz回答回数200ベストアンサー獲得回数422009/12/18 09:00:13

ポイント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)をつけると、

大きさが画面幅いっぱいであることが分かると思います。

id:uksp

できましたぁ!!

ありがとうございます!!

勉強になりました!

2009/12/21 05:03:10

その他の回答(4件)

id:Mook No.1

Mook回答回数1312ベストアンサー獲得回数3912009/12/18 08:07:09

ポイント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>

http://park16.wakwak.com/~html-css/css/css_16.html

id:uksp

ご提案ありがとうございます。

ただなんて説明したら良いか・・・

背景画像として表示等他の方法ではなく現状の形を保ちたいです。

背景画像とする以外に方法はないものでしょうか…

2009/12/18 08:43:01
id:kaz No.2

kaz回答回数200ベストアンサー獲得回数422009/12/18 09:00:13ここでベストアンサー

ポイント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)をつけると、

大きさが画面幅いっぱいであることが分かると思います。

id:uksp

できましたぁ!!

ありがとうございます!!

勉強になりました!

2009/12/21 05:03:10

質問者が未読の回答一覧

 回答者回答受取ベストアンサー回答時間
1 chinjoh 103 85 5 2009-12-18 08:52:30
2 ween 78 72 7 2009-12-18 08:53:51
3 ぽこたん 517 465 26 2009-12-20 06:53:03

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

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

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

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

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