2

私はレイアウトを持っています、これが私のcssです：

body {
    background-color: #16193B; /* Old browsers */
    margin: 0;
    padding: 0;
    color: white;
    background-attachment: fixed;
    overflow: hidden; 
}

html {
    min-height: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-attachment: fixed;
}

#content {
    width: 80%;
    height: 1000px;
    margin: 0 auto;
    background-color: #ADD5F7;
    overflow : hidden;
}


#wrap div{
    height:100%;
    width:100%;
}

#b1 {
    width: 80%;
    height: 1000px;
    margin: 0 auto;
    background-color: #35478C;
    position:relative;
}

#b2 {
    width: 90%;
    height: 1000px;
    margin: 0 auto;
    background-color: #4E7AC7;
    position:relative;
}

#b3 {
    width: 90%;
    height: 1000px;
    margin: 0 auto;
    background-color: #7FB2F0;
    position:relative;
}

#b4 {
    width: 90%;
    height: 1000px;
    margin: 0 auto;
    background-color: #ADD5F7;
    overflow : auto;
    position:relative;
}

そして、それはHTMLファイルの本文にあります。

    <div id="b1">

        <div id="b2">
            <div id="b3">
                <div id="b4">
                    <div id="content">

                    </div>
                </div>
            </div>
        </div>

    </div>

これは私のレイアウトですが、ページの背景にする必要があります...残念ながら、他のdivにテキストを追加すると、長方形が他のdivに重なる「コンテンツ」になります。どうすればこれを修正できますか？実際、一番上の「レイヤー」であり、その下にすべてオーバーレイされるメニューバーが必要です...

4

1 に答える 1

4

わかりました、私の jsFiddle-Solution を見る前に:

  1. このような背景に div を使用することは、美しい解決策ではないことに注意してください。最適なのは、body-tag で background-image を使用して、background-size で引き伸ばすことです。最新のすべてのブラウザでサポートされています。唯一の問題はIE8以下です。

  2. あなたのCSSはめちゃくちゃです。同様の属性を持つ要素をスタイリングするときは、すべての ID を単独でスタイリングする代わりに、クラスを使用します。

基本的に、カスタム コンテンツを使用して新しい div を作成し、background-div にクラスを作成しました。また、CSS をクリーンアップし、不要なステートメントを削除する必要がありました。

-> jsFiddle <-

HTML:

<div  class="centerIt" id="b1">
    <div  class="centerIt" id="b2">
        <div  class="centerIt" id="b3">
            <div  class="centerIt" id="b4">
                <div id="content"></div>
            </div>
        </div>
    </div>
</div>
<div id="contentContainer">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam excepturi laboriosam illum esse voluptas libero aperiam voluptate omnis dolor odio natus tempore sunt doloribus. Suscipit iure vel totam eius reprehenderit.</div>
</div>

CSS:

.centerIt {
    position: relative;
    margin-left: auto;
    margin-right: auto;    
}
于 2012-11-21T20:44:23.063 に答える