Форум программистов
 
Расширенный поиск
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Excel VBA, CAD, Софт, ОС, Windows, Ubuntu, Android, VPS
Win Api, Assembler, C++, Java, Pascal, Lazarus, Delphi, OpenGL, DirectX
C#, Qt, .NET, ASP.NET, Windows Forms, ADO.NET, Framework, WPF, UWP, WinRT, XAML
HTML, CSS, JavaScript, Ajax, PHP, Perl, Python, Ruby, SQL, WordPress, API, XML, JSON, ActionScript, Flash

Ответ
 
Опции темы
Старый 25.12.2016, 18:22   #1
fitimiti
Новичок
 
Регистрация: 23.12.2016
Сообщений: 2
Репутация: 10
По умолчанию Как сделать Фоновую картинку с разметкой под тест и мини картинки 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 в 20:44.
fitimiti вне форума   Ответить с цитированием
Ответ



Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сохранить фоновую картинку? caro1223 Общие вопросы .NET 6 19.08.2015 19:33
Как в css из картинки сделать ссылку? vlad2423 HTML и CSS 14 25.07.2015 02: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




01:50.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

Покупайте на сайте www.skinon.ru уникальные чехлы и наклейки для телефонов.
купить трафик


как улучшить посещаемость, а также решения по монетизации сайтов, видео и приложений

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru