Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Активная кнопка, Как сделать активной кнопку в CSS 
:(
    Опции темы
lsm
Дата 12.7.2010, 11:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 4
Регистрация: 14.10.2009

Репутация: нет
Всего: нет



Господа, подскажите пожалуйста, как в CSS сделать так, чтобы кнопка оставалась активной при просмотре одноименного раздела, на который она ведет, и переставала быть активной при переходе в любой другой раздел?
Например, мы находимся в разделе "Услуги", то кнопка "Услуги" выделяется (подсвечивается), если переходим в раздел "О компании" - выделяется кнопка "О компании"!!! 
Я хочу сделать так, чтобы она залипала до тех пор, пока мы будем в данном разделе! :hover работает, но как сделать, чтобы она залипала в том же положении, что и :hover до тех пор, пока мы находимся в разделе!
Вот код:

a#lm1 {
display:block;
width: 176px;
height: 36px;
background-image: url(images/lm.gif);
background-position: 0px 0px;
margin: 0 auto;
}

a#lm1:hover {
background-position: 176px 0px;
}

Что нужно в него добавить? Помогите, пожалуйста!

Добавлено через 55 секунд
На одном сайте, где это работает, код выглядит так, но я не думаю, что нижнее подчеркивание после a#mm1 "_"имеет решающую роль и заставляет кнопку оставаться активной...

a#mm1 {
display:block;
width: 105px;
height: 38px;
background-image: url(images/mm.gif);
background-position: 0 0;
margin: 0 auto;
}

a#mm1_ {
display:block;
width: 105px;
height: 38px;
background-image: url(images/mm.gif);
background-position: 0 -38px;
margin: 0 auto;
}

a#mm1:hover {
background-position: 0 -38px;
} 
PM MAIL   Вверх
Mavrun
Дата 12.7.2010, 11:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 199
Регистрация: 25.11.2007

Репутация: 9
Всего: 13



по идее a:active должна выполнять такую роль. но вроде как она баганая и не работает как следует везде. поэтому можно либо скрипт на js, либо на php написать, чтобы он дописывал определённый класс той ссылке, по адресу которой мы находимся. ну а класс этот будет там подчёркивание или изменение цвета содержать
PM MAIL   Вверх
lsm
Дата 12.7.2010, 11:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 4
Регистрация: 14.10.2009

Репутация: нет
Всего: нет



Спасибо, Mavrun! a:active, к сожалению не работает...
Не подскажешь, как на php дописать?
Сайт сделан полностью на php плюс стили в CSS... Если бы в html - то можно было бы задать стиль кнопки для каждого раздела свой, а так -  smile 
PM MAIL   Вверх
ksnk
Дата 12.7.2010, 12:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



lsm, каким образом мы переходим из раздела в раздел? Кликать по кнопке и перерисовывать весь текст? Тогда сервер, который строит текст и должен выжделять нужную кнопку. Стилем, например специальным.


Это сообщение отредактировал(а) ksnk - 12.7.2010, 12:51


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Mavrun
Дата 12.7.2010, 13:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 199
Регистрация: 25.11.2007

Репутация: 9
Всего: 13



Тебе нужно будет:
1) создать стиль для ссылок, чтобы показать как они должны выглядеть если мы находимся по ней
2) каждой ссылке прописать на пхп условие типа if (урл_такой-то) echo class="название класса активной ссылки"
3) чтобы определить какой урл, нужно вытащить из глобального массива $_SERVER адрес, по которому мы находимся, и его сравнивать. об этом массиве можно почитать по ссылке http://shublog.ru/php/superglobalnyjj-mass...tp_server_vars/
PM MAIL   Вверх
lsm
Дата 12.7.2010, 13:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 4
Регистрация: 14.10.2009

Репутация: нет
Всего: нет



Спасибо Mavrun за комментарии - очень помог!!!!
 
PM MAIL   Вверх
skyboy
Дата 13.7.2010, 10:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


неОпытный
****


Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 6
Всего: 260



Цитата(Mavrun @  12.7.2010,  10:28 Найти цитируемый пост)
по идее a:active должна выполнять такую роль

псевдокласс :active назначается, если навести курсор и кликнуть по элементу.
пока клавиша мыши нажата - у элемента будет псевдокласс :active

PM MAIL   Вверх
Mavrun
Дата 13.7.2010, 11:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 199
Регистрация: 25.11.2007

Репутация: 9
Всего: 13



2skyboy, спасибо. мне почему-то всю жизнь казалось, что эктив должен выполнять был роль именно того, что в ней находимся. может в прошлом не так научили...
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0459 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.