0

私は自分のウェブサイトのレイアウトを念頭に置いています: http://imgur.com/RsAFgyz 問題は、中央のストリップをナビゲーションバーの後ろに移動させ、ページの中央に留める方法がわからないことです (ズームしても) ）、または正しい方法で表示されることさえあります。誰かが私をチュートリアルに誘導するか、方法を教えてもらえますか? これが私の完全なコードです：http://jsfiddle.net/c7r6g/（気付かなかった場合は、ナビゲーションバーを画像ファイルとして設定しました） ナビゲーションバーは.roundedで、中央に配置しようとしている div は#centerstrip

これが少しあいまいな場合は申し訳ありませんが、私は CSS の素人です (特にポジショニング)。

4

6 に答える 6

0

ナビゲーション バーはコンテンツの一部であるため、幅を 100% より大きくすることで、ナビゲーション バーを外側に拡張するだけで済みます。これにより、メインコンテンツの右側に拡張されます。

左にシフトするには、2 つのオプションがあり、どちらにもメリットがあります。 1. 相対位置と負の左値を使用して、ナビゲーション バーを左にシフトします。2. 左側に負のマージンを使用します。

これにより、ナビゲーションバーが中央のストリップの一部であるため、実りがない可能性があるz-indexの使用を避けることができます.

于 2013-10-19T20:08:57.073 に答える
0

CSSに変更を加えました。これはフィドルで正常に機能し、フィドルをこれに置き換えます。

#centerstrip {
    background-color: #bbbbbb;
    height: 100%;
    width: 50%;
    display: block;
    margin:auto;
    z-index: -1;
}

これにより、div が中央に配置され、div もナビゲーション バーの下に配置されます。

于 2013-10-19T20:13:32.933 に答える
0

ちょっといじって、どうぞ。リンクされた画像を CSS でレンダリングすることができました。

div のみを使用していますが、コンセプトは同じです。

http://jsfiddle.net/jqarz/1/

以下のコード。

探求すべきいくつかの概念は、幅、マージン、およびパディングです。幅は実際には「コンテンツ ボックスの幅」であり、要素の幅ではないことに注意することが重要です。多くのサイトでは説明が不十分です。

これを行うには多くの方法がありますが、これは 1 つにすぎません。何をしようとしているか、何を使用しているかによって異なります。

HTML:

<div id="background">

    <div id="navbar">navbar</div>
    <div id="content"></div>    

</div>

CSS:

#background
{
    z-index: 0;
    padding: 15px 15px;
    width: 600px;
    height: 800px;
    background-color: #CFF;
    border-style: solid;
    border-width: 1px;
}

#content
{
    z-index: 1;
    border-style: solid;
    border-width: 1px;
    margin: 0 auto;
    width: 90%;
    height: 800px;
    background-color: #FFC;
}

#navbar
{ 
    top: 150px;
    position: absolute;
    z-index: 2;
    width: 600px;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px;
    height: 100px;
    background-color: #FCF;
    text-align: center;
    font-size: 4em;
}
于 2013-10-19T21:53:09.923 に答える
0

私は通常、本文のすべてを div 内にラップしてから、div を中央に配置します。body 要素の幅は、ブラウザ ウィンドウの幅と同じであるため、body タグ内の最初のタグが div であり、その div を中央に配置すると、本体とウィンドウの中央に配置されます。サンプルコードは次のとおりです。

<!doctype HTML>
    <html>
        <head>
            <meta lang="en" charset="utf-8" /> 
            <title>Sample</title>
        </head>
        <body>
            <div id="container">
            </div>

            <style>
                body{
                    background-color: red;
                }
                #container{
                    height: 400px;
                    width: 400px;
                    margin-left: auto;
                    margin-right: auto;
                    background-color: blue;
                } 
            </style>

        </body>
    </html>

秘訣は、 and を使用margin-left: auto;しmargin-right: auto;、そのスタイルを div に配置していることを確認することです。ボディにはセンタリングのためにそれ自体を参照するものが何もないため、そのスタイルをボディに配置することはできません。ただし、div は本体の幅に対して中央に配置できます。

于 2013-10-19T21:25:46.393 に答える