0

私は常にグローバルラッパーを使用してレイアウトを960pxに保ち、すべてのコンテンツをラッパー内に含めてきました。私はこれから離れようとしており、すべての「分割」（マストヘッド、ナビゲーション、スライダー、content_areaなど）を次のようにしています。

 // CSS:
 .container {
            width: 960px;
            margin: 0 auto;
        }

        #masthead {
            width: 100%;
            background: #000;
        }

        #navigation {
            width: 100%;
            background: red;
        }

        #slider {
            width: 100%;
            background: grey;
        }

 // HTML:
 <div id="masthead">
        <div class="container">
            <!-- masthead content goes here -->
        </div>
 </div>
 <div id="navigation">
        <div class="container">
            <!-- navigation content goes here -->
        </div>
 </div>
 <div id="slider">
        <div class="container">
            <!-- masthead content goes here -->
        </div>
 </div>

まず第一に、これが私の最終結果を達成する唯一の方法（またはおそらく最良の方法）であると私は確信していません。これは機能し、個々の区分のスタイルを改善し、コンテンツの幅と「位置」を制限することはできますが、過剰なコンテナークラスを使用せずに、上記を実現する方法についての入力を重視します。

私の2番目の問題、より具体的には、私がアドバイスを求めている理由は、現在取り組んでいるプロジェクトにあります。上のスライダーの「コンテナー」がありません。スライドを全画面表示にして（つまり、スライドは画面の端から効果的に）ページの中央の位置に配置したいと思います。スライドの幅を960ピクセルにするか、それを超えないようにしたいのですが、スライドインすると、「スライダー」divの中央に配置されます。

私が使用しているプラ​​グインはLayerSliderと呼ばれ、スライドごとに「レイヤー」を設定して、さまざまな方向からスライドの最終位置までスライドさせることができます。（ここでの例：LayerSliderフルスクリーンプレビュー）。

各スライド要素は絶対的に配置されており、アニメーションの後にスライドレイヤーが配置される場所を「左」と「上」で指定する必要があります。

「左：50％、上：5％」を使用してコンテンツを「中央揃え」にすることができましたが、ブラウザのサイズを変更すると、要素がずれてしまいます。

私は理にかなっており、ユーザーの解像度に関係なく、要素を全幅divに配置し、同じように見える方法について誰かが私に支援してくれることを願っています。

4

2 に答える 2

0

ラッパーに背景を設定したくない限り、コンテンツを含めて中央に配置する必要はありません。そのスタイリングを に直接適用することで、コードのセマンティックを維持できますbody。

HTML

<nav>
  hi i am the navigation
</nav>
<footer>
  hi i am the footer
</footer>​

CSS

html {
  width: 100%;
}
body {
  border: 1px solid #ddd;
  width: 50px;
  margin: 0 auto;
}​

JSFiddleで見る

于 2012-12-28T19:25:20.440 に答える
0

私が知っていることに固執して、他の解決策を見つけることができませんでした:)

于 2013-01-21T15:54:16.683 に答える