Joomla CSS类不起作用

Question

I am trying to build an in line menu. 我试图建立一个在线菜单。 I am using Joomla 1.6 with CSS. 我在CSS中使用Joomla 1.6。

I have the solution using  and that is shown in the first sample below. 我有使用的解决方案，这在下面的第一个示例中显示。 However, Joomla strips  out of the document prior to saving it even though I have all the cleanup option OFF. 但是，即使我将所有清除选项都设置为OFF，Joomla 在保存文档之前将从文档中删除。 So I tried a couple of work arounds. 所以我尝试了一些解决方法。 In the first I force the style un the this works in this sample (but strangely not on the joomla page). 在第一个示例中，我强迫样式un起作用（但奇怪的是在joomla页面上不起作用）。 The second example just sets the class and thsi seems to ignot the ul parameters. 第二个示例只是设置了类，并且此参数似乎忽略了ul参数。

In the samples below I put all the CSS into the template.css file and the HTML is in the document. 在下面的示例中，我将所有CSS放入template.css文件中，而HTML在文档中。 However I can reproduce the issue with the entire block of code. 但是，我可以在整个代码块中重现该问题。

<!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

How about a link to the page so we can see the problem? 如何链接到页面以便我们可以看到问题？ The code you posted works fine - http://jsfiddle.net/T76AC/ 您发布的代码可以正常工作-http: //jsfiddle.net/T76AC/

Joomla is stripping your span because you can't put block elements inside of an inline element. Joomla正在剥离您的跨度，因为您不能将块元素放入内联元素内。

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

EDIT 编辑

Now that we have a link to look at, your problem is with your CSS selector and the rest of your stylesheet. 现在我们有一个链接可供查看，您的问题出在CSS选择器和样式表的其余部分。 It appears that your stylesheet has some pretty generic styles that will be applied in unintended places. 您的样式表似乎具有一些非常通用的样式，这些样式将在意想不到的地方应用。 This happens when you apply a style to generic tags inside of a class you use commonly. 当您将样式应用于常用类的通用标记时，就会发生这种情况。

A few things to look at: 需要注意的几件事：

line 205 is adding magins to <ul class="dmenu"> 第205行向<ul class="dmenu">
line 210 is adding the background, padding and margin to <li style="float: left;"> 第210行将背景，填充和边距添加到<li style="float: left;">

You will need to edit a few things. 您将需要编辑一些内容。 Change line 186 to: 将第186行更改为：

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

Add this: 添加：

UL.dmenu {
    margin:0;
}

For both of the edits, you can adjust the margin and padding accordingly, I just set it to 0. This should fix your issues though. 对于这两种编辑，您都可以相应地调整边距和填充，我只是将其设置为0。这应该可以解决您的问题。

I would also recommend using Firefox with Firebug, or Firefox/Chrome with the Inspect Element context menu so you can see what styles are being applied to the various elements on your page when they don't act like you expect. 我还建议您将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