2011-08-16 29 views
0

xの上にヘッダとフッタの背景を繰り返したい。したがって、どのページ解像度でも幅のサイズがすべて適用されます。CSS:背景色の問題

は、これは、私はそれが見えるようにする方法である: Concept

アン、この表示されている方法:私は960のGSを使用してい Template

、すべてのdiv要素が960ピクセル幅に制限されています。 xを介してdivの色を拡張する方法はありますか?

ここでプロジェクトを参照してください: http://gabrielmeono.com/yonature/

答えて

1

をはいあなたは3つの部分にページを分割する必要があり

があります:ヘッダ、ボディは、フッタ 我々はつもりだ何か少しでdivを作成することですCSSのビット。私たちは、ウェブサイトの両側にあるdivと、中央に配置されたdivを持っています。 私は、ヘッダーのためにそれを行う方法を紹介します、そしてあなたは、本体/フッターの同じことを行います。

<html> 
<head> 
<style type="text/css"> 
html{} 
body { margin: 0px; width: 100%; } 
#headerCenter { float: left; width: 100%; text-align: center; color: #00AA00; height: 120px; } 
#headerContainer { margin: 0 auto; width: 960px; } 
#header { width: 100%; float: left; height: 120px; } 
</style> 
</head> 
<body> 
<div id="headerCenter"> 
    <div id="headerContainer"> 
     <div id="header">HEADER</div> 
    </div> 
</div> 

.. same for body/footer.... 
</body> 
</html> 

のでトリックがある:

  • DIV(#headerCenter)それはページの向こう側にあります。その高さを定義し、背景をペイントし、 'text-align:center;'を設定します。

  • inside 'margin:0 auto;'とdivを入れます。および所望の幅を有する。この部門のフロートはありません!これにより、高さが0のdivが作成され、親divの中央に配置されます。

  • 内側にヘッダーを入れます。我々は

繰り返し幅を100%にすることができる...など左フロートを設定する(960ピクセル以上)することができ、このボディ用とフッターの

ところで、私は好きではないHTMLテーブルを、使用している別の方法レイアウトに使用する。 これを設定する際に問題がある場合は、私に知らせてください。あなたのためにレイアウトを行います。

+0

ありがとう、これは本当に役に立ちました –