CSSをつかってホームページを作っています。

幅760px、高さ224pxのヘッダーを作ったので、
画面中央に表示させたいのですが、どうしても左に寄ってしまい動きません。どうすればいいでしょうか?
一応今の内容はこのような感じです。ブラウザはIE6を使ってます。
「HTML」
<TITLE>テスト</TITLE>
<link rel="stylesheet" href="header.css" type="text/css">
</HEAD>
<BODY>
<div id="header">
<h1>h1 ヘッダ </h1>
</div>
</BODY>
</HTML>

CSS
#header{ width: 760px;
    height: 224px;
background:#9966dd;
 margin-left:auto;
    margin-right:auto;
    }

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/10/12 22:19:43
  • 終了:2006/10/12 22:53:32

回答(1件)

id:wizemperor No.1

wizemperor回答回数379ベストアンサー獲得回数522006/10/12 22:37:06

ポイント60pt

IE6以下はバグのせいでmarginにautoを指定したセンタリングができません。

代わりにtext-alignでブロックレベル要素がセンタリングされるバグがあるのでこれを利用します。

http://cssbug.at.infoseek.co.jp/detail/winie/b035.html

下のようにすると上手く行くと思います。

body {

text-align: center; /* IE6以下ではブロックレベル要素もセンタリングされる */

}

#header{

width: 760px;

height: 224px;

background:#9966dd;

margin-left:auto;

margin-right:auto;

text-align: left; /* 左寄せに戻す */

}

id:hiroshisp

ありがとうございます!うまくいきました。

そんなバグがあるとは知りませんでした。

最近CSSの勉強を始めたばかりなのに、

いきなり苦戦して困っていました。

ありがとうございました。

はてなでまた似たような質問をすると思います。

よろしくお願いします? m(_ _)m

2006/10/12 22:53:19
  • id:cockscomb
    解答終了後に失礼とは存じますが、気になったのでちょっとしたアドバイスを。

    Internet Explore 6 などの最近のブラウザであれば、marginの設定でセンタリング可能です。
    今回の問題はブラウザのバグではなく、ブラウザが「互換モード」になっていることが原因です。HTMLに『DOCTYPE』を記述することによって「標準モード」にしてやると、正確にセンタリングできます。
    詳しくは
    http://html.dspt.net/mode.html
    このページなどに書いてありますので、参照されると良いでしょう。

    さて、それを踏まえたサンプルは、

    HTML
    >||
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
    <link rel="stylesheet" href="header.css" type="text/css">
    <title>テスト</title>
    </head>
    <body>
    <div id="header">
    <h1>ヘッダ</h1>
    </div>
    </body>
    </html>
    ||<

    CSS
    >||
    #header{
    width: 760px;
    height: 224px;
    color: #000000;
    background:#9966dd;
    margin-left:auto;
    margin-right:auto;
    }
    ||<

    このようにしてやると正確に表示されます。

    id:hiroshispの方法でもIE6では問題ありません。しかしブラウザによっては正確に表示されない可能性があります。HTMLを書く場合はDOCTYPEを必ず明記することが望ましいと思います。
  • id:wizemperor
    訂正ありがとうございます。
    正しくは、

    IE5.5以下はバグのせいでmarginにautoを指定したセンタリングができません。IE6のQuirks(互換モード)ではIE5.5以下と同様の動作をします。

    でしたね。

    IE6の互換・標準モードに限らず、text-alignでブロックレベル要素がセンタリングされてしまうバグは発生するため、text-alignを使用するときは注意が必要です。

    cockscombさんがおっしゃるとおりDOCTYPEは必ず記述するべきだと思います。
  • id:hiroshisp
    cockscombさんwizemperorさん

    丁寧なご説明ありがとうございます。
    大変参考になりました。

    じつは先日、職場のHPを製作をまかされたの
    ですが、かなり急ぎだったため、とりあえず
    ビルダーで作ってあげておきました。

    それで、ちょうどいい機会なのでCSSを
    勉強することにしました。でも、思っていた
    より大変ですね。いろいろ教えていただけて
    助かりました。

    また、質問をすることがあると思います。
    よろしくおねがいします。m(_ _)m

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません