0

私のページサイズは960pxです。ただし、ページの上部 (ヘッダー用) に を使用する 2 つの背景が必要100%です。

全幅の黒い背景と、その下の全幅の灰色の背景。

次のjsFiddleを試しました

<header id="bg1"></header>
<header id="bg2"></header>

<section id="page">
    <header id="page-header">
        <div>
            <nav>
                <a href="#">Home</a>
                <a href="#">About</a>
            </nav>
            <h2>SiteLogo</h2>
        </div>
    </header>
</section>

bg1黒の背景とbg2灰色の背景にする必要があります。

#bg1 {
    background: #000;
    width: 100%;
    height: 60px;
    margin-bottom: -60px;
    border-bottom: 1px solid lime;
}
#bg2 {
    background: #ccc;
    width: 100%;
    height: 20px;
    margin-bottom: -20px;
    border-bottom: 1px solid cyan;
}

#page-header {height: 60px;}
#page{margin:0 auto;width: 360px;} /* 960px */

body {color: #fff}
nav { float: right; }
nav a { color: #fff; }

私は実際にそれがどのように行われたかを確認しStack Overflowました.私は正しくやっているようですが、それは単一の要素に対してのみ機能します. 2 番目の要素を使用しようとすると、最初の要素の上に移動します。

だから私の質問は、全幅の黒い背景と全幅の灰色の背景を持つように修正するにはどうすればよいですか?

4

3 に答える 3

1

黒い背景にロゴ + ナビゲーション バーを配置しますか? このように: http://jsfiddle.net/jEYbP/6/

#bg1 {
    background: #000;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid lime;
}
#bg2 {
    background: #ccc;
    width: 100%;
    height: 20px;
    margin-bottom: -20px;
    border-bottom: 1px solid cyan;
}

#page-header {height: 60px;}
#page{margin:-80px auto 0;width: 360px;} /* 960px */

body {color: #fff}
nav { float: right; }
nav a { color: #fff; }
于 2013-11-06T22:10:30.167 に答える
0

bg1 および bg2 div から負の下部マージンを削除します。これを行うと、下の要素が上に引っ張られます。

#bg1 {
    background: #000;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid lime;
}
#bg2 {
    background: #ccc;
    width: 100%;
    height: 20px;
    border-bottom: 1px solid cyan;
}

jsFiddle の例

于 2013-11-06T21:59:24.700 に答える
0

あなたが正しくやろうとしていることを私が理解している場合は、コンテナのコンテンツ (この場合はナビゲーション) を、ページの幅にまたがる灰色の背景に単純にプル (負の上部マージン) する必要があります。

負の上部マージンを適用する必要がある唯一の要素は、最後の背景要素です。この場合はそれです。コンテンツを「引き込む」つもりはないので、負の上部マージンなしで#bg2終了できます。#bg1

したがって、最終的には次のような CSS になります (現在のマークアップを使用):

#bg1 {
    background: #000;
    width: 100%;
    height: 20px;
    border-bottom: 1px solid lime;
}
#bg2 {
    background: #ccc;
    width: 100%;
    height: 60px;
    margin-bottom: -60px; // This pulls the content below it into this space
    border-bottom: 1px solid cyan;
}

フィドルの例を次に示します: http://jsfiddle.net/jEYbP/3/

于 2013-11-06T22:07:32.443 に答える