|
Модераторы: Illuminaty |
|
leonfury95 |
|
||||
Новичок Профиль Группа: Участник Сообщений: 2 Регистрация: 28.10.2020 Репутация: нет Всего: нет |
Есть вот такой условный дизайн :
При масштабировании экрана, разумеется, все это дело разъезжается куда не надо. Одно дело адаптивность, но тут даже на пару пикселей изменить масштаб и всё уже не там. Как-нибудь можно зафиксировать текст и меню хотя бы именно в этих местах бэкграунда? Если необходим код : HTML :
И CSS:
Это сообщение отредактировал(а) leonfury95 - 28.10.2020, 05:22 |
||||
|
|||||
Oldshelf |
|
|||
Бывалый Профиль Группа: Участник Сообщений: 159 Регистрация: 22.4.2018 Репутация: нет Всего: 4 |
По-моему, объединить связанные элементы дизайна проще всего тэгом "table".
|
|||
|
||||
ksnk |
|
|||
прохожий Профиль Группа: Комодератор Сообщений: 6855 Регистрация: 13.4.2007 Где: СПб Репутация: 48 Всего: 386 |
Обычно, если фон сильно рисованный и не может изменяться - делают фиксированную верстку, явно указывая размеры контейнера, в который вставлен бэкграунд и текст. Для разных расширений удобно сделать несколько картинок с разным расширением и менять размеры контейнера в medium запросах. Таким образом придется отлаживать разные наборы стилей для разных расширений. Зато их будет немного -4 - 6++, в зависимости от аппетитов заказчика. Это, imho, наиболее простой вариант. Если дизайн пока не утвержден толком - лучше так и делать. Фоном всего сайта пустить какую нибудь полоску, которая сливалась бы с основной картинкой.
Второй вариант - перерисовать картинку в svg и пускать фоном ее. Опять же в контейнере, размер которого контроллируется медиум запросами, чтобы не сильно уезжал контент самой страницы при смене размера экрана. Если удастся сделать картинку достаточно компактной, и она будет прилично выглядеть в любом увеличении - это будет наилучшим решением для резиновой верстки. Для этого подходит только простая картинка, сложные тени и навороты в изображении в svg компактно перетащить почти не возможно. Можно, конечно, и в таблицу упихать порезанную на запчасти основную картинку. При достаточной ловкости рук подойдет table-layout:fixed и явное указание размера столбиков в секции < col> таблицы. Правда табличная верстка коряво будет смотреться в мобильном размере экрана. Да и поисковики не могут правильно выковыривать контент из такой верстки, что сильно снижает ее ценность. Это сообщение отредактировал(а) ksnk - 28.10.2020, 13:41 -------------------- Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! |
|||
|
||||
leonfury95 |
|
|||
Новичок Профиль Группа: Участник Сообщений: 2 Регистрация: 28.10.2020 Репутация: нет Всего: нет |
ksnk,
Oldshelf, спасибо за ответы |
|||
|
||||
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей) | |
0 Пользователей: | |
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема » |
|
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности Powered by Invision Power Board(R) 1.3 © 2003 IPS, Inc. |