Joomla CSS类不起作用

Question

我试图建立一个在线菜单。 我在CSS中使用Joomla 1.6。

我有使用<span class="dmenu">的解决方案，这在下面的第一个示例中显示。 但是，即使我将所有清除选项都设置为OFF，Joomla <span class="dmenu">在保存文档之前将<span class="dmenu">从文档中删除。 所以我尝试了一些解决方法。 在第一个示例中，我强迫样式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>

Answer 1

如何链接到页面以便我们可以看到问题？ 您发布的代码可以正常工作-http: //jsfiddle.net/T76AC/

Joomla正在剥离您的跨度，因为您不能将块元素放入内联元素内。

http://www.w3.org/TR/REC-html40/struct/global.html#block-inline

编辑

现在我们有一个链接可供查看，您的问题出在CSS选择器和样式表的其余部分。 您的样式表似乎具有一些非常通用的样式，这些样式将在意想不到的地方应用。 当您将样式应用于常用类的通用标记时，就会发生这种情况。

需要注意的几件事：

第205行向<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上下文菜单一起使用，这样您就可以看到页面上各种元素的样式不符合您的期望时将应用哪些样式。

Joomla CSS类不起作用

问题描述

1 个解决方案

解决方案1
1 2011-06-19 00:49:10

Joomla CSS类不起作用

问题描述

1 个解决方案

解决方案1 1 2011-06-19 00:49:10

解决方案1
1 2011-06-19 00:49:10