htmlで画像の上にテキストを表示したが、ブラウザーによって見え方が違う

締切済

質問者：jeurni
質問日時：2010/04/03 18:43
回答数：2件

ホームページの制作で
部分的に画像の上にテキストをつけようと
<DIV STYLE="position:absolute;">
を使って作ってみました。
IEで見るとちゃんとできているんですが、
サファリ、Firefoxで見ると当該箇所が左にずれてしまいます。

・画像の上にテキストをつける
・その画像の中に部分リンクをつける
・どのブラウザーで見てもずれない

以上の条件を満たせば、やり方を問いません。
どなたか教えていただけませんでしょうか？
どうぞよろしくお願いいたします。

素人なので見づらく、変に複雑になっているかもしれませんが
以下ソースの一部です。

<style type="text/css">

div.先頭画像 {
background-image:url(./images/先頭画像);
background-position: top center;
background-repeat:no-repeat;
margin:0;
}

div.サイド {
background-image:url(./images/サイド画像);
background-position: top center;
margin:0;
background-attachment:fixed;
}

table.Goo{
color:#000;
}

</style>
</head>

<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

<div class="サイド">
<center><img src="./images/リンク画像" width="794" height="662" border=“0” usemap="#top"/><br />
<map name="top">
<AREA SHAPE=rect COORDS="610,0,755,30" HREF="リンク先">
</map></center>
<center><IMG SRC="images/white2.gif" width="794" height="1840" border=“0”><br /></center>

<!--当該箇所>
<DIV STYLE="position:absolute; top:662px; left:58px">
　　<IMG SRC="images/背景画像" border=“0” usemap="#first"/><br />
<map name="first">
<AREA SHAPE=rect COORDS="633,18,776,228" HREF="リンク先">
</map>
<DIV STYLE="position:absolute; top:165px;left:125px">
テキスト
</DIV>
<DIV STYLE="position:absolute; top:570px;left:125px">
テキスト
</DIV>

</DIV>
<!--当該箇所ここまで>

<center>
<table class="Goo" width="756" cellpadding="0" cellspacing="0" border=“0”>

<tr>
<td width="75"><br /></td>
<td colspan="3" valign="top" width="681" align="left">
<img src="./画像" width="416" height="53" alt="" border=“0”/>
<br />
<br />
</td>
</tr>

<tr>
<td width="75"><br /></td>
<td colspan="3" valign="top" width="681" align="left">
<img src="./画像" width="369" height="15" alt="" border=“0”/>
<br />
<br />
</td>
</tr>

<tr>
<td width="75"><br /></td>
<td colspan="3" valign="top" width="681" align="left">
テキスト
<br />
</td>
</tr>

</table>
</center>
</div>

</body>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.1

回答者： webnoma
回答日時：2010/04/06 12:40

はじめまして。

ちょっと実現したいことが理解しづらかったので試しに作ってみました。
実現したいことは以下でよろしいのでしょうか？

http://www.web-ma.co.jp/_sample/test/

・全体をセンター揃えにする
・メニュー部分の画像の上にテキストを載せる
・テキストを含む画像全体をリンクとする