LiveInternetMail.ru
Форум русской поддержки Joomla!® CMS
27.05.2012, 23:00:25 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 1.7 FAQ Joomla 1.5 FAQ Joomla 1.0 FAQ Правила форума Новости Joomla Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор Тема: css - где искать.... -)  (Прочитано 2191 раз)
0 Пользователей и 1 Гость смотрят эту тему.
kayross
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 9


« : 04.04.2009, 11:09:19 »

Добрый день. Делаю свой первый сайт и есть проблемка у меня в
css, а именно есть горизонтальное меню с родительскими элементами (приложил скрины) и мне нужно
чтобы активные пункты были другого цвета. Например, активный пунт и родительский элемент (подпункт) одного цвета - зеленого,
а другие родительские пункты - серого. Посдскажите пожалуйста, где и как?

Код:
#mainMenu {
float: left;
  width:700px;
  height: 28px;
  margin-top: 0;
  margin-right: 0;
  margin-left: 1px;
}


.menu {
        padding:0;
        color: #666;
        height: 28px;
        margin: 0;
        font-size: 10px;
        text-transform: uppercase;
}

.menu ul{
        list-style: none;
        margin: 0;
        padding: 0;
        margin-left: -11px;       
}

.menu li{
        list-style: none;
        float: left;
        color: #666;
        font-weight: normal;
font-size: 11px;
padding-right: 15px;
line-height: 26px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
}

.menu li ul {
        position: absolute;
        width: 170px;
        left: -999em;
        background-color: #fff;
        line-height: 26px;
        z-index: 500;
        margin-left: -10px;
        border: solid 1px #ccc;
        margin-top: -1px
style=
"filter:alpha(opacity=80); /* IE 5.5+*/
-moz-opacity: 0.8; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.8; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.8; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */ "
}

.menu li:hover ul {
        left: auto;
}

.menu li ul li {
        width: 180px;
        padding: 0;
}

.menu a {
        display: block;
        padding: 0;
        font-weight: normal;
        text-decoration: none;
        color: #666;
}

.menu a:hover {
color: #b0cf36;
font-weight: bold;
text-decoration: none;
}

html>body .menu li a {
        width: auto;
}

.menu li ul li a {
      padding-left: 20px;

     
color: #666;
}

.menu li.active,
.menu li:hover,#active_menu:link,a#active_menu:visited{
        text-decoration: none; font-weight: bold;
        color: #b0cf36;
}

.menu li ul li:hover {

}

.menu li:hover ul, .menu li.sfhover ul {
        left: auto;
}

.menu li.active a,
.menu ul li.active a {
        text-decoration: none;
        color: #b0cf36; font-weight: normal;

}

.menu li.active a,
.menu li:hover a {
font-weight: bold;
}

.menu li ul ul {
  margin: -27px 0 0 120px;
}

.menu li:hover ul ul, .menu  li.sfhover ul ul {
  left: -999em;
}
 
.menu  li:hover ul, .menu li li:hover ul, .menu li.sfhover ul, .menu  li li.sfhover ul {
  left: auto;
}

.menu li:hover ul ul, .menu li:hover ul ul ul, .menu li.sfhover ul ul, .menu li.sfhover ul ul ul {
left: -999em;
}

.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li.sfhover ul, .menu li li.sfhover ul, .menu li li li.sfhover ul {
left: auto;
}

.menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul, .menu li.sfhover ul ul, .menu li.sfhover ul ul ul, .menu li.sfhover ul ul ul ul {
left: -999em;
}

.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul, .menu li.sfhover ul, .menu li li.sfhover ul, .menu li li li.sfhover ul, .menu li li li li.sfhover ul {
left: auto;
}


* 1p.JPG (35.38 Кб, 259x135 - просмотрено 113 раз.)

* 2p.JPG (37.16 Кб, 260x133 - просмотрено 97 раз.)
« Последнее редактирование: 04.04.2009, 11:14:23 от kayross » Записан
kayross
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 9


« Ответ #1 : 04.04.2009, 17:37:07 »

подскажите пожалуйста
Записан
kayross
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 9


« Ответ #2 : 05.04.2009, 10:40:24 »

 Sad господа, подскажите пожалуйста.....
Записан
chtec
Support Team
*****

Репутация: +100/-1
Offline Offline

