人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>

1261090107
●拡大する

●質問者: uksp
●カテゴリ:ウェブ制作
✍キーワード:BODY HTML test イメージ サイズ
○ 状態 :終了
└ 回答数 : 2/5件

▽最新の回答へ

1 ● Mook
●35ポイント

それぞれを独立した 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

◎質問者からの返答

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

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

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

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


2 ● kaz
●35ポイント ベストアンサー

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)をつけると、

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

◎質問者からの返答

できましたぁ!!

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

勉強になりました!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