Верстка сложного макета

@Spy7190 · Регистрация: 20.12.2013

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

Здравствуйте.В html верстке, у меня пока что не так много опыта.Есть сложный макет.Хотелось бы знать по какому принципу его верстать,думаю как же все это разместить, использовать float?либо попробовать сделать по grid системе?
может его как-нибуть подругому надо верстать.
Может кто подскажет, как именно здесь действовать оптимально?

@Spy7190 · 21.12.2013, 01:31 **[ТС]**

может стоит делать через map/ area?

@maximus2011 · 21.12.2013, 06:17

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

Хотя... можно и мап-ареа рассмотреть, но.... ИМХО

@Taatshi · 21.12.2013, 10:56

Spy7190, макет действительно интересный. Карта тут не пойдет скорее всего. Для совета нужна дополнительная информация - какие части макета будут менять свой внешний вид при наведении (hover) - помимо ссылок с иконками машин.

@monochromer · 06.01.2014, 01:47

Интересно. Расскажите, нашли решение?

@newJS · 06.01.2014, 08:20

Сообщение от Taatshi

Карта тут не пойдет скорее всего.

Тоже думаю что карты тут не очень, но только если эти ромбики не должны быть ссылками.
Если дадите полный набор картинок в архиве и четкое описание как все это должно работать, то возможно что кто то из чисто спортивного интереса попробует сверстать. ИМХО.
Как минимум будут более точные подсказки.

@vadimcucherenck · 06.01.2014, 08:37

Да тут скорее всего необходима блочная вёрстка. Как уже сказал newJS Залейте исходники может кто то сверстает вам так сказать набросок. Ну или страничку, конечно возможно за символическую бутылку хлеба!

@monochromer · 17.02.2014, 11:22

Spy7190, Не хочу быть надоедливым, но... мне просто интересно, нашли ли Вы решение.

@dolte · 17.02.2014, 11:25

Не по теме:

ох уж эти дизайнеры +))

@newJS · 17.02.2014, 21:10

Сообщение от monochromer

Не хочу быть надоедливым, но... мне просто интересно, нашли ли Вы решение.

Не знаю что он нашел, но я повторюсь, решение зависит от того, что надо, смотри выше.
Будет конкретная задача, будет решение.

@Taatshi · 17.02.2014, 21:41

monochromer, я сделала поворотом.

Вот пример

логин admin
пасс admin

@monochromer · 18.02.2014, 18:51

Taatshi, спасибо. Мне, конечно, больше интересно было, как реализовано обтекание текста по форме ромба. Может, есть какой-то лаконичный способ. Я подобный текст помещал в список и делал различные отступы для nth-child.

@zme9 · 18.02.2014, 22:12

Попробуйте использовать плагин pixloyt и абсолютное позиционирование

Новые блоги и статьи Все статьи Все блоги /
Вывод текста со шрифтом 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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .

@Spy7190 0 / 0 / 0 Регистрация: 20.12.2013 Сообщений: 2

	Верстка сложного макета 20.12.2013, 23:55. Показов 5866. Ответов 12 Метки нет (Все метки) Здравствуйте.В html верстке, у меня пока что не так много опыта.Есть сложный макет.Хотелось бы знать по какому принципу его верстать,думаю как же все это разместить, использовать float?либо попробовать сделать по grid системе? может его как-нибуть подругому надо верстать. Может кто подскажет, как именно здесь действовать оптимально? Миниатюры 0

@Spy7190 0 / 0 / 0 Регистрация: 20.12.2013 Сообщений: 2
	21.12.2013, 01:31 [ТС]
	может стоит делать через map/ area? 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	21.12.2013, 06:17
	реальная жесть )) думаю что мап-ареа тут не уместна, уж больно тяжело будет ее прокачивать. Делайте все на абсолютных позициях, только не перепутайте родителей. ну а ромбики без картинок просто фоном вставляйте. По идее страничка должна быть фиксированой и по ширине и по высоте. Хотя... можно и мап-ареа рассмотреть, но.... ИМХО 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	21.12.2013, 10:56
	Spy7190, макет действительно интересный. Карта тут не пойдет скорее всего. Для совета нужна дополнительная информация - какие части макета будут менять свой внешний вид при наведении (hover) - помимо ссылок с иконками машин. 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	06.01.2014, 01:47
	Интересно. Расскажите, нашли решение? 0

@vadimcucherenck 248 / 153 / 2 Регистрация: 12.04.2011 Сообщений: 862
	06.01.2014, 08:37
	Да тут скорее всего необходима блочная вёрстка. Как уже сказал newJS Залейте исходники может кто то сверстает вам так сказать набросок. Ну или страничку, конечно возможно за символическую бутылку хлеба! 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	17.02.2014, 11:22
	Spy7190, Не хочу быть надоедливым, но... мне просто интересно, нашли ли Вы решение. 0

@dolte
	17.02.2014, 11:25
	Не по теме: ох уж эти дизайнеры +)) 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	17.02.2014, 21:41
	monochromer, я сделала поворотом. Вот пример логин admin пасс admin 2

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	18.02.2014, 18:51
	Taatshi, спасибо. Мне, конечно, больше интересно было, как реализовано обтекание текста по форме ромба. Может, есть какой-то лаконичный способ. Я подобный текст помещал в список и делал различные отступы для nth-child. 0

@zme9 94 / 67 / 23 Регистрация: 22.09.2013 Сообщений: 626
	18.02.2014, 22:12
	Попробуйте использовать плагин pixloyt и абсолютное позиционирование 0