Обязательно ли делать обертку над всей страницей?

Question

[Sector567]

По макету ширина составляет: 1440px. Если я сделаю обертку над всей страницей с max-width: 1440px, то по бокам получаются белые полосы, потому что ширина монитора 1920. А в макете этих полос нет, а сайтбар плотно прилегает к левой стороне
Как быть? Нормально ли, что есть эти полосы? Или я делаю что-то не так?

Comments

[Одиночка Айс]

Макет фуллсайз, да еще и резиновый явно, растягивайте до 1920

[Sector567]

Одиночка Айс, то есть, даже не смотря на то, что ширина указана 1440, мне все рано обертку сделать в max-width 1920, верно?
А как понять, когда обертку нужно делать как в макете, а когда 1920? И почему 1920, ведь существуют мониторы и с большем разрешением?

[Alams Stoyne]

Sector567, нет не верно обертку делать не надо и max-width писать ненадо - Макет РЕЗИНОВЫЙ т.е тянется на всю ширину экрана

Answer 1

[Spaceoddity]

Ну это дизайнерские косяки))
Как бы по хорошему это делал я:
1. адаптив (но это отдельная тема)
2. для десктопа минимальная ширина в которую влезает конент, Уже - либо адаптив, либо горизонтальный скролл
3. хэдер на всю ширину
4. сайдбар прибит к левому краю
5. контент (сам дэшборд) растягивается на всю оставшуюся ширину
6. ну а вот содержимое контента уже надо смотреть... в терминологии флексбоксов: или flex-flow: row wrap, или width:25%, или justify-content: space between.

UPD: Назло ленивому дизайнеру можно сделать экран фиксированной ширины и отцентровать его на сером фоне (того же цвета что и бэкграунд в Фигме).

Comments

[Sector567]

спасибо

[WapSter]

И в чем же тут ошибка дизайнера?

[Spaceoddity]

WapSter, в том что он сделал вариант под удобное именно ему разрешение. Будет страница растягиваться? Если да, то как? Если нет, то как это должно выглядеть на других разрешениях.

[WapSter]

Spaceoddity, мда. Я более чем уверен это бесплатный макет. Отсутствие дизайна под другие разрешения развязывает руки верстальщику. В любом случае это не ошибка дизайнера. К тому же отсутствие других разрешений не говорит о том что дизайнер ленив или криворук.

[Spaceoddity]

WapSter, не понимаю в чём разница платный/бесплатный. Я достаточно много встречал (да чего уж там - подавляющее большинство) таких макетов (а-ля "ui standalone app"), которые вписаны в единственное разрешение. Типичный максимум что может приложить дизайнер - ещё два варианта для мобилы и планшета.
Меня, например, всегда интересовал момент: по мнению дизайнеров - в мире не существует мониторов шире чем 1920px?
Понимаете, обычно всё с чем работает верстальщик - это только макет. Ну может какие-то пояснения - что там анимировано должно быть и т.п. И всегда(!) начинается общение с менеджером (редко у верстальщика есть прямой выход на дизайнера) по поводу разрешений девайсов и того, что тот или иной контент просто не влезает в заданное разрешение или наоборот - остаются огромные "дыры". Обычно омтахиваются "а дальше контент просто тянется". Начинаешь на пальцах показывать что тянуть или нечего или некуда. И вот тогда уже дёргается дизайнер и начинает лепить костыли))
Вот здесь я беглым взглядом сразу вижу косяк (безотносительно того, что только единственное разрешение представлено) - правый нижний блок с секторной диаграммой вписан "идеально". А если в этой секторной диаграмме кол-во элементов будет больше 4? Лепить кастомный скроллбар? На аннотацию к диаграмме скроллбар, серьёзно? А если меньше 4? Оставлять пустое место? Растягивать отступы?

[WapSter]

Spaceoddity, то что в компании у вас все так грустно, вообще нифига так же не значит. Если в штате дизайнер не делает другие разрешения это одно говорит об отсутствии или рукожопости тимлида, с оутсорса совсем другое, может ему тупо не заплатили за другие разрешения. Я бы то же не делал сверх того, что обговорено за просто так.

[Spaceoddity]

WapSter, причём тут моя компания? не надо заниматься фигнёй и оправдывать халтуру! прикладывать макеты для "исключительных" случаев - хорошая практика, разве нет?
Ну и к тому же, если дизайнер не делает "сверх того", то почему это должен делать вертсальщик, да ещё на своё усмотрение?

[WapSter]

Spaceoddity, да и брать гораздо больше. Если вы так не делаете, то у вас все грустно. Мне гораздо хуже от дизайнеров, которые не соблюдают правила и алгоритмы расчета размера шрифтов, на глаз раскидают и забьют, вот это реальная ошибка тупого дизайнера.

[Spaceoddity]

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

Answer 2

[WapSter]

Это полноразмерное приложение и в рамки его вообще загонять не нужно. Ограничь по ширине контент и это все, что требуется.

Comments

[Sector567]

Подскажите пожалуйста еще на будущее, как понять, когда нужна обертка над страницей, а когда, как сейчас, нужно лишь ограничить по ширине только контент?

[WapSter]

Sector567, логически подумать

[Sector567]

WapSter,
смотрите, еще такая проблема возникла, вот я например не ставил обертку, тогда страница будет выглядеть так:


То есть образуется белое пространство справа, что с ним можно сделать?

[WapSter]

Sector567, зайди на ютьюб, симулируй 4к и увидишь, как это делается

[WapSter]

Sector567,
Вот так примерно это делается, и что было не понятно в словах обернуть в рамки контент? А не бары.

[Sector567]

WapSter, спасибо

Answer 3

[Алекс Глебов]

вот пример резины
https://adminlte.io/themes/AdminLTE/index2.html

если не хотите резину, ограничиваете ширину контента, а фон тянется на весь экран

img

Comments

[Sector567]

Спасибо