Joomla CSS класс не работает - PullRequest
Новая
       0

Joomla CSS класс не работает

0 голосов
/ 18 июня 2011

Я пытаюсь создать линейное меню. Я использую Joomla 1.6 с CSS.

У меня есть решение с использованием <span class="dmenu">, и это показано в первом примере ниже. Однако Joomla удаляет <span class="dmenu"> из документа перед его сохранением, даже если у меня отключена вся опция очистки. Таким образом, я попробовал пару способов работы. В первом я заставляю стиль и это работает в этом примере (но, как ни странно, не на странице 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>

1 Ответ

1 голос
/ 19 июня 2011

Как насчет ссылки на страницу, чтобы мы могли увидеть проблему?Размещенный вами код работает нормально - 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, чтобы вы могли видеть, какие стили применяются к различным элементам на вашей странице, когда они не отображаются.действовать так, как вы ожидаете.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...