Joomla CSS类不起作用

如何解决Joomla CSS类不起作用

| 我试图建立一个在线菜单。我在CSS中使用Joomla 1.6。我有使用<span class=\"dmenu\">的解决方案，这在下面的第一个示例中显示。但是，即使我将所有清除选项都设置为OFF，Joomla也会在保存文档之前从文档中剥离“ 0”。所以我尝试了一些解决方法。在第一个示例中，我强迫样式un起作用（但奇怪的是在joomla页面上不起作用）。第二个示例只是设置了类，并且这似乎忽略了ul参数。在下面的示例中，我将所有CSS放入template.css文件中，而HTML在文档中。但是，我可以在整个代码块中重现该问题。

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html>
<head>
<style type=\"text/css\">

/**     Navigation menu in documents        **/
.dmenu a {
display: block;
font-size: 100%;
font-weight:normal;
background-color: #eaeaea;
padding: 4px;
letter-spacing:0px;
width:100px;

margin-bottom:10px;
text-align:center;
line-height:20px;
text-shadow: 2px 2px 4px #aaa;
color:red;
text-decoration: none;
}
.dmenu ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.dmenu li {
float:left;
}
.dmenu a:hover {
color:Darkred;
background-color: darkgrey;
}
</style>
</head>

<body>
<p>this works well</p>

<span class=\"dmenu\">
<ul>
  <li><a href=\"#Location\">Location</a></li>
    <li><a href=\"#Description\">Description</a></li>
</ul>
</span>

<p>This is forces the style and works here but not on the site where I link to CSS file</p>
<ul class=\"dmenu\" style=\"list-style-type:none;margin:0;
padding:0;overflow:hidden\">
    <li><a href=\"#Location\">Location</a></li>
    <li><a href=\"#Description\">Description</a></li>
</ul>
<p>line underneath</p>

<p>This is not looking at the list-style-type:none</p>
<ul class=\"dmenu\">
    <li><a href=\"#Location\">Location</a></li>
    <li><a href=\"#Description\">Description</a></li>
</ul>
<p>line underneath</p>

</body>
</html>

解决方法

如何链接到页面，以便我们可以看到问题？您发布的代码可以正常工作-http://jsfiddle.net/T76AC/ Joomla正在剥离您的跨度，因为您无法将块元素放入内联元素内。 http://www.w3.org/TR/REC-html40/struct/global.html#block-inline 编辑现在我们有一个链接可供查看，您的问题出在CSS选择器和其余样式表上。您的样式表似乎具有一些非常通用的样式，这些样式将在意想不到的地方应用。当您将样式应用于常用类的通用标签时，就会发生这种情况。需要注意的几件事：第205行将magins添加到<ul class=\"dmenu\"> 第210行将背景，填充和边距添加到<li style=\"float: left;\"> 您将需要编辑一些内容。将第186行更改为：

.dmenu li {
    float: left;
    background:none;
    padding: 0;
    margin: 0;
}

添加此：

UL.dmenu {
    margin:0;
}

对于这两个编辑，您都可以相应地调整边距和填充，我只是将其设置为0。这应该可以解决您的问题。我还建议您将Firefox与Firebug一起使用，或者将Firefox / Chrome与Inspect Element上下文菜单一起使用，这样您就可以查看页面上各种元素的样式是否不符合您的期望时正在应用哪些样式。