0 Пользователей и 1 Гость просматривают эту тему.
  • 13 Ответов
  • 3882 Просмотров
*

kayross

  • Новичок
  • 9
  • 0 / 0
css - где искать.... -)
« : 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;
}

[вложение удалено Администратором]
« Последнее редактирование: 04.04.2009, 11:14:23 от kayross »
*

kayross

  • Новичок
  • 9
  • 0 / 0
Re: css - где искать.... -)
« Ответ #1 : 04.04.2009, 17:37:07 »
подскажите пожалуйста
*

kayross

  • Новичок
  • 9
  • 0 / 0
Re: css - где искать.... -)
« Ответ #2 : 05.04.2009, 10:40:24 »
 :( господа, подскажите пожалуйста.....
*

chtec

  • Захожу иногда
  • 230
  • 100 / 1
Re: css - где искать.... -)
« Ответ #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

  • Новичок
  • 9
  • 0 / 0
Re: css - где искать.... -)
« Ответ #4 : 06.04.2009, 13:30:50 »
Уважаемая, chtec! -)))
Спасибо вам большое, замечательно, буду разбираться
насколько хватит моего лингвистического ума! респектище вам!

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

« Последнее редактирование: 06.04.2009, 16:35:20 от kayross »
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: css - где искать.... -)
« Ответ #5 : 06.04.2009, 17:04:26 »
У Вас есть такой блок в css:
Код: css
.menu li.active a,
.menu ul li.active a {
        text-decoration: none;
        color: #b0cf36; font-weight: normal;

}
Исправьте #b0cf36 на black
*

kayross

  • Новичок
  • 9
  • 0 / 0
Re: css - где искать.... -)
« Ответ #6 : 07.04.2009, 17:32:02 »
У Вас есть такой блок в css:
Код: 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

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: css - где искать.... -)
« Ответ #7 : 07.04.2009, 18:12:51 »
Попробуйте тогда разбить этот блок так:
Код: css
.menu a {
        text-decoration: none;
        font-weight: normal;
}
.menu li a{color:#b0cf36;}
.menu li.active a{color:black;}

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

Хорошо бы по коду посмотреть.
*

kayross

  • Новичок
  • 9
  • 0 / 0
Re: css - где искать.... -)
« Ответ #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

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: css - где искать.... -)
« Ответ #9 : 07.04.2009, 18:28:02 »
Да код нужен не index.php, а код страницы.
А лучше ссылку.
*

kayross

  • Новичок
  • 9
  • 0 / 0
Re: css - где искать.... -)
« Ответ #10 : 07.04.2009, 18:32:35 »
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: css - где искать.... -)
« Ответ #11 : 08.04.2009, 12:43:32 »
Попробуйте такой код (возможно надо будет раскомментировать последнюю строку):
Код: css
.menu a {
    text-decoration: none;
    font-weight: normal;
    color:#b0cf36;
}
.menu li.active a{color:black;}
/*.menu li li a{color:#b0cf36;}*/
*

kayross

  • Новичок
  • 9
  • 0 / 0
Re: css - где искать.... -)
« Ответ #12 : 09.04.2009, 09:49:39 »
спасибо за помощь.... но к сожалению не помогает
*

kayross

  • Новичок
  • 9
  • 0 / 0
Re: css - где искать.... -)
« Ответ #13 : 10.04.2009, 10:36:15 »
to gdx ->
у меня к сожалению нет доступа к ftp
могу послать css - файл, потом я его переправлю человеку и он обновит -)
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться