2

这是我第一次尝试非表格布局，我真的很挣扎。我确实花了几个小时反复试验和研究/阅读帖子和文章。因此，在有人说“询问并回答”并建议关闭此问题之前，请听我说完并提供一些建议。非常感谢。

我有两张图片，一张用于跨越页面顶部的标题，一张用于导航菜单，它应该位于左侧标题图片的正下方。标题将显示在标题图像的顶部（没有问题），一个简单的无序列表链接将显示在导航图像的顶部。显然，导航图像应该像“连接”到顶部图像一样无缝显示。我将使用 php include 将它们放在网站的所有页面上，在这两个图像和菜单正确定位后，我将把单个页面的内容放在标题下方和导航菜单的右侧。

在这一点上，我的挣扎是试图弄清楚 a）为什么导航图像根本不会显示，以及 b）为什么菜单显示在页面中间。

如果我只是对导航图像使用 img 标签，它会显示在页面上，所以我知道并不是浏览器无法“找到”它......

导航图像是否因为在 div 中而未显示？我在这里想念什么？

我还需要它尽可能跨浏览器兼容（至少 IE7+、FF3.6+、Safari、Chrome）。

编码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Some Website</title>
</head>
<body style="margin: 50%; padding; 0; width: 1000px; font-size: .8em; background-image: url(images/header.png); background-repeat: no-repeat; background-attachment: fixed; background-position: center top;">

    <div id="navMenu" style="background-image: url(images/navBackground.png); background-repeat: no-repeat; background-attachment: fixed; background-position: 0px 200px;">
        <ul>
            <li>Home</li>
            <li>Business Directory</li>
            <li>City Government</li>
            <li>Community Calendar</li>
            <li>News</li>
            <li>The Story of the Thing</li>
            <li>The History of Somewhere</li>
            <li>The Park</li>
            <li>Churches and Schools</li>
            <li>Recreation</li>
            <li>Fire Department</li>
            <li>Map</li>
            <li>Contact Us</li>
        </ul>
    </div>
</body>

作为参考，header.png 为 1000x200px，navBackground.png 为 200x500px

4

2 回答 2

2

背景图像未显示的原因是因为您使用的是“背景附件：固定”。通过删除它，您的背景位置将相对于它所附加的容器。

另一个问题是导航位置。样式 "margin: 50%" 将采用页面宽度的百分比并将其应用于容器的所有 4 个侧面。通过以像素为单位设置静态宽度，或使用速记正确设置边距，您应该会获得更理想的结果。这是我将使用“margin: 200px auto”的速记示例。这将使它排在一个更好的位置。要了解有关速记的更多信息，请查看此页面：http ://www.dustindiaz.com/css-shorthand/

另外，我建议将您的样式表外部化以清理您的标记。基本上，您链接到文档头部的样式表，并使用类名和 ID 定位元素。看看这篇文章：http ://www.tizag.com/cssT/external.php

于 2012-11-19T17:41:31.550 回答
0

在您的 CSS 中，您可以从 #navMenu 中删除此 CSS

#navMenu { background-attachment: fixed; }

您可能还需要仔细检查图像的背景位置。

如果你摆脱它，背景图像应该会出现。

就第二个问题而言，由于页面正文的边距为 50%，因此它以页面为中心。这将导致一切都以这样的方式居中。

于 2012-11-19T17:40:16.927 回答