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