Совет по верстке?

Я начинающий верстальщик, решивший сразу ринуться в бой с реальным проектом. У меня есть пара вопросов, они очень глупые, но понятного, такому аутисту как я, ответа я не нашел. :( Заранее извините и спасибо.
1) Допустим есть макет с шириной 1920px, как задавать его размеры так, чтобы он хоть как-то, без горизонтального скрола, смотрелся на мониторах поменьше? что должно быть в относительных величинах, а что в пикселях?
2) Скрин прикрепляю. На скрине экран сайта. Есть фиксированные верхний и левый навбар. Хочу верстать флексами. Помогите с структурой. Общий враппер для всего, а в нем фиксированные верхний и левый навбары, и блок с контентом, который от последних просто отодвинуть марджинами?
3) Как сделать, чтобы при выборе разных значений, менялась итоговая сумма покупки? И было бы хорошо, если бы подсказали чем или как проще сделать самую реализацию выбора топлива.
Еще раз извините, надеюсь это не выглядит так, будто я хочу, чтобы за меня сделали мою работу. Просто дайте пару советов.
b6b2500277824888954908b62c43410a.jpg
  • Вопрос задан
  • 532 просмотра
Пригласить эксперта
Ответы на вопрос 3
AlexBelkevich
@AlexBelkevich
Нет нерешаемых задач. Есть деревянные клиенты
1. Чтобы не было скролла, надо контейнеру макета задавать ширину в процентах. Ну и основным блокам тоже
2. Да, можно и так
3. Для калькулятора топлива вам уже надо jQuery/JS копать :)
Ответ написан
t3h_l3w1z
@t3h_l3w1z
Обкашливаю вопросики.
1) Если макет нарисован "впритык" под 1920px, то нормально отобразить его без перекомпоновки для монитора, например, в 1024px будет проблематично.

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

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

2) Никаких "оберток" не нужно, флекс и HTML5 элементы уживаются вместе и твой шаблон легко можно сверстать без лишней ерунды.

Очень грубо говоря:
<header class="header">
	<!-- Fixed top content -->
</header>

<section class="slider">
	<!-- First block -->
</section>

<main class="main">
	<section class="content">
		<!-- Left section -->
	</section>
	<aside class="aside">
		<!-- Right section -->
	</aside>
</main>

<footer class="footer">
	<!-- Footer -->
</footer>


Все делится на три (или четыре-пять, не совсем понял сценарий) независимых блоков, внутри которых по несколько элементов\блоков поменьше.

3) Калькулятор цен на JS (JQ) пилить.

Лучше бы ты что-то попроще взял первым проектом, если такие вещи спрашиваешь :)
Ответ написан
Комментировать
therealmoronto
@therealmoronto
Middle full stack developer :)
1. Определиться с минимальной шириной.
2. Есть замечательные CSS свойства: min/max-width. Их стоит прикрутить к тому wrapper, который у тебя будет выравнивать содержимое сайта.
3. Попробуй остальным элементам задать относительные размеры, либо с теми же min/max-width, min/max-height.
4. Не стоит забывать, что при задании в % ширины и высоты блока, он ориентируется на своего родителя.
5. Стоит так же понимать, что бесконечно не сможешь уменьшать, когда-нибудь что-нибудь "поедет". Лучше поговорить с дизайнерами проекта, чтобы они обрисовали ситуацию, как это видят они.
P.S.: ресайз страницы сайта на одном и том же мониторе, это не то же самое, если бы ты его смотрел на разных. И если приспичило использовать относительные величины, то почитай на htmlbook.ru, как высчитывается высота и ширина в %. Там есть своя соль.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы