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

Question

[netwbat]

Я начинающий верстальщик, решивший сразу ринуться в бой с реальным проектом. У меня есть пара вопросов, они очень глупые, но понятного, такому аутисту как я, ответа я не нашел. :( Заранее извините и спасибо.
1) Допустим есть макет с шириной 1920px, как задавать его размеры так, чтобы он хоть как-то, без горизонтального скрола, смотрелся на мониторах поменьше? что должно быть в относительных величинах, а что в пикселях?
2) Скрин прикрепляю. На скрине экран сайта. Есть фиксированные верхний и левый навбар. Хочу верстать флексами. Помогите с структурой. Общий враппер для всего, а в нем фиксированные верхний и левый навбары, и блок с контентом, который от последних просто отодвинуть марджинами?
3) Как сделать, чтобы при выборе разных значений, менялась итоговая сумма покупки? И было бы хорошо, если бы подсказали чем или как проще сделать самую реализацию выбора топлива.
Еще раз извините, надеюсь это не выглядит так, будто я хочу, чтобы за меня сделали мою работу. Просто дайте пару советов.

Comments

[Islam Ibakaev]

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

здесь есть интересные макеты(правда я не нашёл чего-нибудь слишком простого)

[netwbat]

Islam Ibakaev: я думал это и есть простой) но посыл я понял, спасибо) просто эффект самозванца меня убивает, типа я все же понимаю, но на деле похудее. Это же сейчас и в JS у себя вижу(

Answer 1

[Александр Белькевич]

1. Чтобы не было скролла, надо контейнеру макета задавать ширину в процентах. Ну и основным блокам тоже
2. Да, можно и так
3. Для калькулятора топлива вам уже надо jQuery/JS копать :)

Comments

[Kovalsky]

3. Вот точно такой же вопрос, там есть решение

[netwbat]

Спасибо за ответы) Уточню...
1) Тогда мне ширину каждой кнопки, каждого элемента отдельно переводить с пикселей в проценты? Это еще ладно, а как быть с высотой? Делить на высоту экрана макета или задавать на глаз относительно вьюпорта?

[Александр Белькевич]

netwbat: ширину кнопок можно задавать с помощью max-width и padding. А можно и в процентах :) Это вам надо смотреть, как на практике будет лучше. Высоту можно задавать и в пикселях. Если будете делать адаптивный сайт, надо будет при определенных значениях медиазапросов изменять высоту. Если я конечно все правильно понял по вопросу

[MGriboedoff]

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

Для мелких элементов не нужны % тебе нужно добиться, чтобы они гарантированно влезали в блок, в котором находятся.

Попробуй все же на Bootsrap сделать, возможно даже после сдачи для образования.

Тебе понадобится разобраться с grid системой Bootsrap, для того чтобы выстраивать блоки горизонтально или вертикально в зависимости от разрешения. Так же pull-right для блока с "три шага для заказа талонов" чтобы на мелких разрешениях он был над блоком с пунктами 1-2-3. Можно прятать стрелки справа от блока, есть специальный классы для этого (visible-xs -sm -md -lg hidden-md и т.д. ) При скачке Bootsrap ты можешь указать разрешения экрана, когда сетка будет перестраиваться (-xs -sm -md -lg это как раз 4 диапазона разрешений экрана). Но в твоем случае настройки по-умолчанию пойдут. Самое сложное ползунок, 92 95 ДТ ГАЗ, если он ущербно будет смотреться по горизонтали, его нужно будет развернуть вертикально. Полосу можно иметь в двух экземплярах или тоже прятать... сам скролл можно повернуть с помощью JS или тоже иметь два блока один из которых прятать. Использовать те же блоке где и полоса иметь два варианта для xs и всех остальных разрешений. Может туплю есть более красивые способы.

[netwbat]

MGriboedoff: спасибо, огромное, буду колупать.;)

Answer 2

[Игорь Петров]

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) пилить.

Лучше бы ты что-то попроще взял первым проектом, если такие вещи спрашиваешь :)

Answer 3

[Александр Моргунов]

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