Как добавить текст под картинку?

Сообщений: 179 Регистрация: Апр 2012

1 Декабря 2013 19:15

Добрый вечер!
Немогу сообразить, как под картинкой в слайдере сделать текст на белом фоне.
Слайдер тут: тыц (демо)
А вот как бы хотелось сделать: тыц - картинка
И так должно быть под каждой картинкой.
ПС: Средства реализации: css, html.

Ольга

Сообщений: 193 Регистрация: Фев 2013

1 Декабря 2013 19:34

<div class="slide-inner" style="background:url(' АДРЕС ИЗОБРАЖЕНИЯ ') no-repeat center center;">
<div class="promo-content">
<h(ПОРЯДКОВЫЙ НОМЕР КАРТИНКИ) style="font-size:18px"> НАЗВАНИЕ ИЗОБРАЖЕНИЯ</h(ПОРЯДКОВЫЙ НОМЕР КАРТИНКИ)>
<p> ОПИСАНИЕ ИЗОБРАЖЕНИЯ </p>
</div>
</div>

У меня как- то вот так

Денис Владимирович

Сообщений: 179 Регистрация: Апр 2012

1 Декабря 2013 19:44

Цитата

Ольга пишет:
<div class="slide-inner" style="background:url(' АДРЕС ИЗОБРАЖЕНИЯ ') no-repeat center center;">
<div class="promo-content">
<h (ПОРЯДКОВЫЙ НОМЕР КАРТИНКИ) style="font-size:18px"> НАЗВАНИЕ ИЗОБРАЖЕНИ Я</h (ПОРЯДКОВЫЙ НОМЕР КАРТИНКИ) >
<p> ОПИСАНИЕ ИЗОБРАЖЕНИЯ </p>
</div>
</div>

У меня как- то вот так

Способ с фоном рабочий, но не единственный.

Проблема вовсе в другом, для этой JS карусели нужен индивидуальный подход, пока все что выходит - смещение картинок и неверное отображение...
Спасибо за то, что не прошли мимо! smile:)

Денис Владимирович

Сообщений: 179 Регистрация: Апр 2012

2 Декабря 2013 15:30

Проблему решил!
Оффтоп: Играл в wot (танки) и в конце боя меня поразила мысля.
Решение:

Код

 <div class="2" style="float: left;

opacity: 1;
position: relative;
display: inline-block;
height:330px;
text-align: center;
width:360px;
border: 10px solid #FFFFFF;
margin-left:10px;
"> 

<img src="images/demo/4.jpg" alt="Dead space" id="4" style="height:330px;width:360px" />
  <p style="background-color: #FBFCFC;
background-position: 0% 0%;
background-repeat: repeat-x;"> ОПИСАНИЕ ИЗОБРАЖЕНИЯ </p> 

 </div>

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

Денис Владимирович

Сообщений: 179 Регистрация: Апр 2012

2 Декабря 2013 15:31

Добавлю, ссылка неверная. Вот скрин: тыц

Coder

Сообщений: 10736 Регистрация: Мар 2013

2 Декабря 2013 15:33

Посмотрите такую галерею - думаю, понравится:
_coder.hol.es/example/js/galjs_ful/

✓ Проверенные скрипты и полезности для сайта

✓ Курсы

✓ Сервис временных ссылок

Денис Владимирович

Сообщений: 179 Регистрация: Апр 2012

2 Декабря 2013 22:03

Цитата
Coder пишет: Посмотрите такую галерею - думаю, понравится: _coder.hol.es/example/js/galjs_ful/

Замечательно, спасибо.

Но тут не я руковожу парадом в данной работе, есть ИМХО клиента еще.
Кстате, вот как преобразовал картинку в слайдере: Рисунок

Онли html и css

Coder

Сообщений: 10736 Регистрация: Мар 2013

2 Декабря 2013 22:13

Цитата
Денис Владимирович пишет: Но тут не я руковожу парадом в данной работе, есть ИМХО клиента еще.

Понятно )

Цитата
Денис Владимирович пишет: Кстате, вот как преобразовал картинку в слайдере

Замечательно, по-моему.

Новые темы	Объявления	Свободное общение
23:49 Телега на ручнике: РКН включил замедление и логи админок покраснели 21:59 Яндекс туда же: "Нейро" отжал 50% первого экрана. Органический трафик падает 14:47 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 08:28 OpenAI и шейхи: Цензура на продажу и "гибкие" идеалы амеров 22:45 Биржа купли-продажи сайтов, каналов и сообществ 22:08 Гугл пухнет от кеша, а нам - крошки. Разбор $114 млрд: Адсенс в минусе, Ютуб на подписках 22:13 SEO под нейро	23:04 Volna.money 23:01 GoodsMoney.io 21:54 Mixmasters - Exchange without AML and KYC 17:30 CryptoMonitor.info - ваш надеждный обменник BTC USDT XMR (без KYC) 17:23 YoChange.com - Ваш лучший помощник в обмене цифровых валют! 13:19 Portfel.cc - современный помощник в Ваших финансовых операциях. 12:38 Продвижение сайта: [SEO-трафик][Вывод в ТОП][Крауд-маркетинг + SEO]	05:49 Ставки на супер тренды в спорте 01:22 ТОП +11+КáЗино В Которых Побеждают – Реальный Рейтинг 2026 00:39 ТОП*10++30+ЛегальныХ+Online-CáSiNo на 2026 ГОД: ^ за Рейтинга +_93 Лучших Площадок в Российской Федерации 00:37 +!11*+!10!!++ ЛУЧШИХ ОНЛАЙН-CáSINO НА 2026 ГОД: от Рейтинга +51_Лучших площадок в России и СНГ 00:33 10__КáZино с Выводом Денег Без Верификации: Рейтинг +A15 Лучших Площадок в России 2026 00:27 ТОП-10!!!+++ Самые Надежные КáZино Онлайн 2026: Честный Рейтинг +99 Площадок в РФ с Выплатами 23:39 Добро пожаловать в цифровой мир...

Новые темы

Объявления

Свободное общение

23:49 Телега на ручнике: РКН включил замедление и логи админок покраснели
21:59 Яндекс туда же: "Нейро" отжал 50% первого экрана. Органический трафик падает
14:47 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options
08:28 OpenAI и шейхи: Цензура на продажу и "гибкие" идеалы амеров
22:45 Биржа купли-продажи сайтов, каналов и сообществ
22:08 Гугл пухнет от кеша, а нам - крошки. Разбор $114 млрд: Адсенс в минусе, Ютуб на подписках
22:13 SEO под нейро

23:04 Volna.money
23:01 GoodsMoney.io
21:54 Mixmasters - Exchange without AML and KYC
17:30 CryptoMonitor.info - ваш надеждный обменник BTC USDT XMR (без KYC)
17:23 YoChange.com - Ваш лучший помощник в обмене цифровых валют!
13:19 Portfel.cc - современный помощник в Ваших финансовых операциях.
12:38 Продвижение сайта: [SEO-трафик][Вывод в ТОП][Крауд-маркетинг + SEO]

05:49 Ставки на супер тренды в спорте
01:22 ТОП +11+КáЗино В Которых Побеждают – Реальный Рейтинг 2026
00:39 ТОП**10++30*+ЛегальныХ+Online-CáSiNo на 2026 ГОД: ^ за Рейтинга +_93 Лучших Площадок в Российской Федерации
00:37 +!11*+!10!!++ ЛУЧШИХ ОНЛАЙН-CáSINO НА 2026 ГОД: от Рейтинга +51_Лучших площадок в России и СНГ
00:33 10__КáZино с Выводом Денег Без Верификации: Рейтинг +A15 Лучших Площадок в России 2026
00:27 ТОП-10!!!+++ Самые Надежные КáZино Онлайн 2026: Честный Рейтинг +99 Площадок в РФ с Выплатами
23:39 Добро пожаловать в цифровой мир...

28.01.2020 11:10	Нужно решение для сайта - меняет картинку при наведении на текст
16.05.2017 13:44	помогите добавить видео
10.09.2015 10:12	чтобы текст растягивал футер?
23.06.2015 23:48	Добавить стикеры для товара. Опенкарт
31.05.2015 17:34	Как скрыть часть текста страницы с кодом тизеров?