0

Webテンプレートの修正レイアウト（幅960ピクセル）を作成しています。ただし、メニューバーの幅をブラウザの幅（つまり、余白なしで可能な限り広い）にしたいと思います。

本体のCSS：

body{
    width:960px;
    min-width:960px;
    margin:auto auto;
}

どうやってやるの ？

このようなレイアウト：http ：//www.google.com/analytics/index.html （本体の固定幅とメニューバーがそれよりも広いことに注意してください）

4

2 に答える 2

0

次の方法で実行できます: DEMO

#header{    
float:left;
padding:15px 0;
width:100%;
}
于 2013-02-20T04:45:34.527 に答える
0

あなたが望むのは、コンテンツを 960px 領域の中央に配置することですが、他のコンテンツ (この場合はメニュー) をページのフルサイズにすることができるようにすることです。それを可能にするために、あなたのようにボディ自体の幅を設定することはできません。代わりに、次のような HTML が必要です。

<html>
<head>
  :
</head>
<body>
  <div id="ContentBox">
    : put your content here
  </div>
  <div id="Menu">
    : Menu content here
  </div>
</body>
</html>

次に、CSS で:

#ContentBox {
  margin: 0 auto;
  width: 960px;
}
#Menu {
  /* Whatever is applicable */
}

Google アナリティクスのサイトに関しては、色、境界線などが定義された全幅のページの個別のセクションがあり、各セクションで上で説明した #ContentBox のような領域があります。次のように、それを共通クラスにして再利用することもできます。

<body>
  <div id="HeaderBar">
    <div class="ContentBox">
      :
    </div>
  </div>
  <div id="GreyBGRegion">
    <div class="ContentBox">
      :
    </div>
  </div>
</body>

CSS:

#HeaderBar {
  border-bottom: #CCCCCC 1px solid;
  background-color: #000000;
  color: #FFFFFF;
}
#GreyBGRegion {
  border-bottom: #CCCCCC 1px solid;
  background-color: #F0F0F0;
  color: #000000;
}
.ContentBox {
  margin: 0 auto;
  width: 960px;
}
于 2013-02-20T04:48:29.267 に答える