Question

Доброе время суток.

Задали для пда-версии сайта сследующие стили в css:

.button_oval { border-top: 1px solid #96d1f8; background: #0078a5; background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); background: -moz-linear-gradient(top, #00adee, #0078a5); background: -ms-linear-gradient(top, #00adee, #0078a5); background: -o-linear-gradient(top, #00adee, #0078a5); padding: 5px 10px; -webkit-border-radius: 18px; -moz-border-radius: 18px; border-radius: 18px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); text-shadow: rgba(0,0,0,.4) 0 1px 0; color: #d9eef7; font-size: 14px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; }
.button_oval: hover { color: #dbdbdb; background: #00678e; background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); background: -moz-linear-gradient(top, #0095cc, #00678e); background: -ms-linear-gradient(top, #0095cc, #00678e); background: -o-linear-gradient(top, #0095cc, #00678e); }
.button_oval: active { border-top-color: #00adee; background: #00adee; }

Однако вместо кнопки отображается обычная ссылка

Вероятнее всего, подтягивает стиль из родительского элемента.

Подскажите, пожалуйста, как все-таки добиться корректного отображения нужной нам кнопки?

Answer 1

Отредактируйте ссылку :

<a rel="nofollow" href="https://ad.admitad.com/g/yn25dqs7pn823211d02c77b06a97c4/?subid=kumar_mob_news_button" class="button" target="_bkank">Нужны деньги? Возьми кредит!</a>

красное замените на:

class="button_oval"

И поправьте ваши стили:

.button_oval:hover { color: #dbdbdb; background: #00678e; background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); background: -moz-linear-gradient(top, #0095cc, #00678e); background: -ms-linear-gradient(top, #0095cc, #00678e); background: -o-linear-gradient(top, #0095cc, #00678e); }
.button_oval:active { border-top-color: #00adee; background: #00adee; }

между двоеточием и ховер и активе не должно быть пробелов так как стиль срабатывать не будет.

Comments

То уже во время экспериментов упустили, наверное. Поправили - все-равно кнопка не отображается.

---

Андрей777,

Отображается. Кеш в браузере чистите.

---

Yuri_Geruk,

Странно. Уже несколько раз очистили кэ в Хроме на мобильном - не отображается.

Попробовали открыть пда-версию на ПК - отображается.

В чем может быть причина?

---

Андрей777,

Кеш плохо чистите на мобильном. Я проверял с телефона, все хорошо отображается.

---

Yuri_Geruk,

Понятно. Спасибо.

Пожскажите еще, пожалуйста, почему в пда-версии НЕ отображаются элемены:

  <ul>  <li>

и

  <ol>  <li>

---

Андрей777,

В пда стилях удалите 214 строку:

ul, li { list-style: none; }

эти стили лучше заменить на:

ul, li { margin-left: 20px!important; }

---

Yuri_Geruk,

После удаления 214 появились ненужные точки в меню сайта

---

Yuri_Geruk,

Заменив на ul, li { margin-left: 20px!important; }  Кроме появившихся точек в меню, меню еще и сдвинулось вправо, что нам не нужно.

---

Андрей777,

Чтобы на меню не влияло, лучше прописать такие стили:

.material-message ul,.material-message li { list-style: inherit!important; margin-left: 20px!important; }

---

Yuri_Geruk,

1. Это вместо 214 строки ul, li { list-style: none; } или в дополнение к ней?  2. Подскажите, пожалуйста, еще по кнопке. Немного увеличили ее размер, в результате чего на небольших по ширине моб устройствах она начала рваться и переноситься на новую строку   Есть ли какя-нибудь панацея от этого, чтобы при этом не потерять адаптивности для моб устройств?

---

Андрей777,

Это не вместо, а новая строка для пда версии.

Чтобы не рвало кнопку, поправьте стили в строке 789:

.button_oval {display: inline-block;border-top: 1px solid #96d1f8;background: #0078a5;background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));background: -moz-linear-gradient(top, #00adee, #0078a5);background: -ms-linear-gradient(top, #00adee, #0078a5);background: -o-linear-gradient(top, #00adee, #0078a5);padding: 6px 12px;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);text-shadow: rgba(0,0,0,.4) 0 1px 0;color: #d9eef7;font-size: 16px;font-family: Helvetica, Arial, Sans-Serif;text-decoration: none;vertical-align: middle;}

добавить красное.

---

Yuri_Geruk,

Помогло. Спасибо.
А как добиться отображения ul, li на обычных страницах сайта, а не только в разделах?

---

Андрей777,

Нужно видеть пример проблемы на других страницах.

---

Yuri_Geruk,

Вот ссылка на одну из таких страниц index

---

Андрей777,

Поправить строку:

.material-message ul,.material-message li { list-style: inherit!important; margin-left: 20px!important; }

и заменить на:

.material-message ul,.material-message li,.content ul,.content li { list-style: inherit!important; margin-left: 20px!important; }

---

Yuri_Geruk,

Снова появились отступ слева и точки в меню

---

Андрей777,

Чтобы в меню не было точек, в стили допишите:

[id^=uNMenuDiv] ul li { list-style: none!important; }

---

Yuri_Geruk,

А как избавиться от отступа слева, который появился в меню на главной странице после добавления .material-message ul,.material-message li,.content ul,.content li { list-style: inherit!important; margin-left: 20px!important; } ?

---

Андрей777,

Стили:

[id^=uNMenuDiv] ul li {list-style: none!important;}

поправить на подобные:

[id^=uNMenuDiv] ul li {list-style: none!important;margin-left: -5px!important;}

с дальнейшими правками обращайтесь на https://divly.ru/

---

Yuri_Geruk,

Понятно. Спасибо за помощь!