Question

Товарищи, друзья!
Пытался из готового слайдера выкроить кое что дя себя. Получилось близко к истине, но как-то корявенько.

Почему-то при тесте на локальном компьютере блок с текстом (ссылка и описание) нормальный, а на сайте заголовок вылезает за пределы полупрозрачного блока сверху. И как задать стиль в Styles, а не так, как я извратился? Изначально в образце заголовок был без ссылки, я его удалил и перекинул вместо него MORE, но так вот как-то не хорошо выходит.

Answer 1

Попробуйте в стили прописать:

.slide-desc a { position: relative; top: 5px; }

Comments

Ага, есть эффект! Только ссылка-то спустилась на нижнюю строку.
Может быть лучше как-то полоску чуток вверх увеличить?

А еще вот этот хлам как-то сократить через <style>
 

<li><img src="http://sovetsk-rdnt.ru/Slider/004-2017/Slide-034.jpg" />

 <div class="slide-desc">

<font color="#FFFF00" style="font-size: 19pt; font-weight:700" face="Segoe Print">

 <a target="_self" href="http://sovetsk-rdnt.ru/news/2018-01-02-393">

 <font color="#FFFF00">Почти как в сказке</font></a> </font>

 <p>30 декабря 2017 года на сцене РДНТ ровно в 12 часов дня

 начался новогодний театрализованный концерт...</p>

 </div></li>

---

Олег Рыжаков,

Можно увеличить, ищем стили к слайдеру:

.skdslider .slide-desc {
    background: url(http://sovetsk-rdnt.ru/Slider/COD-2018/006/slide_desc.png) repeat scroll 0 0 transparent;
    left: 0;
    padding: 0 15px 0 15px;
    position: absolute;
    bottom: 2%;
    max-width: 70%;
    height: 100px;
    display: inline-block;
}

добавить выделенное, 100 - это высота данного прозрачного фона где текст расположен, настраивайте какой высоты вам нужно.

После те стили что я писал в самом начале удалите и пропишите такие:

.slide-desc p {
   top: 30px;
   position: relative;
}
.slide-desc a {position:relative;top:15px}

---

Yuri_Geruk,

Спасибо. Немножко по-своему сделал.
А вы не знаете еще как отключить подчеркивание на заголовке слайда?
А то как-то не красиво выходит, подчеркивание пропадает при наведении.
Полдностью задать стиль не получится чтобы сократить нагромаждение кода в списке?

---

Олег Рыжаков,

К стилям:

.slide-desc a {
    text-decoration: none;
    position: relative;
    top: 10px;
}

допишите красное. Там особо нагромаждения нет, пусть будет как есть иначе придется дополнительно стили переписывать.

---

Yuri_Geruk,

Спасибо! Часть вопроса снята.
Ну вот сколько уже колупаюсь с этими CSS,  в всё не могу освоить структурирование, что для чего и куда писать.
Придётся пока городить обсерваторию на каждый пункт списка <li>. Но хоть это. А то я два дня не мог найти слайдер такой как мне надо. В основном только картинки, есть тексты. А во с сылками хвах!