2

次のヘッダーを再作成したい:

問題は、コンテンツが白いセクションの中央にあることです。灰色は本文の背景で、ヘッダーは画面の 100% です。

私が今持っているものは次のとおりです。

CSS

.top_left {
  background:#3c4d74;
}

.top_right {
  background:#2f3a5a;
}

.top_center {
  background:#3c4d74 url(http://img85.imageshack.us/img85/2816/headerbgo.jpg) no-repeat right top;
  height:140px;
}

#page, 
.top_center {
  max-width:1000px;
  margin:0 auto;
}

#page {
  background:#FFF;
}

body {
  background:#DEDEDE;
}

HTML

<body>
    <div id="top-header">
        <div class="top_left"></div>
        <div class="top_center">
            <a href="#">LOGO</a>    
        </div>
        <div class="top_right"></div>
    </div>
    <div id="page" class="hfeed">
        MY content bla bla bla
    </div>    
</body>​​​​​​

http://jsfiddle.net/gTnxX/で動作していることがわかります（フィドルで確認できるように、1000px ではなく最大幅 600px を設定しています）。

任意の解像度で左側をソフトブルー、右側をハードブルーにするにはどうすればよいですか?

4

1 に答える 1

1

これを行うには、ポジショニングがどのように機能するかをよく理解する必要があります。

は#header-bgよりも下になるように配置されています#wrapper。幅 100%、高さ 140px で、2 つの div があり、どちらもそのスペースの 50% を占め、左右で異なる色になります。

#wrapperは相対的に動作するように配置され、のz-index上に配置され#header-bgます。幅は 600px に設定され、margin: 0 auto;中央に配置されます。

これ#headerは、高さと必要な背景が設定された単純な div です。

コンテンツ#headerは通常の流れに従います。

これは、要求された動作を備えた jsfiddle です。

http://jsfiddle.net/sg3s/cRZxN/

これはうまく劣化し、コンテンツが画面よりも大きい場合は水平方向にスクロールできます (元の jsfiddle から気付いたこと)。

編集：

IE7 互換にするために、いくつかの変更を加えて 2 つのバグを修正しました。ポジショニングのバグを修正するために、left: 0;と をtop: 0;明示的に追加する必要がありました。#header-bgdiv を 50% ではなく 49%内#header-bgに作成しないと、IE7 が適切にサイズ変更されず、正しい div が下に移動します。作成された小さなギャップを補うために、正しい div を作成しましたfloat: right;。

于 2012-06-16T18:37:11.117 に答える