0

#contentdiv 包含大部分 Web 内容。正如您在下面看到的，有 280 像素的上边距，因为这是网站标题图像的高度，它作为背景 (image/sky1.jpg) 放置在“正文”中。

如何将 div 作为 div 的“边距”上方的持有者，#content以便我可以将我的#navigation, #Titlediv 放在标题图像上方？

#content div 上方的#top-floatdiv 是它的开始，但是每次我向高度添加更多时，“边距”都会受到影响，将其推到下方。

我尝试将<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尺码，那就给#top-floatem 尺码的孩子，并确保给#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-float div 放在您的内容 div 之外
  • 使用负边距
  • 将您的内容 div 与浏览器顶部齐平，其中包含标题 div。然后将您的标题图像放在标题 div 中作为背景图像
  • 看起来您没有将任何东西居中，因此您也可以对标题 div 使用绝对定位

与往常一样，没有一种方法可以做到这一点。

于 2009-07-23T18:38:38.073 回答
0

您可能希望为您的#top-float div 使用绝对或固定定位。

为什么要将标题图像作为背景图像？我想你会发现如果你不把网站的标题图片作为背景，一切都会变得更容易。单击站点的徽标（我假设在您的标题图像中）将用户带回主页也是常见的做法。使站点的徽标成为背景图像可以有效地禁用此功能。

于 2009-07-23T18:40:36.070 回答