0

#contentdivはほとんどのWebコンテンツを保持します。以下に示すように、上マージンは280pxです。これは、サイトのヘッダー画像の高さであり、背景として「body」に配置されます（image / sky1.jpg）。

divをヘッダー画像の上に#content配置できるように、divをdiv#navigationの「マージン」の上にホルダーとして配置するにはどうすればよいですか？#Title

#content #top-floatdivのすぐ上のdivがその始まりでしたが、高さにさらに追加するたびに、「マージン」が影響を受けて下に押し出されます。

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

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;
}
4

4 に答える 4

1

最も簡単な方法は、あなた#top-floatの身長を与えて、そのよう280pxにドロップすることtop-marginです#content：

<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サイジングemの子供たちに与えてください。#top-float#top-float overflow: hidden;

SEOの目的で、マークアップのヘッダーの上にコンテンツを表示する場合は、次の操作を実行できます。

<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-23T18:37:57.230 に答える
1

コンテンツ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-23T18:38:28.603 に答える
0

HTMLも表示せずにこれに答えるのは少し難しいですが、いくつかの提案があります。

  • ＃top-floatdivをコンテンツdivの外に配置します
  • 負のマージンを使用する
  • コンテンツdivを、ヘッダーdivを内部に持つブラウザーの上部と同じ高さにします。次に、ヘッダー画像を背景画像としてヘッダーdiv内に配置します
  • 何かを中央に配置しているようには見えないので、ヘッダーdivに絶対位置を使用することもできます

いつものように、これを達成する唯一の方法はありません。

于 2009-07-23T18:38:38.073 に答える
0

＃top-floatdivには絶対位置または固定位置を使用することをお勧めします。

なぜヘッダー画像を背景画像として配置したいのですか？サイトのヘッダー画像を背景にしないと、すべてが簡単に機能することがわかると思います。また、サイトのロゴ（ヘッダー画像にあると思います）をクリックすると、ユーザーがホームページに戻るのも一般的な方法です。サイトのロゴを背景画像にすると、この機能が効果的に無効になります。

于 2009-07-23T18:40:36.070 に答える