Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/12: Рейтинг темы: голосов - 12, средняя оценка - 5.00
84 / 84 / 1
Регистрация: 19.01.2011
Сообщений: 440
1

Стилизация меню

08.01.2012, 22:25. Показов 2299. Ответов 3
Метки нет (Все метки)

Доброго времени суток!

Столкнулся с проблемой стилизации меню.
Задумано так, что меню должно выглядеть не просто ссылками и картинками кнопочек. Т.е. при наведении курсора - загорается кнопочка, при отводе - гаснет, а при входе в раздел - остаётся гореть, указывая пользователю, в каком разделе он находится.
Проблема в следующем: ссылку создал и начинаю стилизовать в CSS при помощи a.news:link, a.news:hover, a.news:active. Но, вставленная картинка не воспринимается, и ссылка остаётся простой ссылкой. В чём может быть проблема?

Вот как я делал:

HTML:
HTML5
1
<a class="news" href="#">Новости</a>
CSS:
CSS
1
2
3
4
5
6
a.news:link {
    background-image:картинка;}
a.news:hover {
    background-image:картинка;}
a.news:active {
    background-image:картинка;}
Добавлено через 6 минут
Так, сам нашёл косяк у себя.
a.news:active не поможет, чтоб кнопка горела когда пользователь находится в данном разделе.

Тогда вопрос: А как сделать чтоб горела?
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
08.01.2012, 22:25
Ответы с готовыми решениями:

Стилизация многоуровневого меню
Помогите с многоуровневым меню вроде иерархию правильно сделала а со стилями проблема &lt;!DOCTYPE...

Вертикольное выпадающее меню и его стилизация
Здравствуйте! Сегодня первый раз в жизни взялся за выпадающие меню на CSS. Кое-как разобрался,...

Стилизация hr
Здрасте! Вот написал я такой код &lt;div id=&quot;header&quot;&gt; &lt;div class=&quot;text&quot;&gt;Привет!!!&lt;/div&gt; ...

Стилизация кнопок
Привет всем, как можно сделать стилизацию кнопок, просто сменяя одну картинку на другую, но что бы...

3
36 / 36 / 3
Регистрация: 26.09.2009
Сообщений: 298
08.01.2012, 23:33 2
Добавляешь ещё один класс, в котором описываешь стили для этой светящейся кнопки и добавляешь его к элементу на странице, к остальным применяешь свой класс news, на следующей странице аналогично, но уже со следующей ссылкой, примерно так.

HTML5
1
2
3
<a class="active" href="#">Новости</a>
<a class="news" href="#">бла бла</a>
<a class="news" href="#">бла бла</a>
CSS
1
2
3
4
5
6
a.news:link {
        background-image:картинка;}
a.news:hover {
        background-image:картинка;}
a.active:link {
 background-image:картинка которая светится;}
для следующей
HTML5
1
2
3
<a class="news" href="#">Новости</a>
<a class="active" href="#">бла бла</a>
<a class="news" href="#">бла бла</a>
CSS
1
2
3
4
5
6
a.news:link {
        background-image:картинка;}
a.news:hover {
        background-image:картинка;}
a.active:link {
 background-image:картинка которая светится;}
и тд
1
84 / 84 / 1
Регистрация: 19.01.2011
Сообщений: 440
09.01.2012, 01:07  [ТС] 3
Спасибо! Буду пробовать

Добавлено через 1 час 11 минут
Ещё раз проанализировал предложенный вариант.
Мне кажется, что он подходит только для статических HTML сайтов, а у меня динамический сайт.
Шаблонная страница одна, а на неё накладывается всё остальное средствами PHP.
Не могу понять, как данный вариант прицепить к подобному сайту.
0
36 / 36 / 3
Регистрация: 26.09.2009
Сообщений: 298
09.01.2012, 12:12 4
с php я увы не дружу.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
09.01.2012, 12:12

Стилизация таблицы
Здравствуйте. Пытаюсь стилизовать таблицу: &lt;table&gt; &lt;tr&gt; &lt;th&gt;№&lt;/th&gt; &lt;th&gt;Название&lt;/th&gt;...

Стилизация скролбара
Ребята, посоветуйте хороший (проверенный) и легковесный плагин, для стилизации скрола, как...

стилизация формы
есть такой код в форме отправки &lt;div class=&quot;form-group&gt; &lt;input class=&quot;form-control&quot;...

Стилизация select
всем привет, подскажите пожалуйста, как сделать такой select , как на картинке &lt;select...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.