Нажатая кнопка

Тема в разделе "CSS, HTML, Web 2.0, верстка по web-стандартам", создана пользователем Goryhater, 26.03.2009.

  1. Offline

    Goryhater Недавно здесь

    Регистрация:
    25.03.2009
    Сообщения:
    45
    Симпатии:
    1
    Пол:
    Мужской
    Всем привет, как в CSS прописать состояние нажатой кнопки (то есть нажал на какую-нибудь кнопку меню перешел на нужную страницу, а кнопка осталась нажатой(с изменённым фоном), потом нажал на другую кнопку: прошлая вернулась в первоначальное положение, а новая "нажалась"). Пытаюсь сделать так:
    Код (CODE):
    1. ul#mainlevel-nav li a:visited{
    2.     color: #003399;
    3. background: #FFFFFF;
    4. font-weight:bold;
    5. }

    но это почему-то не работает, все кнопки сразу выделены белым цветом..
     
  2.  
  3. Offline

    _voland_ специалист

    Регистрация:
    12.04.2008
    Сообщения:
    2 173
    Симпатии:
    102
    Пол:
    Мужской
    Речь наверно об активной кнопке?
    visited - для посещенных ссылок, для активных джумла прописывает в class active
     
  4. Offline

    Goryhater Недавно здесь

    Регистрация:
    25.03.2009
    Сообщения:
    45
    Симпатии:
    1
    Пол:
    Мужской
    Пардон, вместо кода показало какие-то кракозяблики, на данный момент код выглядит так:
    ul#mainlevel-nav li a:visited {
    color: #003399;
    background: #FFFFFF;
    font-weight:bold;
    }
    но от этого почему то все кнопки выделены, как должно выглядеть вместе с class active ?
    ul#mainlevel-nav li a:active {
    color: #003399;
    background: #FFFFFF;
    font-weight:bold;
    }
    так не работает, помогите пожайлуста
     
  5. koreeckz
    Offline

    koreeckz специалист

    Регистрация:
    03.03.2009
    Сообщения:
    422
    Симпатии:
    30
    Пол:
    Мужской
    дай коды всех строчек где есть mainlevel
     
  6. slay
    Offline

    slay Недавно здесь

    Регистрация:
    26.03.2009
    Сообщения:
    37
    Симпатии:
    8
    Пол:
    Мужской
    Если класс, то селектор будет не a:active, а a.active (точка, а не двоеточие).

    А, нет, вру. active это тоже псевдо-класс, потому двоеточие корректно :)
     
  7. koreeckz
    Offline

    koreeckz специалист

    Регистрация:
    03.03.2009
    Сообщения:
    422
    Симпатии:
    30
    Пол:
    Мужской
    может надо исползовать что-то вроде ul#mainlevel-nav li#current a:link
     
  8. Offline

    _voland_ специалист

    Регистрация:
    12.04.2008
    Сообщения:
    2 173
    Симпатии:
    102
    Пол:
    Мужской
    Почему это псевдо класс?? Класс самый обычный с точкой :)
     
  9. Offline

    Goryhater Недавно здесь

    Регистрация:
    25.03.2009
    Сообщения:
    45
    Симпатии:
    1
    Пол:
    Мужской
    Вот пожайлуста:
    ul#mainlevel-nav
    {
    padding: 0;
    margin: 0;
    font-size: 0.8em;
    }

    ul#mainlevel-nav li
    {
    background-image: none;
    list-style:none;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 2px;
    float:left;
    display: table;
    text-align: center;
    width: 8.57%;
    font-size: 12px;
    color:#fff;
    line-height: 25px;
    vertical-align: middle;
    border: 0px solid #fff;
    border-bottom: hidden;
    border-top: hidden;
    }

    ul#mainlevel-nav li a
    {
    padding-left: 18px;
    padding-right: 7px;
    text-decoration: none;
    color: #FFFFFF;
    line-height: 26px;
    background: transparent;
    font-size:12px;
    font-weight:bold;
    }
    ul#mainlevel-nav li a {

    padding: 9px 17px 9px 17px;
    margin: 10px 1px 20px 1px;
    }
    #buttons>ul#mainlevel-nav li a {
    width: 50px;
    height: 50px;
    }

    ul#mainlevel-nav li a:hover{
    color: #003399;
    background: #FFFFFF;
    font-weight:bold;
    }
    a.mainlevel:link, a.mainlevel:visited {
    display: block;
    background: #FFFFFF no-repeat;
    vertical-align: middle;
    font-size: 13px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #000;
    text-align: left;
    padding-top: 5px;
    padding-left: 18px;
    height: 20px !important;
    height: 25px;
    width: 100%;
    text-decoration: none;
    }

    a.mainlevel:hover {
    background-position: 0px -25px;
    text-decoration: underline;

    }


    a.mainlevel#active_menu:hover {
    color: #000;
    text-decoration: underline;
    }
     
  10. slay
    Offline

    slay Недавно здесь

    Регистрация:
    26.03.2009
    Сообщения:
    37
    Симпатии:
    8
    Пол:
    Мужской
    Ну, в принципе одно другому не мешает.
    Просто сейчас глянул на свой рабочий сайт и увидел, что именно класс active нигде не добавляется. Либо a#active_menu, либо a#active_menu-nav, потому и решил, что active использовался в стандартном смысле. Когда на ссылку нажать, но не отпустить кнопку мыши, тогда реагирует именно псевдо-класс :active
     
  11. Offline

    Goryhater Недавно здесь

    Регистрация:
    25.03.2009
    Сообщения:
    45
    Симпатии:
    1
    Пол:
    Мужской
    на такую функцию тоже не реагирует:
    ul#mainlevel-nav li a.active {
    color: #003399;
    background: #FFFFFF;
    font-weight:bold;
    }

    может я что-то не так делаю?
     
  12. Offline

    _voland_ специалист

    Регистрация:
    12.04.2008
    Сообщения:
    2 173
    Симпатии:
    102
    Пол:
    Мужской
    Так если речь о нажатой но не отжатой то нужно использовать псевдоселектор :active а вот если об активном пункте меню - то класс active.
    Только что посмотрел на своем сайте под 1,5,9 -
    Код (PHP):
    1. li id="current" class="active item1"

    P.S. О какой версии вообще речь???
     
    Goryhater нравится это.
  13. slay
    Offline

    slay Недавно здесь

    Регистрация:
    26.03.2009
    Сообщения:
    37
    Симпатии:
    8
    Пол:
    Мужской
    Выбери какой-нибудь пункт меню, а потом загляни в исходный код страницы. Выбранный пункт вероятно будет отмечен либо классом, либо идентификатором, так или иначе содержащим слово active. Если, как у меня, id="active_menu-nav", то корректным селектором будет
    Код (CODE):
    1. ul#mainlevel-nav li a#active_menu-nav {
     
  14. slay
    Offline

    slay Недавно здесь

    Регистрация:
    26.03.2009
    Сообщения:
    37
    Симпатии:
    8
    Пол:
    Мужской
    У меня тоже 1.5.9. Вот как выглядит мой выбранный пункт меню:
    Код (html):
    1. <li><a href="/pricelist/" class="mainlevel-nav" id="active_menu-nav">Прайс-лист</a></li>
     
  15. Offline

    Goryhater Недавно здесь

    Регистрация:
    25.03.2009
    Сообщения:
    45
    Симпатии:
    1
    Пол:
    Мужской
    так тоже не получается :'(
     
  16. Offline

    _voland_ специалист

    Регистрация:
    12.04.2008
    Сообщения:
    2 173
    Симпатии:
    102
    Пол:
    Мужской
    Стиль? У меня список..
    TC, выложи строчку кода отвечающую за вывод элемента меню
     
  17. koreeckz
    Offline

    koreeckz специалист

    Регистрация:
    03.03.2009
    Сообщения:
    422
    Симпатии:
    30
    Пол:
    Мужской
    _voland_, +1 только хотел это написать )
     
  18. slay
    Offline

    slay Недавно здесь

    Регистрация:
    26.03.2009
    Сообщения:
    37
    Симпатии:
    8
    Пол:
    Мужской
    "(Legacy) Плоский список". Только у меня-то проблем как раз нет, предлагаю с проблемой автора разобраться :)
     
  19. Offline

    Goryhater Недавно здесь

    Регистрация:
    25.03.2009
    Сообщения:
    45
    Симпатии:
    1
    Пол:
    Мужской
    Забыл сразу сказать у джумла 1.0.1.5
    Вылаживаю:
    ul#mainlevel-nav li
    {
    background-image: none;
    list-style:none;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 2px;
    float:left;
    display: table;
    text-align: center;
    width: 8.57%;
    font-size: 12px;
    color:#fff;
    line-height: 25px;
    vertical-align: middle;
    border: 0px solid #fff;
    border-bottom: hidden;
    border-top: hidden;
    }
    вроде это, или не то выложил (в ксс я полный лопух).
     
  20. Offline

    _voland_ специалист

    Регистрация:
    12.04.2008
    Сообщения:
    2 173
    Симпатии:
    102
    Пол:
    Мужской
    Оффтопик (не в тему) - жми сюда!

    А выложил не то, надо исходный код (часть) страницы

    P.S. 2 slay - сменил на Плоский список, действительно, код такой же стал, так что от вида меню зависит
     
  21. koreeckz
    Offline

    koreeckz специалист

    Регистрация:
    03.03.2009
    Сообщения:
    422
    Симпатии:
    30
    Пол:
    Мужской
    Goryhater, открой исходный код стрницы и найди по ключевому слову каким классом и айди выделяется пункт который выделен сейчас, скажем ты сейчас на странице "Главная", правой клавишей в браузере, показать исходный код, через поиск ищешь строчку где отображается Главная и копируешь весь тег выделения сюда, так мы быстрее найдем решение проблемы.
     

Поделиться этой страницей

Загрузка...