HTMLについてです！助けてください！

質問

今、HTML／Dreamweaverでウェブサイトを作っているのですが、分からないことがあって困っています。

画像の上に文字を重ねたいのですが、重ねたい位置にDreamweaverで置くと、左側に大きくずれてしまいます。

<div style="position: relative;">
<img src="○○○.jpg" width="○○○" height="○○○">
<div style="position:absolute; top:○○px; left:○○px; width: ○○px;">
ここに文章を入れます
</div></div>

このコードを使っているのですが、上記の通り、左にずれてしまいます。

説明が下手で申し訳ないのですが、下の写真を見てくだされば分かると思います。

回答No.1

croro_dash · ベストアンサー

私もＤＷで試してみましたが同じ現象が起きました。
画像と文字を重ねたいときに上記のような方法を
とったことがないので別の方法のご紹介ですみません。

特にソースにこだわってないのであれば下記のようにしてはいかがでしょうか？

<div style="background-image:url(○○.jpg); width:○○px; height:○○px; padding:10px 10px 10px 10px">
ここに文章を入れます
</div>

padding:　の4つの数字で top、right、bottom、leftからの距離をそれぞれ指定できます。

長くなってしまうので通常はcss用のファイルを別に作りますが、
とりいそぎ１つのHTMLファイル内で済ませてしまいたいのであればお試しください。

補足

後、気づいたのですが、画面サイズを変えると（ブラウザの右下をドラッグ）

すると、ほかの画像は動くのに、Newsの文字だけ動きませんでした。これって関係あると思うのですが、どうでしょうか？

回答No.3

croro_dash

補足ありがとうございます。

スライスしたimgを、それぞれどうやって並べていますか？
質問文にある「<img src="○○○.jpg" width="○○○" height="○○○">」が
複数あるということでしょうか？

補足

<tr>
<td rowspan="6">
<img src="images/index_26.png" width="16" height="232" alt=""></td>
<td colspan="17">
<img src="images/index_27.png" width="748" height="31" alt=""></td>
<td rowspan="6">
<img src="images/index_28.png" width="15" height="232" alt=""></td>
</tr>
<tr>
<td colspan="17">
<img src="images/index_29.png" width="748" height="22" alt=""></td>
</tr>

こんな感じのコードがずーっと続く感じです。
フォトショップでスライスしたものをデザインにするのが初めてなので、よくわからないことが多くて、本当にすみません。

すべての画像が一つのテーブルに入っているんだと思います。

回答No.2

croro_dash

続けての回答誠にすみません。

さきほどDWで自分も同様のことが起きたと書きましたが、
300pxほどの画像で下記のようにしたらブラウザ（Safari）でもちゃんとDWでのプレビューと同じ位置になっていました。

<div style="position: relative;">
<img src="○○○.jpg">
<div style="position:absolute; top:10px; left:10px; width: 300px;">
ここに文章を入れます
</div></div>

質問者様はどちらのブラウザでテストしていますか？

補足

firefox
safari
google chrome
の三つですが、どれも同じように左に寄ってしまいます。

うーん、後ろの画像は、フォトショップでスライスしたものなんですが、関係あると思いますか？

質問足してすみません・・