- ベストアンサー
CSSで２つの小さなテキストブロックを常に中央のバックグラウンドイメージ上に表示
- CSSを使って、英語のサイトと日本語のサイトに入る入り口のページを作っています。バックグラウンドには幅750px高さ500pxのイメージを常に中央で、上から100pxのところに表示するようにしました。
- バックグラウンドイメージ上にはほとんど表示するテキストがなく、左下幅200px高さ200pxの部分に日本語の入り口を多少のテキストと共に配置し、右下に同じサイズの英語の入り口を配置したいと考えているのですがどうも上手くいきません。
- bodyは以下のようにしてあります。#japaneseと #englishの中身をいろいろ試して見ましたがどうしても左に寄ってしまいます。良い方法がありましたらご教授お願いします。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
面白そうというか、定番の方法なので <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>Untitled</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- h1{display:none;} div.SiteMap{ display:block; position:relative; width: 750px; height: 500px; margin-top:100px; margin-left:auto; margin-right:auto; background: url(/images/sample.gif) no-repeat 50%; padding:0px; } div.SiteMap ol{ display:block; width:200px; height:50px; position:absolute; top:225px; left:275px; padding:0px; } div.SiteMap ol li{ display:block; margin: 10px; height: 30px; width: 70px; float:left; } div.SiteMap ol li a{ position:relative; display:block; margin:0px; height:27px; width: 67px; text-align:center; text-decoration: none; font-weight:bold; padding-top:6px; } a:link { color: rgb(0,0,255); border: outset 5px blue; } a:visited { color: rgb(0,0,136); border-color: rgb(0,0,136); } a:hover { color: rgb( 0,136,255); border-color: rgb( 0,136,255); } a:active { color: rgb( 155,0,255); background-color:black; border-style: inset; top: 5px; } --> </style> </head> <body> <h1>title</h1> <div class="SiteMap"> <ol> <li><a href="./indexj.html" title="日本語の入り口" accesskey="J">日本語</a></li> <li><a href="./indexe.html" title="EnglishPage" accesskey="E">English</a></li> </ol> </div> </body> </html>
お礼
早速のご回答ありがとうございます。 IEを除いて意図するようにできました。下部の左右両サイドに少し文章を入れたのですが、CSSでは問題なく収まっているのにIEだけバックグランドイメージから右にはみ出してしまいます。Firefox、Opera、Safari、Chromeではきれいにそろうのですが・・・ IEのバグでしょうか？ 少し全体を左に寄せてよしとしようと思います。