2011-01-14 6 views
1

この質問は簡単ですが、私はCSSの専門家です。私はそれが不可能だと思っています(まれなことです)。どのように? CSSの "Position:Absolute"定数Margin-Top?可能?

<div>にはバックグラウンドがない場合、CSSを使用して一定の上限を設定することはできますか?

基本的には、サイトのトップ100pxに背景画像が表示され、スクロールしてもトップマージンがそのまま残ります。

あなたがここにいくつかのライブのコードを見ることができます:
http://www.codemyconcepthq.com/projects/2453/

ここで私が何しようとしてるかの小さなインフォグラフィックです:
http://cl.ly/40bD

ありがとう!

+0

この質問を別の言葉で説明できますか?私はそれがすでに解決されていると信じて以来、私は苦労している... – tekknolagi

+0

インフォグラフィックのロゴがどのようにトップのnavbarの後ろに行くのか?それはそうしていないはずです。むしろ、それは完全に消えるべきです。これはDIVを含む右側のマージントップで行うことができますが、問題はあなたがスクロールするときに私が避けようとしているものであるnavbarの後ろに行くことです。私は "粘着性の"トップマージンを探しています。 – Brian

+0

私はあなたがこれを通常行う方法は、トップのナビゲーションバーを非透明にすることだと思います。 1つのアプローチは、コンテンツボックスをラップして 'overflow:scroll 'を設定し、残りのページがブラウザの高さを100%超えないようにすることです(2つのスクロールバーで終わらないようにする)。 – robertc

答えて

4

解決策の1つは、背景(この画像:http://www.codemyconcepthq.com/projects/2453/images/bg-body.png)の上部を切り取り、ヘッダーの背景として設定することです。

スクロールすると、コンテンツがヘッダーの下に表示され、ヘッダーに背景が表示されるため、そのコンテンツは表示されません。

編集:

の代わりに、私はちょうど主背景に使用したのと同じ画像に自分のヘッダの背景を設定し、前記のような背景を切断します。これにより、ブラウザが2つのイメージをダウンロードする必要がなくなります(イメージが同じであるため、これは役に立ちません)。

+0

美しい!これはまさに私が探していたものです、私はそれを考えることができませんでした!マグニフィーク! 私はちょうど同じバックグラウンドイメージの上の中心(一度の負荷)を使用し、右側のコンテンツよりz-インデックスが高く、navbarよりも低い、絶対配置のトップセンターDIVを実行します! – Brian

2

コードを見てみると、私はあなたができる最善のは、別の<div><div id="header">をポップ<div id="header"><body>の背景画像を適用し、あなたの半透明の画像は、あなたが内側に置く<div>に適用さだと思います。その後、スクロールするコンテンツは<div id="header">の新しい背景によって隠されます。

ので、HTML:

<div id="header"><!-- Begin Header --> 
    <div id="header-inner"> 
    </div> 
</div> 

とCSS:

#header { 
    background:url("../images/bg-body.png") no-repeat fixed center top #000000; 
} 

#header-inner { 
    background:url("../images/bg-menu.png") repeat-x scroll 0 0 transparent; 
} 
+1

あああ!それはまさにマークが言ったことだ...彼が最初に答えたので、私は彼にそれを与えなければならなかった...笑!あなたの答えを見た直前の私のコメントを見てください! – Brian

+0

うん - 私は私の作業コードを含むため、私は遅く答えた:)ナウ、うれしい解決策を得た。 –

1

あなたはヘッダ部分の背景とまったく同じである非透明の背景を配置することによって、同じ効果を得ることができます、同じエリアにあり、コンテンツを持っている(あなたの場合はラッパー)?

関連する問題