0

我一直在为 tafe 做一个网站，并且我已经尝试了不同的方法来做到这一点，但到目前为止它们都没有奏效。我正在尝试使用 div id 将按钮图像添加到列表菜单，但它似乎不起作用。这个演示页面是我的页面的在线版本，图像菜单假设在左侧，上面有文字。

我正在尝试将图像作为背景图像放入无序列表中，但它似乎不起作用。我正在尝试将它放在 css 的这一部分中

#navcontainer ul {
    padding: 0px;
    margin-left: 0px;
    list-style-type: none;
    width: 200px;
    display: block;
    line-height: 34px;
    background-image: url(images/pg_menu_bg.png);
}

这是我的 html 和我的 css：

<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation"><ul><li><a href="JavaScript:void(0);">HOME</a></li><li><a href="JavaScript:void(0);">NEWS</a></li>
<li>
<a href="JavaScript:void(0);">CONTACT</a></li><li><a href="JavaScript:void(0);">ABOUT</a></li></ul></div>
<div id="leftcolumn">
  <div id="navcontainer">
  <ul>
    <li><a href="JavaScript:void(0);">Upcoming Events</a></li>
    <li><a href="JavaScript:void(0);">Members</a></li>
    <li><a href="JavaScript:void(0);">Specials</a></li>
    <li><a href="JavaScript:void(0);">Who is Snap Nature</a></li>
    </ul>
  </div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>

CSS：

@charset "utf-8";
* {
    background-color: #6FF;
    margin: 0px;
    padding: 0px;
}
#wrapper {
    background-color: #F90;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#header {
    background-color: #6F0;
    height: 124px;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#navigation {
    background-color: #F3F;
    float: left;
    height: 25px;
    width: 960px;
}
#leftcolumn {
    background-color: #009;
    float: left;
    height: 350px;
    width: 250px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#content {
    background-color: #69F;
    width: 710px;
    float: left;
    height: 350px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#footer {
    background-color: #F00;
    clear: both;
    height: 25px;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#navigation ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 960px;
    height: 0px;
}
#navigation li {
    float: left;
    background-color: #F3F;
}
#navigation a {
    line-height: 25px;
    text-decoration: none;
    color: #000;
    background-color: #F3F;
    display: block;
    text-align: center;
    vertical-align: middle;
    width: auto;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 25px;
}

#navigation a:hover {
    color: #999;
    text-decoration: none;
}

#navcontainer ul {
    padding: 0px;
    margin-left: 0px;
    list-style-type: none;
    width: 200px;
    display: block;
    line-height: 34px;
    background-image: url(images/pg_menu_bg.png);
}

请帮助 TY 贾里德

4

1 回答 1

1

编辑：

是的，这正是问题所在。我刚刚检查了您发布的链接，浏览器正在寻找位于以下位置的图像：http ://www.156.onl.checit.info/CSS/images/pg_menu_bg.png - 它不存在。

看到那里的“CSS”了吗？我 99% 确定那是无意的。这是一个绝对/相对路径问题。继续阅读...

如果您的图像没有出现，我会凭直觉说这是因为您的图像路径搞砸了。

解决方案：

这：

/* ABSOLUTE PATH solution */
background-image: url(/images/pg_menu_bg.png);

甚至可能是这个（取决于您的文件结构）：

/* RELATIVE PATH solution. This is FROM YOUR CSS FILE.*/
background-image: url(../images/pg_menu_bg.png);

解释：

两者之间有很大区别：

background-image: url(images/pg_menu_bg.png);

和

background-image: url(/images/pg_menu_bg.png); /* note the leading slash */

前导斜杠表示绝对路径（即“来自您的根域 url 的路径”），而没有前导斜杠表示相对路径（即“相对于该文件的位置，在本例中为您的 CSS 文件”）。

这意味着，假设您有这样的文件结构：

root
|
----images
       | pg_menu_bg.png
|
----css
       | mycss.css

从您的 css 文件中，调用：

background-image: url(images/pg_menu_bg.png);

实际上导致：

http://yourdomain.com/css/images/pg_menu_bg.png /* note the "css" */

而调用：

background-image: url(/images/pg_menu_bg.png);

结果是：

http://yourdomain.com/images/pg_menu_bg.png

所以我认为你需要看看你的目录结构，然后从那里开始工作。我的猜测是你需要使用绝对路径。

但是，如果您想在上面的虚拟文件结构中使用相对路径，您可以使用：

background-image: url(../images/pg_menu_bg.png); /* ".." means "parent directory"

更多信息：
在 CSS 文件中使用相对 URL，它相对于什么位置？

第二个问题：

你有另一个问题，这种风格：

* {
    background-color: #6FF;
    margin: 0px;
    padding: 0px;
}

这种风格将蓝色背景应用于每个元素。因此，即使您通往该背景图像的路径正常，它们也会被具有蓝色背景的前景元素隐藏。

尝试更改*为body：

body {
    background-color: #6FF;
    margin: 0px;
    padding: 0px;
}

注意：如果你真的想要一个margin:0;andpadding:0;在每个元素上，保持上面的样式不变（但删除background-color），并定义一个新body样式并将 放在background-color那里。像这样：

* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: #6FF;
}
于 2013-04-17T05:25:14.720 回答