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

Missile

  • Завсегдатай
  • 1098
  • 90 / 1
Бьюсь уже долгое время, периодически бросаю и вновь возвращаюсь к этой теме.
Хочу в CSS сделать caption у картинок по типу того, что изображён на фото:



То есть, чтобы caption располагался поверх изображения и, желательно, выглядел бы точно так же, как на скриншоте. Ссылка на статью, чтобы можно было подсмотреть код. Копировала CSS, вставляла в свой файлик стилей - ноль эффекта. Смотрела в инете разнообразные примеры с листингом кода, как на русском, так и на английском - всё равно не получается. Шаблон от YooTheme на Warp 7, довольно старый уже, и подписка давно закончилась. Да и техподдержка YooTheme довольно тормозная (был опыт).

Текст у меня вообще не хочет накладываться на изображение, хотя я и картинку, и текст оборачиваю в div и прописываю классы.
*

fbr

  • Завсегдатай
  • 1625
  • 189 / 7
Хорошо бы ссылку на вашу страницу ...
Или, если на локалке, то на демо шаблона

В стандартном  Warp 7 вообще не предусмотрен вывод caption для изображений
*

Missile

  • Завсегдатай
  • 1098
  • 90 / 1
В стандартном  Warp 7 вообще не предусмотрен вывод caption для изображений
Так я не использую тег caption, я пытаюсь сделать на чистом CSS. Демка шаблона - тут, хотя можно взять абсолютно любой шаблон на Warp 7, хоть бесплатный.
*

robert

  • Живу я здесь
  • 4974
  • 457 / 20
Ссылка на статью
Так там элементарная position: absolute;, только надо добавить position: relative(absolute, fixed); родительскому div и при необходимомсти - left самому элементу.
Не будь паразитом, сделай что-нибудь самостоятельно!
*

Missile

  • Завсегдатай
  • 1098
  • 90 / 1
Там вот это (если я правильно кусок кода выхватила):

Код
.article .photo>span.descr {
    color: #FFF;
    font-size: 13px;
    line-height: 16px;
    position: absolute;
    margin: 0 20px;
    bottom: 15px;
    z-index: 30;
}
.article .photo span.descr, .article .photo>span.descr, .article .picture .title span, .article img, .cover .title span, .externalBlock, .newsPage article .picture .title span {
    display: block;
}
.article .photo span.descr span {
    border-top: 1px solid #FFF;
    padding-top: 10px;
    margin-top: 10px;
    display: block;
}

Куда position:relative добавить, в .article .photo span.descr span?
*

Ilhom666

  • Завсегдатай
  • 1384
  • 184 / 0
можно попробовать uikit-вский overlay приспособить  https://getuikit.com/v2/docs/overlay.html
*

Missile

  • Завсегдатай
  • 1098
  • 90 / 1
можно попробовать uikit-вский overlay приспособить  https://getuikit.com/v2/docs/overlay.html
Да, я пробовала UIkit, всё ОК, но хочется сделать внешний вид, как на скрине. К тому же, если вдруг я сменю шаблон, и там не будет UIkit, у меня всё развалится.
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
http://joomlanet.ru/1.php

Спойлер
[свернуть]

Если надо вверх/без фона/линия на всю и т.д., просто изменить в CSS нужное.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Missile

  • Завсегдатай
  • 1098
  • 90 / 1
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Да не за что! Если хотите-напишите чётко, как надо, я на демке поменяю (заодно посмотрите) и скопируете код.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Missile

  • Завсегдатай
  • 1098
  • 90 / 1
А как сделать так, чтобы линия подчёркивания была на всю ширину бокса? border-bottom в .image:before не помогает.
*

Филипп Сорокин

  • Завсегдатай
  • 1918
  • 160 / 4
  • разработчик.москва
Цитировать
А как сделать так, чтобы линия подчёркивания была на всю ширину бокса?
width: 100%;
*

robert

  • Живу я здесь
  • 4974
  • 457 / 20
Или вместо margin-left: 15px; поставьте left: 15px;right: 15px;
Не будь паразитом, сделай что-нибудь самостоятельно!
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Изменил стиль, так?
// + добавил пару строк для адаптивности

Спойлер
[свернуть]
« Последнее редактирование: 30.04.2017, 18:01:42 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Missile

  • Завсегдатай
  • 1098
  • 90 / 1
width: 100%;
Не, так оно до границы изображения доходит. Я 90% ставила, но это тоже костыль.
Изменил стиль, так?
// + добавил пару строк для адаптивности
Ещё раз большое спасибо, особенно - за адаптивность.
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Ещё можно сделать: при наведении появляется данный div  ::)

И если вы заметили-я сделал описание для класса и css
Код
content: attr(title);
А не для изображения.
Где-то вычитал-вроде так поисковики лучше "клюют".
Но не уверен.

« Последнее редактирование: 30.04.2017, 20:47:21 от vipiusss »
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
*

Филипп Сорокин

  • Завсегдатай
  • 1918
  • 160 / 4
  • разработчик.москва
Цитировать
width: 100%;
Не, так оно до границы изображения доходит
Для этого есть внешний отступ: margin: 0 15px;

Или сделайте, как предложил Robert
« Последнее редактирование: 30.04.2017, 20:57:01 от Филипп Сорокин »
*

Missile

  • Завсегдатай
  • 1098
  • 90 / 1
Для этого есть внешний отступ: margin: 0 15px;

Или сделайте, как предложил Robert
Да, я уже всё сделала, спасибо. В оригинале подчёркивание привязано к длине верхней строки текста, но я подумала, и решила, что подчёркивание по всей ширине блока (с учётом отступов) будет даже лучше.
*

vipiusss

  • Гуру
  • 5739
  • 344 / 11
  • Скайп: renor_
Раз подходит-демку удаляю. Обращайтесь.
Миграция, установка, обновление версий Joomla  |  Создание сайтов "под ключ"  |  Эксклюзивные заглушки "offline"  |  Работа с "напильником" над шаблонами и расширениями
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как сделать?

Автор Twins

Ответов: 3
Просмотров: 1473
Последний ответ 01.07.2021, 13:11:51
от xpank
Как сделать кнопку формы аккаунта?

Автор Evgen Kulibin

Ответов: 0
Просмотров: 677
Последний ответ 22.04.2021, 22:15:06
от Evgen Kulibin
Как сделать плавающий модуль?

Автор THeCMeX

Ответов: 2
Просмотров: 771
Последний ответ 08.03.2021, 22:21:01
от Flexderection
[Решено] Как сделать чтобы фотография открылась в отдельном окне?

Автор a-two

Ответов: 11
Просмотров: 1283
Последний ответ 03.11.2020, 16:57:40
от Nikolay89
Как сделать плавающий блок/модуль. Пример есть!

Автор Good_user

Ответов: 8
Просмотров: 11700
Последний ответ 04.04.2020, 13:49:11
от jan_dax