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

Question

[Павел]

Ребят, подскажите, как можно сверстать данный блок адаптивно, чтобы он нормально отображался и на планшетах, и на десктопах. По умолчанию ширина и высота этого круга 860 пикселей.

Answer 1

[Максим Тимофеев]

1. Картинкой
2. блоки с размерами в %
3. Можно абсолютным позиционированием.
4. SVG

На мой взгляд проще сделать картинку и абсолютным позиционированием поверх нее положить 4 блока с текстом

Comments

[Павел]

пробовал с картинкой и абсолютным позиционированием для блоков. Проблема в том, что когда я задаю pos:abs для блоков с текстом они не накладываются на картинку, а идут после нее

[Максим Тимофеев]

Павел: 1 блок, с position:relative; в нем картинка и блоки с текстом у которых positon:absolute;

[Павел]

Максим Тимофеев: А в таком случае картинка будет растягивать родительский блок по высоте?

[Максим Тимофеев]

Павел: конечно

[Павел]

Максим Тимофеев: возникла другая проблема, bottom не прибивает блоки с текстом к низу картинки (если только -800px), и соответственно при уменьшении картинки текст остаётся неподвижным

[Павел]

Максим Тимофеев: родительский блок (с pos:rel) стал высотой 0 пикселей после того, как я дочерним элементам задал pos:abs

[Максим Тимофеев]

Павел: картинка должна быть релятивной естественно

[Павел]

Максим Тимофеев: Спасибо! Получилось! Вот только для каждого блока с текстом пришлось прописать что-то вроде этого: right: 5px; bottom: 0; height: 73%; margin: auto;

[Максим Тимофеев]

Павел: так и должно быть

Answer 2

[metaf]

Верстать до 860 так, как на картинке, а то что меньше - выстраивать блоки по-человечески прямоугольниками под картинкой. Как это вообще можно сверстать на 320?? Уже сейчас 2 и 4 блоки читать ужасно не удобно, потому что строчки слишком короткие. На 320 они вообще в одно слово на строчку должны быть?
О чем такие "дизайнеры" вообще думают??

Comments

[Павел]

Дизайнер просто как красивее делала. Это понятно, что до 320 это невозможно сжать. Я думаю для разрешений от 320 до 600 пикселей подключить другую таблицу стилей и делать совсем другой дизайн. Вопрос в том, что как сделать, чтобы этот блок нормально выглядел от 600 до 860 пикселей

[Reexel]

Павел. Почитайте тут: shpargalkablog.ru/2010/12/shirina-saita-css.html

[Ankhena]

Павел: самое умное в этой ситуации, сделать так, чтобы задачу дизайнера решала дизайнер. Для всех возможных вариантов размеров.

Если это непременно Ваша задача, ну попробуйте уменьшить шрифт или взять более сжатый от 860 до 600 пикселей. Но как-то это не выглядит пригодной для чтения идеей.
Я бы, наверное, сразу в прямоугольные блоки перестраивала. Или не в прямоугольные, а какие-нибудь чуть фигурные (может капельками, если их поворачивать в разные стороны, то они могут так друг в дружку улечься), но идущие в обычном порядке и занимающие побольше ширины, чтобы текст был читаемым.

[Павел]

Ankhena W: да это не проблема поставить дизайнеру задачу сделать дизайн для мобильников и планшетов отдельно. Я просто боюсь, что еще сложнее верстать будет))

[Ankhena]

Павел: поправлюсь: веб-дизайнеру :) Т.е. не полному гуманитарию, а все таки человеку понимающему и в верстке тоже.

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

[Павел]

Ankhena W: это единственный блок на лендинге, который очень трудно сверстать адаптивно. Так что придется помучиться)) Зато смотрится красиво! И уникально, а не как на большинстве лендингов

Answer 3

[Дмитрий]

так а он в виде целостной картинки идет или разделен на кусочки?

Comments

[Павел]

Конечно всё разделено на кусочки в фотошопе. А я привел просто скриншот

Answer 4

[Reexel]

А можно поинтересоваться, с какой целью это надо делать именно в текстовой форме? Для поисковиков?
Мне кажется, что вопрос из разряда: "А можно ли забить гвоздь противоударными часами?" "Да, можно."

Я бы сделал так, ибо время надо тратить на создание ВВП страны (саморазвитие, зачатию детей и т.д.):
<img src="protez.png"/>

Добавлено позже:
А, увидел профессию, вопрос "Зачем?" отпал :)

Comments

[Павел]

Профессия тут не причём)) Мне не нужно сжимать этот блок до 320. До 600, если не получится то до 768 пикселей, но чтобы текст не съезжал. Для мобильников будет другой дизайн

[Павел]

А может мне и весь лендинг сделать одной картинкой? :D

[Reexel]

Ответ: "да" :)

По сути вопроса:
Я бы подтянул bootstrap и определяя размеры экрана сделал разные подложки и кегль шрифта.

[Павел]

Reexel: в Бутстрапе слишком много ненужного кода, что сказывается на скорости загрузки сайта. А мне важна скорость

[Reexel]

Если верстаешь для модемных линий предлагаю такой вариант:
proekt-ss.ru/cgi/index.html

Плюсов от бутстрапа гораздо больше, чем минусов от его размеров :)
В любом случае решать Вам.

Присмотритесь к ссылке (кидал выше)

media (max-width: 930px) { /* это будет показано при разрешении монитора до 930 пикселей */
.content-wrapper {padding: 0;} /* основное содержимое занимает всё пространство окна */
}

media (max-width: 930px) and (min-width: 470px) { /* для разрешения экрана от 470 до 930 пикселей */
aside {position: static; width: 100%; background: #ccc;} /* боковая колонка смещается согласно расположению в HTML и меняет фон */
}

media (max-width: 469px) { /* если максимальное разрешение экрана составит 469 пикселей */
body {font: .9em/1em "Helvetica Neue",Arial,Helvetica,sans-serif;} /* меняется шрифт */
aside {display: none;} /* боковая колонка исчезает */
}

[Ankhena]

Reexel: Павел: media и без бутстрапа прекрасно функционируют.

[Reexel]

Ankhena W: согласен, но вдруг понравится :)

[Павел]

Reexel: нет, нет и еще раз нет)) Не понравится