![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
ホームページの制作で
部分的に画像の上にテキストをつけようと
<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>
![「htmlで画像の上にテキストを表示したが」の質問画像](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/f/230418_5497c7761155a/M.jpg)
A 回答 (2件)
- 最新から表示
- 回答順に表示
ご連絡遅くなり申し訳ありません。
いただいたソースを元に、こちらの形に合わせてみたいと思います。
何度もご回答いただき、ありがとうございました。
No.1
- 回答日時:
はじめまして。
ちょっと実現したいことが理解しづらかったので試しに作ってみました。
実現したいことは以下でよろしいのでしょうか?
http://www.web-ma.co.jp/_sample/test/
・全体をセンター揃えにする
・メニュー部分の画像の上にテキストを載せる
・テキストを含む画像全体をリンクとする
![「htmlで画像の上にテキストを表示したが」の回答画像1](http://oshiete.xgoo.jp/_/bucket/oshietegoo/images/media/4/846848_5497ef97e9764/M.jpg)
ご回答ありがとうございます。
説明不足で申し訳ありませんでした。
参考画像をつけましたので、
できましたらこの形式で例を教えていただけると幸いです。
お手数おかけいたしますが、何卒よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
テーブルの一部分のセルだけに...
-
html でのテキスト結合について
-
同じクラス名はつけないほうが...
-
XHTMLに関する質問 順序が逆に...
-
表とリスト(ulとtable)の違い...
-
Dreamweaver デザインビューの...
-
divで囲んだ文字が消える
-
テーブルの枠線に色が付かない
-
固定ヘッダーがある時のページ...
-
ブラウザによってテーブルのセ...
-
vbscriptで時計を作りたい
-
Visual Studio で CLR 開発でデ...
-
CSSで空けた文頭の全角スペース...
-
<img>タグにCSSのclass設定可能?
-
HTMLでテーブルタグ<table>を使...
-
テーブルタグの中にdivを含めて...
-
テーブルとテーブルの間隔について
-
TABLEのセルの中の文字を行単位...
-
TRタグの余白をcssで設定するには
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
formのinputなどの幅100%指定
-
divで囲んだ文字が消える
-
td要素内のdiv要素をセンタリン...
-
XHTMLに関する質問 順序が逆に...
-
テーブル内のテーブルの高さを...
-
td width="180" と固定してるの...
-
Tableタグで作成した表の縮小
-
Tableタグ内のspan styleが適応...
-
cssで、テーブルのtdの中の文字...
-
table内の画像を中央寄せ、のせ...
-
<img>タグにCSSのclass設定可能?
-
Firefoxを使ってるのですがズー...
-
表とリスト(ulとtable)の違い...
-
trとtrの間
-
同じwidth=200でもセル内の文字...
-
リストの記号を括弧付きの文字...
おすすめ情報