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

hottab_1

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
Здравствуйте!
Есть сайт http://www.dvernoyclub.ru/, в меню, где идут пункты "Каталог товаров", "Акции и подарки" и так далее. Есть пункт (самый последний) "Купить в кредит". Для этого пункта нужно сделать совсем другое оформление.
Пробовал прописать отдельный класс в CSS, вывел его модулем в позицию меню, подогнал на нужное место, но появилась проблема, при изменении размера экрана блок уезжает, то есть он не ведет себя так, как ведет меню.
Подскажите, пожалуйста, как привязать свой класс к пункту меню, чтобы он не уезжал, а вел себя один в один как пункт меню. Или может есть какое-то другое решение?  !
Решение через ::before не подходит, так как в блоке будет картинка, текст и ссылка.
*

AlekVolsk

  • Гуру
  • 6456
  • 369 / 4
у пункта меню выведен отдельный класс, item-139, привяжитесь к нему, напрмер:
Код: css
.item-139 > a {
    background-color: #88c500;
    color: #fff;
}
.item-139 > a:hover, .item-139 > a:focus {
    background-color: #f00;
    color: #fff !important;
}

фон картинкой привязывайте именно к ссылке, сместить текст ссылки можно внутренними отступами и высотой строки (требуется подгонка по месту на разных экранах)
*

Biss

  • Давно я тут
  • 879
  • 92 / 0
Сделал немного по другому, без привязки к id. Редактирование пункта меню - во вкладке - параметры ссылки - CSS-класс ссылки, прописал sale
потом в CSS

.sale {
    background: #cd2626;
}

пример сайт в профиле
*

hottab_1

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
у пункта меню выведен отдельный класс, item-139, привяжитесь к нему, напрмер:
Код: css
.item-139 > a {
    background-color: #88c500;
    color: #fff;
}
.item-139 > a:hover, .item-139 > a:focus {
    background-color: #f00;
    color: #fff !important;
}

фон картинкой привязывайте именно к ссылке, сместить текст ссылки можно внутренними отступами и высотой строки (требуется подгонка по месту на разных экранах)
Я понял вас, спасибо.
А чтобы применить определенный стиль к тексту, конкретно в этой ссылке тоже нужно прописывать вот тут?
Код
.item-139 > a:hover, .item-139 > a:focus {
    background-color: #f00;
    color: #fff !important;
}
*

hottab_1

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
Сделал немного по другому, без привязки к id. Редактирование пункта меню - во вкладке - параметры ссылки - CSS-класс ссылки, прописал sale
потом в CSS

.sale {
    background: #cd2626;
}

пример сайт в профиле
Стиль для текста тоже тут можно указать? И если сделать еще .sale:hover, будет работать?
*

Biss

  • Давно я тут
  • 879
  • 92 / 0
.sale a{
    color: #cd2626;
}
.sale a:hover{
    color: #cd2626;
}
возможно надо будет добавить !important и кроме того указывать родителя .nav li.sale a:hover как то так, но это надо пробовать
« Последнее редактирование: 01.07.2016, 17:37:24 от Biss »
*

hottab_1

  • Осваиваюсь на форуме
  • 40
  • 0 / 0
Хорошо, понял, спасибо.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Helix3 как отключить катающееся меню

Автор phvsfpgs

Ответов: 2
Просмотров: 75
Последний ответ 13.08.2018, 13:35:10
от phvsfpgs
Не могу создать/изменить категорию для пункта меню типа блог категории

Автор master-smeta

Ответов: 11
Просмотров: 496
Последний ответ 11.08.2018, 15:14:11
от lexxbry
Вывод количества материалов категории в пункте меню

Автор timofe

Ответов: 1
Просмотров: 99
Последний ответ 29.07.2018, 00:01:58
от pavelrer
Ошибка в меню - после обновления до 3.8.10

Автор bas700

Ответов: 33
Просмотров: 2479
Последний ответ 27.07.2018, 09:10:59
от Old Daemon
Ошибка "404" на всех пунктах меню после установки нового wamp

Автор avilovi

Ответов: 0
Просмотров: 30
Последний ответ 25.07.2018, 17:49:53
от avilovi