Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 25.12.2016, 17:22   #1
fitimiti
Новичок
Джуниор
 
Регистрация: 23.12.2016
Сообщений: 2
По умолчанию Как сделать Фоновую картинку с разметкой под тест и мини картинки html css

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


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

Код:
<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>
Так выглядит если просмотр с компьютера:
111.jpg
Весь этот текст и картинки можно выделить, таким образом они индексируются
222.jpg
А вот так все это добро выглядит при просмотре с планшета, все просто смещается в право
444.jpg

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

Последний раз редактировалось Вадим Мошев; 25.12.2016 в 19:44.
fitimiti вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сохранить фоновую картинку? caro1223 Общие вопросы .NET 6 19.08.2015 18:33
Как в css из картинки сделать ссылку? vlad2423 HTML и CSS 14 25.07.2015 01:32
Задать фоновую картинку в <tr> IndigoHollow HTML и CSS 12 11.09.2013 18:54
Как сделать разметку HTML и CSS для кнопок DrWho HTML и CSS 3 25.05.2012 22:41
CSS! Увеличение картинки, Как сделать чтобы при увеличении сосед перекрывался? AlienNation HTML и CSS 0 08.10.2011 12:34