Question

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

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

我在这方面的努力是试图找出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

Answer 1

背景图像未显示的原因是因为您使用的是“background-attachement：fixed”。通过删除它，您的背景位置将相对于它所连接的容器。

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

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

Answer 2

在CSS中，您可以从#navMenu

中删除此CSS

#navMenu { background-attachment: fixed; }

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

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

就第二个问题而言，由于页面正文的边距为50％，因此它以页面为中心。这将使一切都像那样集中。

需要帮助使用CSS定位背景图像

2 个答案: