divの位置決めでマージンはどのように機能しますか？

#content divはほとんどのウェブコンテンツを保持します。下記のように、280pxの上マージンがあります。これは、サイトのヘッダーイメージの高さで、背景として 'body'に配置されています（image/sky1.jpg）。divの位置決めでマージンはどのように機能しますか？

#content divの 'margin'の上にdivをホルダーとして配置するにはどうすれば#navigation、#Title divsをヘッダーイメージの上に置くことができますか？

#content divのすぐ上にあるdivがその開始点でしたが、それ以上の高さを追加する度に 'margin'が影響を受けるようになりました。

<div id="content"></div>の上に<div id="top-float></div>を置いてみました。これはどのように私はこれを配置する必要がありますか？

html { 
    background: #73ADD7 url(images/gradient.gif) repeat-x; 
} 
body { 
    padding: 0; 
    margin: 0; 
    background:url(images/sky1.jpg) no-repeat center top; 
    color: #666; 
    width: 100%; 
    display: table; 
} 
#top-float{ 
    padding-left:2.3em; 
    padding-right:2.3em; 
    height:10em; 
} 
#content { 
    width: 890px; 
    margin: 280px auto 0; 
    background: #fff; 
    border: solid 0px #ccc; 
    padding: 0px; 
} 
#footer { 
    width: 890px; 
    margin: px auto 0; 
    background:url(images/footer-bg.jpg) 
    no-repeat center bottom #fff; 
    border: solid 0px #ccc; 
    height:250px; 
}

出典

2009-07-23 Anonymous

言語を修正してください（句読点）。このように読むのは非常に疲れている。 – weiqure

これは編集コンテストでした –

@weiqure - 心配しないで、少なくとも4人が他人の編集を上書きします:) –

最も簡単な方法は、あなたの#top-floatに280pxの高さを与え、そのよう#contentためtop-marginを削除するには、次のようになります。

<html> 
    <head> 
    <style type="text/css"> 
     html { 
     background: #73ADD7 url(images/gradient.gif) repeat-x; 
     } 
     body { 
     padding: 0; 
     margin: 0; 
     background:url(images/sky1.jpg) no-repeat center top; 
     color: #666; 
     width: 100%; 
     display: table;  
     } 
     #top-float{ 
     margin: 0; 
     padding: 0 2.3em; 
     height:280px; 
     } 
     #content { 
     width: 890px; 
     margin: 0 auto; 
     background: #fff; 
     border: solid 0px #ccc; 
     padding: 0px; 
     } 
     #footer { 
     width: 890px; 
     margin: 0 auto; 
     background:url(images/footer-bg.jpg) 
     no-repeat center bottom #fff; 
     border: solid 0px #ccc; 
     height:250px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="#top-float"> 
    </div> 
    <div id="#content"> 
    </div> 
    <div id="#footer"> 
    </div> 
    </body> 
</html>

あなたがemサイズが必要な場合は、その後、#top-floatエムサイズの子供を与えます、必ず指定してください#top-floatoverflow: hidden;

あなたのコンテンツをabo SEOの目的のために、あなたのマークアップであなたのヘッダーVEのは、次の操作を行うことができます。

<html> 
    <head> 
    <style type="text/css"> 
     html { 
     background: #73ADD7 url(images/gradient.gif) repeat-x; 
     } 
     body { 
     padding: 0; 
     margin: 0; 
     background:url(images/sky1.jpg) no-repeat center top; 
     color: #666; 
     width: 100%; 
     display: table;  
     } 
     #top-float{ 
     position: absolute; 
     top: 0; 
     left: 0; 
     padding: 0 2.3em; 
     height:280px; 
     } 
     #content { 
     width: 890px; 
     margin: 280px auto 0; 
     background: #fff; 
     border: solid 0px #ccc; 
     padding: 0px; 
     } 
     #footer { 
     width: 890px; 
     margin: 0 auto; 
     background:url(images/footer-bg.jpg) 
     no-repeat center bottom #fff; 
     border: solid 0px #ccc; 
     height:250px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="#content"> 
    </div> 
    <div id="#footer"> 
    </div> 
    <div id="#top-float"> 
    </div> 
    </body> 
</html>

出典

2009-07-23 18:37:57

このチャンピオンのおかげでヒープ！ええ、返事をしたすべての人にも感謝します。これはちょうど初心者の素晴らしいサイトです。ありがとうございます。 –

ちょうどあなたのコンテンツのdivから上マージンを削除して、指定された高さでそれより上のプレースホルダを追加します。

HTMLのスニップ：

<body> 
    <div id="header">Stuff</div> 
    <div id="content">Body stuff.../div> 
</body>

とCSS：

#content { 
    margin-top:0; 
} 

#header { 
    height:280px; 
}

それはコンテンツのdiv（意味的に）内にあるように、余分なヘッダ情報のために、より理にかなっている場合は、負のマージンを使用することができます。

HTMLのスニップ：

<body> 
    <div id="content"> 
    <div id="header">Stuff</div> 
    Body stuff... 
    </div> 
</body>

とCSS：

#content { 
    margin-top:280px; 
} 

#header { 
    margin-top:-280px; 
}

出典

2009-07-23 18:38:28

それはまた、あなたのHTMLを見ることなく、これを答える少しトリッキーですが、いくつかの提案：

置きます＃トップ - フロートdivコンテンツの範囲外
マイナス記号を使用余白
コンテンツdivをブラウザの上部に、ヘッダーdivを内側にして置きます。その後
あなたも

いつものように、ヘッダーのdivのための絶対位置を使用することができますので、あなたが何かを中心にしているように、それは見ていないが、誰もが存在しない背景画像として、あなたのヘッダーdivの内側にあなたのヘッダー画像を置きますこれを達成する方法。

出典

2009-07-23 18:38:38

＃top-float divには、絶対配置または固定配置を使用できます。

なぜヘッダーイメージを背景イメージにしたいのですか？サイトのヘッダーイメージを背景にしないと、すべてが簡単に機能することがわかります。また、サイトのロゴ（ヘッダーイメージにあると仮定）をクリックすると、ユーザーはホームページに戻ります。サイトのロゴを背景イメージにすると、この機能は実質的に無効になります。

出典

2009-07-23 18:40:36

divの位置決めでマージンはどのように機能しますか？

答えて

関連する問題