1

私は、それぞれが異なる背景画像を持ち、100％の幅に並べて表示される、3つの別々の「レイヤー」（トップナビゲーション、コンテンツ、フッター）を持つWebサイトを作成する方法を模索しています...しかし、私はコンテンツを中央に配置します（含まれているdivにマージンがあるかのように：0が自動的に適用されます）。

これまで、背景画像専用のdivを作成し、コンテンツdivを絶対的に配置しようと試みてきましたが、自動的に中央に配置できるようにしています。

しかし、私はそこにあるドキュメントの「フロー」から要素を取り出しているので、背景画像のdivが互いに重なり合ってしまいます。

これを説明するのは本当に難しいので、うまくいけば、この例が役立つでしょう：

http://jsfiddle.net/RB46S/

ご覧のとおり、青いdivがあり、背景が100％まで伸びていますが、ナビゲーションと大きな画像をここに配置したいと思います。

私の体は緑色で、次にhp_content divがあります。これは、すべてのコンテンツが中央に配置される場所です。ここでの問題は、マージンまたはパディング値を適用できないことです（機能していないことを示すために適用しました） 、親/ブラウザの上からの位置のみで、サイトをレスポンシブにするときに問題が発生すると思います。

次に、上部のナビゲーション（青）のdivと同じ赤いdivがあります。境界線は100％ですが、フッター（Twitterフィード、最新のブログ投稿、連絡先の詳細）をここの中央に配置したいと思います。

うまくいけば、誰かが私が達成しようとしていることを理解し、このようなページを正しく設定する方法を知っているといいのですが、どんな助けでも大歓迎です！

ジョン

4

2 に答える 2

3

Ok！HTMLを次のように構成してみてください。

<html>
<head></head>

<body class="index">

    <section class="top">
        <header class="content">
            <nav>
                <ul id="">
                    <li><a href="" id="">link 1</a></li>
                    <li><a href="" id="">link 2</a></li>  
                </ul>
            </nav>
        </header>
    </section>

    <section class="main">
        <div class="content">
            <h2>Whatever</h2>
            <div class="something">This is something else</div>
        </div>        
    </section>

    <section class="footer">
        <footer class="content">
            Footer content
        </footer>
    </section>

</body>
</html>​

次に、次のようなCSSがあります。

body, html{    
    width:100%;   
}

body {
    background: green;
}

body > section{
    width:100%;
}

/* this style will set all the section .content(s) to be 400px wide */
body > section > .content{
    display:block;
    margin:0 auto;
    width:400px;    
}

section.top {
    height: 510px;
    background: blue;
}

/* if you want to individually change widths for each section, do something like this:*/

section.top .content{
    width:100%;
}    

/* or not! */

section.main {
    height:200px;
}

section.footer {
    height: 400px;
    background: red;
}

遊んでください：http ：//jsfiddle.net/FC2Ea/

したがって、サイトセクションごとに、そのセクションのすべてのコンテンツのコンテナがあり、「。content」のような覚えやすいクラス名が付いています。目的に応じて、すべてのコンテンツを同じ幅に設定することも、各セクションのコンテンツを異なる幅に設定することもできます。いずれにせよ、セクションはブラウザの幅の100％を占めます。幸運を！:)

</ p>

于 2012-10-17T16:29:07.377 に答える
0

各メインDiv内に別のDivを追加し、スタイルを次のように使用する場合

<div style="Width: 80%; float:right; margin-right: 150px;">

私はそれがある程度役立つかもしれないと思いますか？

<div class="top_shade">  
    <div style="Width: 80%; float:right; margin-right: 150px;">      
    <header>
                <nav>
                    <ul id="">
                        <li><a href="" id=""></a></li>
                        <li><a href="" id=""></a></li>
                        <li><a href="" id=""></a></li>
                        <li><a href="" id=""></a></li>
                        <li><a href="" id=""></a></li>     
                    </ul>
                </nav>
    </header>
    </div>
    </div>
于 2012-10-17T12:13:11.060 に答える