Пол: Женский
Сообщений: 353



« Ответ #3 : 05.04.2009, 23:56:16 »

Вот, с одной стороны - почему бы и не подсказать, а с другой - человек третий раз спрашивает и не понимает, что можно было бы еще информации подкинуть - шаблоны-то разные бывают... Или жадничает .css свой показать... А значит - ты ему совет - а он тебе новый вопрос, и так вот по маленьким кусочкам... лень что-то...

Так что - вот тебе принципы:

1) пункт меню - это пункт списка. Значит, в css указывается как ul li. Подпункт = список второго уровня, значит - ul li ul li.
Второй уровень в слое с id="mainMenu" будет описываться так:
#mainMenu ul li ul li {здесь описание}

2) Для описания активного пункта меню после li добавляешь ".active". То есть получается: li.active

3) Всякое там "при наведении мышки", "посещенные ссылки" и т.п. определяются через задание стиля для гиперссылок внутри этих пунктов списка:

#mainMenu ul li ul li a:hover {так выглядит подпункт меню второго уровня при наведении мышки}

4) Вот эта фигня после двоеточия называется "псевдокласс" - ie до 6 версии понимает псевдоклассы только для гиперссылок, так что сильно не разгуляешься, но для меню хватит. Псевдоклассы бывают такие: link, visited, hover, http://htmlbook.ru/css/active.html
Вот в таком порядке их и нужно задавать.

Короче, разбирайся

В качестве бонуса - вот пример из первого попавшегося шаблона:

#right1  ul li a:link, #right1  ul li a:visited
{
   color: #172987;
   text-align: left;
}
#right1  ul li.active a:link, #right1  ul li.active a:visited, #right1  ul li a:hover, #right1  ul li.active a:active, #right1  a:hover
{
   color: #9a009a;   
   text-align: left;   
}

#right1  ul li ul li a:link, #right1  ul li ul li a:visited
{
   color: #172987 !important;
   text-align: left;
}

#right1  ul li ul li.active a:link, #right1  ul li ul li.active a:visited, #right1  ul li ul li a:hover, #right1  ul li ul li.active a:active, #right1  a:hover
{
   color: #9a009a !important;   
   text-align: left;   
}
Записан
kayross
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 9


« Ответ #4 : 06.04.2009, 13:30:50 »

Уважаемая, chtec! -)))
Спасибо вам большое, замечательно, буду разбираться
насколько хватит моего лингвистического ума! респектище вам!

ps. сорри, только непонятно мне немного, вот у меня в первом посте прикрекплен 2p.jpg
при нажатии на пункт "о компании" он выделяется зеленым и подпункты в меню тоже
зеленые. Можно ли сделать так, чтобы они были черные при активном пункте  "о компании"?
css - это мой css в приложении.
спасибо.

« Последнее редактирование: 06.04.2009, 16:35:20 от kayross » Записан
gdX
Живу я здесь
******

Репутация: +125/-0
Offline Offline

Пол: Мужской
Сообщений: 1465

Дизайн спасет Мир!


« Ответ #5 : 06.04.2009, 17:04:26 »

У Вас есть такой блок в css:
Код
.menu li.active a,
.menu ul li.active a {
      text-decoration: none;
      color: #b0cf36; font-weight: normal;
 
}
Исправьте #b0cf36 на black
Записан
kayross
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 9


« Ответ #6 : 07.04.2009, 17:32:02 »

У Вас есть такой блок в css:
Код
.menu li.active a,
.menu ul li.active a {
      text-decoration: none;
      color: #b0cf36; font-weight: normal;
 
}
Исправьте #b0cf36 на black

спасибо за ответ! но не помогло это мне, к сожалению....
проблема в следующем, например есть основной пункт меню /о компании/ а в нем еще 3 подпункта,
я нажимаю на /о компании/ и все подпункты тоже становятся такого же цвета, как и активный пункт /о компании/...

я бы хотел сделать так, чтобы при активном /о компании/, подпункты меню, оставались не изменными.... а при нажатии на подпункт
он только один активный в данный момент менял цвет. сорри если коряво объяснил. Спасибо! -)

« Последнее редактирование: 07.04.2009, 17:35:31 от kayross » Записан
gdX
Живу я здесь
******

Репутация: +125/-0
Offline Offline

Пол: Мужской
Сообщений: 1465

