2012-01-21 6 views
0

添付のワイヤフレームを参照してください。私は青写真のCSSを使用しています。ヘッダーを除くすべてのものが980pxのコンテナになるようにしたい。流体側が1つのヘッダを作成する

ヘッダーについては、左の列が流動的であることを希望します。いつもブラウザの左に触れるように成長しています。あなたは、片側のみに液体であるヘッダを持つコンテナをどのように構築できますか?

ワイヤフレームが問題の説明に役立つことを願っています。そうでない場合は、私に知らせてください。おかげ

Wireframe

答えて

0

は私が私が正しいならば、あなたはあなたのヘッダは常に右上と左上隅になるとコンテナの位置に影響を与えないようにしたい見てみましょうか?ヘッダーをコンテナから取り出して、ボディマージンが0に設定されていることを確認してください。ヘッダーは実際にはドキュメントの左上隅に完全にあり、ヘッダーは絶対位置にしてください。私が正しくあなたの質問を解釈してきたが、私はこれを行うための唯一の方法は、コンテナやバナーエリアのzインデックスで遊んでいると思う場合はわからない

body { 
    margin: 0px; 
} 

.header { 
    width: 200px; 
    position:absolute; 
} 
.container { 
    width: 980px; 
    margin:0 auto; 
} 

<body> 
<div class="header"></div> 
<div class="container"></div> 
</body> 
+0

申し訳ありません。コンテナ(980ピクセル)では、コンテナの左側に200ピクセル幅のヘッダーが必要です。その後、コンテナの外では、ボディ内でdivをブラウザの左端から、ヘッダー(200px単位)までずっと通り過ぎるようにしたい。流体ヘッダーbkgを右のブラウザー側に移動させたくありません。それは役に立ちますか? – AnApprentice

1

。例えば

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

あなたのHTMLのためのその後
body { margin: 0; } 
#container { width:980px; margin: 0 auto; z-index: 1; background-color: black; height:500px; } 
#logo { width:200px; height:50px; background-color: red; } 
#header-left { position: absolute; top:0; left:0; height:50px; width:50%; z-index: 0; background-color: red; } 

<div id="header-left"></div> 
<div id="container"> 
    <div id="logo"></div> 
</div> 

は、この情報がお役に立てば幸いです。

関連する問題