- 締切済み
背景画像の上にテキストを表示したい
はじめまして。 さっそくですが、背景画像の上にテキストを表示したいのですが、各ブラウザによってレイアウトにずれが生じてしまいます。 画像リンク（Network Servicesなど）は各ブラウザで確認してもレイアウトが崩れていないのですが、テキストリンク（aaaaaaaaaやbbbbbbbbなど）が思い切りずれてしまいます。 こちらまず背景画像をレイアウトし、その上に画像リンクやテキストを重ねてレイアウトしているのですが、作り方そのものが間違っているのでしょうか？それともcssの設定に問題があるのでしょうか？ 該当css部分は下記です。 #oslu_1a{ margin-top: 30px; margin-left: 23px; } #oslu_2a{ margin-top: -55px; margin-left: 270px; } #oslu_3a{ margin-top: -39px; margin-left: 515px; } なにとぞよろしくお願いいたします。m(_ _)m
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- 9950high
- ベストアンサー率45% (11/24)
あと1つ 各スタイルシートの #box1、#box2、#box2に対して #box1{ width:100px; height:100px; background-color:#0099FF; float:left; padding: 0px 0px 0px 0px; word-break:break-all; } word-break:break-all;という スタイルシートを追加してみてはどうでしょうか？
- 9950high
- ベストアンサー率45% (11/24)
一番上のスタイルシート部分に body { margin: 0; padding: 0; } を入れてみてはどうでしょうか？
- 9950high
- ベストアンサー率45% (11/24)
どうもこんにちは 言葉では伝えずらいので簡単なサンプルを作成してみました。 ↓HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <title> </title> <meta name="keywords" content=" " /> <meta name="description" content=" " /> <meta name="copyright" content=" " /> <link href="abc.css" rel="stylesheet" type="text/css" /> <!--<script language="JavaScript" src="abc.js" type="text/javascript"></script>--> </head> <body> <div id="box1"> <a href="*"></a> <div id="oslu_1a"> <ul class="products"> <li><a href="*">aaaaaaaaaaaaaaaaaaaaaa</a></li> <li><a href="*">bbbbbbbbbbbbbbbbbbbbbb</a></li> <li><a href="*">cccccccccccccccccccccc</a></li> <li><a href="*">dddddddddddddddddddddd</a></li> </ul> </div> </div> <div id="box2"> <a href="*"></a> <div id="oslu_2a"> <ul class="products"> <li><a href="*">aaaaaaaaaaaaaaaaaaaaaa</a></li> <li><a href="*">bbbbbbbbbbbbbbbbbbbbbb</a></li> <li><a href="*">cccccccccccccccccccccc</a></li> <li><a href="*">dddddddddddddddddddddd</a></li> </ul> </div> </div> <div id="box3"> <a href="*"></a> <div id="oslu_3a"> <ul class="products"> <li><a href="*">aaaaaaaaaaaaaaaaaaaaaa</a></li> <li><a href="*">bbbbbbbbbbbbbbbbbbbbbb</a></li> <li><a href="*">cccccccccccccccccccccc</a></li> <li><a href="*">dddddddddddddddddddddd</a></li> </ul> </div> </div> <!-- services / --> </body> </html> ↓css @charset "Shift_JIS"; #box1{ width:100px; height:100px; background-color:#0099FF; float:left; } #box2{ width:100px; height:100px; background-color:#66CC99; float:left; } #box3{ width:100px; height:100px; background-color:#CC3366; float:left; } #oslu_1a{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #oslu_2a{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #oslu_3a{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } バックカラー部分に画像を配置 パディングの設定で調整できると思います。 参考程度によろしくお願いします。
補足
9950highさん、早速ご丁寧にサンプルをありがとうございました。m(_ _)m 大変助かりました！なるほどboxをさらにいれこにするのですね！ ご指摘いただきました部分を参考に自分で再度チャレンジしてみました。 やはりまだブラウザ間のレイアウトのずれが生じている状態です。 フォントの指定にも問題があるのでしょうか。 それともなにか私の解釈がおかしいのでしょうか。。。 恐れ入りますが、よろしくお願いします。m(_ _)m
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
9950highさん、いろいろとアドバイスいただき本当にありがとうございます。 ご指摘いただいたとおりに指定してみたのですが、やはりブラウザによってフォントの大きさ表示の違いのせいか同じようにはなりませんでした(＞ε＜) おそらくこの作り方そのものがムリがあるのではないかと思ったりしています。（自分自身も今までかなりいろいろ試行錯誤はしてみたのですが、最終的にはブラウザごとに違うcssを読み込ませるという方法をとっています） 9950highさんのアドバイスとても参考になりました。 この問題におつきあいくださり、本当にありがとうございました。m(_ _)m