Дизайн спасет Мир!


« Ответ #7 : 07.04.2009, 18:12:51 »

Попробуйте тогда разбить этот блок так:
Код
.menu a {
      text-decoration: none;
      font-weight: normal;
}
.menu li a{color:#b0cf36;}
.menu li.active a{color:black;}

Может Даже последнюю строку заменить на:
Код
.menu a#active{color:black;}

Хорошо бы по коду посмотреть.
Записан
kayross
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 9


« Ответ #8 : 07.04.2009, 18:23:08 »

вот код
Код:
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>

<jdoc:include type="head" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/mainmenu.css" type="text/css" />

<style type="text/css" media="all">
<?php if ($this->params->get('authorName')=='no') { ?> .author {display:none} <?php } ?>
<?php if ($this->params->get('dateCreated')=='no') { ?> .createdate {display:none} <?php } ?>
<?php if ($this->params->get('dateModified')=='no') { ?> .modifydate {display:none} <?php } ?>
<?php if ($this->params->get('Buttons')=='no') { ?> .buttons {display:none} <?php } ?>

</style>

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/mainmenu.js"></script>

<script type="text/javascript">
function showlayer(layer){
var myLayer=document.getElementById(layer);
if(myLayer.style.display=="none" || myLayer.style.display==""){
myLayer.style.display="block";
} else {
myLayer.style.display="none";
}
}
</script>

</head>

<body>

<div class="container">
<div id="main">

        <div id="logo">
              <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/images/logo.jpg" border="0" alt="logo"></a></div>         
     
          <div id="searchBox"> <jdoc:include type="modules" name="pa_search"  style="xhtml" /> </div>
                     
          <div id="menurow">
          <div id="mainMenu"><jdoc:include type="modules" name="pa_mainmenu"  style="xhtml" /> </div>
         
          <?php if($this->countModules('pa_login')) { ?>
          <div id="login"><a href="#" onclick="showlayer('loginpanel')">Login | Register</a>
    <div id="loginpanel" style="display:none;"> <jdoc:include type="modules" name="pa_login"  style="xhtml" /> </div>
    </div>
    <?php }  ?>
    </div>
   
         
        <?php if($this->countModules('pa_header')) { ?>
        <div id="header"> <jdoc:include type="modules" name="pa_header"  style="xhtml" /> </div>
<?php }  ?>

<?php if($this->countModules('pa_right')) { ?>
<div id="content"> <jdoc:include type="message" /> <jdoc:include type="component" style="xhtml"/> </div>
<div id="right"> <jdoc:include type="modules" name="pa_right"  style="xhtml" /> </div>
<?php } else { ?>
<div id="content2"> <jdoc:include type="message" /> <jdoc:include type="component" style="xhtml"/> </div>
<?php }  ?>

<div id="footer"> <jdoc:include type="modules" name="pa_footer"  style="xhtml" /> </div>
</div>
</div>

</body>
Записан
gdX
Живу я здесь
******

Репутация: +125/-0
Offline Offline

Пол: Мужской
Сообщений: 1465

Дизайн спасет Мир!


« Ответ #9 : 07.04.2009, 18:28:02 »

Да код нужен не index.php, а код страницы.
А лучше ссылку.
Записан
kayross
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 9


« Ответ #10 : 07.04.2009, 18:32:35 »

ссылка
Записан
gdX
Живу я здесь
******

Репутация: +125/-0
Offline Offline

Пол: Мужской
Сообщений: 1465

Дизайн спасет Мир!


« Ответ #11 : 08.04.2009, 12:43:32 »

Попробуйте такой код (возможно надо будет раскомментировать последнюю строку):
Код
.menu a {
   text-decoration: none;
   font-weight: normal;
   color:#b0cf36;
}
.menu li.active a{color:black;}
/*.menu li li a{color:#b0cf36;}*/
 
Записан
kayross
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 9


« Ответ #12 : 09.04.2009, 09:49:39 »

спасибо за помощь.... но к сожалению не помогает
Записан
kayross
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 9


« Ответ #13 : 10.04.2009, 10:36:15 »

to gdx ->
у меня к сожалению нет доступа к ftp
могу послать css - файл, потом я его переправлю человеку и он обновит -)
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Рейтинг@Mail.ru Rambler Top100 Powered by SMF 1.1.16 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet