Изображение в статье на которой есть текст и миниатюры

@fitimiti · Регистрация: 23.12.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте. Помогите пожалуйста.
У меня есть игровой сайт, на котором я публикую статьи по прохождению квестов и полезной информации.
Хочу сделать следующее:
Есть картинка - которая должна быть фоном(но не для сайта, а именно в публикуемой статье)
То есть, картинка фон является статичной а я мог бы на ней писать текст, и вставлять новые мини картинки.
Если честно то не могу правильно сформулировать суть вопроса, так как не могу даже примера в интернете найти по объяснению того что я хочу.
Вот например картинка:

Изображение в статье на которой есть текст и миниатюры

так вот я хочу сделать следующее:
- редактирую картинку и удаляю текст и миниатюры
- при написании статьи вставляю чистую заготовку этой картинки без текста
- сам пишу текст и вставляю миниатюры
Извините за кашу, но если кто то хоть чуток уловил суть, то помогите. Буду благодарен.

@mrtoxas · 25.12.2016, 13:57

Не уловил. С чем у вас возникли трудности?

@fitimiti · 25.12.2016, 15:00 **[ТС]**

Хочу сделать щаблон из этой картинки. В которой должны быть области для вставления миниатюр и текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div>
<center><img class="alignnone size-full wp-image-16390" src="http://zombitime.com/wp-content/uploads/2016/12/Bezymyannyj.png" alt="" width="466" height="482" /></center>
 
<div style="position: relative; bottom: 480px; text-align: center;"><strong><span style="color: #ff9900;">Текст поверх картинки</span></strong></div>
<div style="position: relative; bottom: 330px; text-align: center;"><strong><span style="color: #ff9900;">Текст поверх картинки</span></strong></div>
<div style="position: relative; bottom: 270px; text-align: center;"><strong><span style="color: #ff9900;">Текст поверх картинки</span></strong></div>
<div style="position: relative; bottom: 200px; text-align: center;"><strong><span style="color: #ff9900;">Текст поверх картинки</span></strong></div>
 
<div style="position: relative; bottom: 400px; left: 85px;"><img class="alignnone size-full wp-image-16379" src="http://zombitime.com/wp-content/uploads/2016/12/21.png" alt="" width="89" height="57" /></div>
<div style="position: relative; bottom: 390px; left: 85px;"><img class="alignnone size-full wp-image-16379" src="http://zombitime.com/wp-content/uploads/2016/12/21.png" alt="" width="89" height="57" /></div>
<div style="position: relative; bottom: 380px; left: 85px;"><img class="alignnone size-full wp-image-16379" src="http://zombitime.com/wp-content/uploads/2016/12/21.png" alt="" width="89" height="57" /></div>
</div>

Но в этом случае приходится задавать отступы, а при этом они являются статичными, и при просмотре страницы с планшета, данные размеры не подходят, так как разные расширения мониторов

но при просмотре с планшета происходит сдвиг

Вот картинка, на которой долны быть элементы которые я буду вставлять
- Три мини картинки
- описание к картинкам и Описание квеста в вверху и внизу

@fitimiti · 25.12.2016, 16:38 **[ТС]**

Не могу сделать разметку (таблицу) на этой картинке, что бы были определенные области для вставки картинок и текста, и при этом что бы они не смещались в зависимости от того на каком расширении экрана идет просмотр.
Вот области где должны быть картинки и текст

Я нашел один способ, но при просмотре с планшета идет смещение, так как в коде html указаны определенные границы отступа с лева и по центру.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div><center><img class="alignnone size-full wp-image-16506" src="http://zombitime.com/wp-content/uploads/2016/12/Zagotovka.png" alt="" width="463" height="476" /></center>
 
<div style="position: relative; bottom: 410px; text-align: center;"><span style="color: #000000;"><strong>Задание:
Пришла зима. Наступило время подумать 
о новогодних подарках!</strong></span></div>
<div style="position: relative; bottom: 378px; left: 200px;"><span style="color: #000000;"><strong>Текст поверх картинки
Количество - 100
Нельзя пропустить</strong></span></div>
<div style="position: relative; bottom: 353px; left: 200px;"><span style="color: #000000;"><strong>Текст поверх картинки
Количество - 150
Нельзя пропустить</strong></span></div>
<div style="position: relative; bottom: 328px; left: 200px;"><span style="color: #000000;"><strong>Текст поверх картинки
Количество - 20
Нельзя пропустить</strong></span></div>
 
<div style="position: relative; bottom: 540px; left: 85px;"><span style="color: #000000;"><img class="alignnone size-full wp-image-16379" src="http://zombitime.com/wp-content/uploads/2016/12/21.png" alt="" width="89" height="57" /></span></div>
<div style="position: relative; bottom: 536px; left: 85px;"><span style="color: #000000;"><img class="alignnone size-full wp-image-16379" src="http://zombitime.com/wp-content/uploads/2016/12/21.png" alt="" width="89" height="57" /></span></div>
<div style="position: relative; bottom: 526px; left: 85px;"><span style="color: #000000;"><img class="alignnone size-full wp-image-16379" src="http://zombitime.com/wp-content/uploads/2016/12/21.png" alt="" width="89" height="57" /></span></div>
</div>

Так выглядит если просмотр с компьютера:

Весь этот текст и картинки можно выделить, таким образом они индексируются

А вот так все это добро выглядит при просмотре с планшета, все просто смещается в право

Возможно это можно сделать как то в фотошопе?
Не могу найти решение этой проблемы, помогите кто может.

Комментарий модератора

Используйте соответствующие теги в редакторе для форматирования кода!

@mrtoxas · 25.12.2016, 17:23

Какая-то у вас заготовка не правильная. Для начала уберите эти прямоугольники с холста и сделайте их при помощи разметки и стилей. Сетку можно сделать при помощи блочной таблицы.

@fitimiti · 25.12.2016, 17:26 **[ТС]**

Это я в фотошопе просто отметил области где должен быть текст и картинки
Вот оригинал

А что на счет разметки и сетки, если бы я знал как это сделать я бы не писал сюда)))
Проблема в том что я не пойму как это сделать

@mrtoxas · 25.12.2016, 18:00

А должен быть как минимум таким:

Все остальное вы делаете при помощи html+css

@fitimiti · 25.12.2016, 18:05 **[ТС]**

А вы не моги бы помочь мне, так как тот способ который я использую, работает не так как нужно

@mrtoxas · 25.12.2016, 22:24

Представьте, что это маленькая вэб-страница, у которой есть блоки title, header, content, footer. И верстайте ее как обычную страницу. Форма не растягивается, размеры все заранее известны, проще некуда.
Вот, навскидку сетка:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="window">
  <div class="header">
    <h2>заголовок окна</h2>
  </div>
  <div class="content">
    <div class="specify">
      задания
    </div>
    <div class="award">
      награда
    </div>
    <div class="item-wrapper">
      <div class="row">
        <div class="icon">Иконка</div>
        <div class="description">Описание</div>
      </div>
      <div class="row">
        <div class="icon">Иконка</div>
        <div class="description">Описание</div>
      </div>
      <div class="row">
        <div class="icon">Иконка</div>
        <div class="description">Описание</div>
      </div>
    </div>
  </div>
  <div class="footer">
    <button>Хорошо</button>
  </div>
</div>

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@fitimiti 0 / 0 / 0 Регистрация: 23.12.2016 Сообщений: 6

	Изображение в статье на которой есть текст и миниатюры 25.12.2016, 13:54. Показов 981. Ответов 8 Метки нет (Все метки) Здравствуйте. Помогите пожалуйста. У меня есть игровой сайт, на котором я публикую статьи по прохождению квестов и полезной информации. Хочу сделать следующее: Есть картинка - которая должна быть фоном(но не для сайта, а именно в публикуемой статье) То есть, картинка фон является статичной а я мог бы на ней писать текст, и вставлять новые мини картинки. Если честно то не могу правильно сформулировать суть вопроса, так как не могу даже примера в интернете найти по объяснению того что я хочу. Вот например картинка: так вот я хочу сделать следующее: - редактирую картинку и удаляю текст и миниатюры - при написании статьи вставляю чистую заготовку этой картинки без текста - сам пишу текст и вставляю миниатюры Извините за кашу, но если кто то хоть чуток уловил суть, то помогите. Буду благодарен. 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	25.12.2016, 13:57
	Не уловил. С чем у вас возникли трудности? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	25.12.2016, 17:23
	Какая-то у вас заготовка не правильная. Для начала уберите эти прямоугольники с холста и сделайте их при помощи разметки и стилей. Сетку можно сделать при помощи блочной таблицы. 0

@fitimiti 0 / 0 / 0 Регистрация: 23.12.2016 Сообщений: 6
	25.12.2016, 17:26 [ТС]
	Это я в фотошопе просто отметил области где должен быть текст и картинки Вот оригинал А что на счет разметки и сетки, если бы я знал как это сделать я бы не писал сюда))) Проблема в том что я не пойму как это сделать 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	25.12.2016, 18:00
	А должен быть как минимум таким: Все остальное вы делаете при помощи html+css 0

@fitimiti 0 / 0 / 0 Регистрация: 23.12.2016 Сообщений: 6
	25.12.2016, 18:05 [ТС]
	А вы не моги бы помочь мне, так как тот способ который я использую, работает не так как нужно 0