Возможно ли идеально сверстать эту страницу?

Question

[Станислав Ботев]

Доброго времени суток.
Я начал верстать свой первый макет. Вырезал картинки и иконки в фотошопе. Разбил визуально на блоки, принялся за дело. В итоге, ужасно не нравится результат.
Вопросы:
1. Как перевести pt в px (из Photoshop)?
2. Как избавиться от отступа слева от <div class="left-side">? Левый блок абсолютно белый. Как прибить его к левой части экрана?
3. Просто кошмарно расположил элементы. Есть варианты сделать эту страницу адаптивно и кроссбраузерно? Есть возможность сверстать это на флексбоксах или гридах? Думаю, с гридами было бы гораздо проще. Тем более, что в интернетах нашел версию фонового изображения с шириной 1920px. Вырезанная из макета - 1360px.
4. При размещении элементов на правой стороне блока "main", появилась горизонтальная прокрутка. Избавился от неё при помощи overflow-x: hidden, однако при уменьшении размеров пропадает правая часть экрана. И в мобильной версии прокрутки тоже нет. Как избежать overflow и сделать по-человечески?
5. В релизной версии сайта должен быть реализован функционал, вроде переключателей слева посередине. Каким образом это реализовать? Переключатели это кнопки на другие страницы или же слайдер? CSS3 или JS?
6. В IE7 плывёт верстка блока "main". Как это исправить?
7. В макете нет ссылок ни для каких кнопок. Должно ли быть так? Зачем иконка "download", например, если нет страницы с таким названием или файлов для скачивания? Нужна ли иконкам-кнопкам анимация?


Не то, чтобы попиксельно размещать блоки и элементы это "фу". Скорее, мне кажется, должны быть способы делать это аккуратнее и изящнее.

Comments

[Сергей delphinpro]

1. Как перевести pt в px (из Photoshop)?

Открыть настройки программы и указать что все размеры вы хотите видеть в пикселях.

[Сергей delphinpro]

6. В IE7 плывёт верстка блока "main". Как это исправить?

Серьезно что ли? тут про IE9-10 не часто вспоминают уже, а вы такого мамонта потревожили...

[Руслан Полин]

В релизной версии сайта должен быть реализован функционал, вроде переключателей слева посередине. Каким образом это реализовать? Переключатели это кнопки на другие страницы или же слайдер? CSS3 или JS?

На JS.

В макете нет ссылок ни для каких кнопок. Должно ли быть так? Зачем иконка "download", например, если нет страницы с таким названием или файлов для скачивания? Нужна ли иконкам-кнопкам анимация?

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

Просто кошмарно расположил элементы. Есть варианты сделать эту страницу адаптивно и кроссбраузерно? Есть возможность сверстать это на флексбоксах или гридах? Думаю, с гридами было бы гораздо проще. Тем более, что в интернетах нашел версию фонового изображения с шириной 1920px. Вырезанная из макета - 1360px.

Флексы используйте, гриды ещё рано юзать, если я правильно понял о чем вы говорите.

[Ankhena]

4. При размещении элементов на правой стороне блока "main", появилась горизонтальная прокрутка.

Не надо всему подряд ставить absolute и relative. Зачем они вам?
Используйте контейнер и в него располагайте блоки, флексами, инлайн-блоками или table-cell, как удобнее.

6. В IE7 плывёт верстка блока "main". Как это исправить?

Да кому он нужен этот ИЕ?
Если очень хотите разобраться, то гуглите скрипт htnml5.js для ИЕ и указывайте им display:block. ИЕ просто не понимает новые теги.

Нужна ли иконкам-кнопкам анимация?

По меньшей мере у кнопок должен быть курсор "лапкой" pointer, желательно эффект при наведении, анимированный или нет это вопрос к дизайнеру.

[Станислав Ботев]

Ankhena W: Здравствуйте. Какой способ расположения блоков лучше подойдет в моем случае?

[Ankhena]

Станислав Ботев: я бы забыла про древние ИЕ и делала бы флексами.

Answer 1

[KazeZlat]

1. Тут можно, там расчет приведен для 72dpi
2. Нужно обнулять свойства браузера в CSS:

html, body {
    padding: 0;
    margin: 0;
}

3. Если нужно разместить элементы справа - не используйте позиционирование слева. Возможность использовать флексбоксы есть, но нужно изучать как они работают сначала, иначе запутаетесь. С гридами пока не думайте даже, рановато
4. Вы смещаете блок шириной 400 пикселей к краю экрана. естественно там появится белое пространство и прокрутка. Либо не используйте display: block, ибо он занимает всю ширину родителя, либо сделайте отдельный сайдбар справа.
5. В принципе да, это слайдер, можно реализовать как на JS так и без него.
6. Забудьте вы про IE, уже давно никто не вспоминает даже о 9-10.
7. Нет, не должно. Но в вашем случае вместо ссылок можно просто сверстать на якори типа <a href="#">Ссыль</a>. И да, ответ элементов на действия пользователя (наведение, клик) естественно должны быть. иначе не кошерно.

Еще, найдите шрифт уже какой-нибудь который смотрится как на макете, смотреть на этот без слез невозможно :D

Comments

[Станислав Ботев]

3. Сделал левый блок на флексе. Не совсем понял, как задавать размер блокам так, чтобы они занимали определенное пространство?
Разбил элементы на три блока, блоку задал фиксированую ширину в 110px, отцентровал три блока по вертикали, затем наложил сверху черную точку.
4. Именно поэтому не сделал справа такой же сайдбар, хотя по идее он не должен сильно отличаться от левого. Задать width: 110px, затем центр по вертикали, задать блокам определенные размеры?
Пытался так сделать, но из-за позиционирования других блоков-элементов относительно родителя в <div class="main">, он вылетает напрочь за пределы страницы.
5. Если JS, то где искать туториал? Откровенно говоря, знания языка у меня почти нулевые. Взялся за макет, чтобы упрочить навыки вёрстки, в процессе обучаться благодаря решению появляющихся проблем и задач.
Если хотя бы на уровне "скопировал-вставил", это реализуемо?
7. Сделал минимальные эффекты для черных элементов. Для белых не приходит в голову, что и сделать.
P.S. Шрифты заменил.

[KazeZlat]

Станислав Ботев:
3. Вот поэтому я и говорил сначала изучить теорию флексбокса. Я смотрел вот эту серию видео, но она на английском, и если осваивать в один присест (как сделал я), то очень раздражает напоминание о пройденом материале.
4. У вас этот сайдбар:

• Либо должен входить внутрь <main>, а сам <main> должен занимать всю оставшуюся от левого белого сайдбара ширину и иметь справа padding размером в ширину правого сайдбара
  
• Либо <main> должен занимать всю ширину между сайдбарами, а сам сайдбар должен прилипнуть к правому краю.

Фоновая картинка принадлежит кстати слайду, и для каждого слайда если я правильно понял должна быть своя. То есть фоновая картинка должна быть фоновой для <main>
5. Для первого макета вы тяжелую ношу взяли, поэтому пока лучше сделайте просто один слайд. А когда руки зачешутся - найдите плагин, который легко нагуглить по запросу "jQuery fullscreen slider" (или использовать этот из ответа Алекс Глебов) и сделайте по подобию. Копипастой скорее всего не отделаетесь, но если поймете логику реализации верстки для слайдера, то проблем возникнуть не должно.
7. Ну к примеру

element:hover {
    filter: brightness(0.2);
}

P.S. Добавьте тень к шрифту, а то совсем не читабельно. В макете она есть.

[Станислав Ботев]

KazeZlat:
Благодарю за скорый ответ.
4. Вариант с main посередине мне больше нравится. Тогда получается, что у меня трехколоночный макет, где два сайдбара по бокам в пикселях, а основной блок в процентах?
P.S. Не разобрался как адекватно наложить эту тень внизу экрана.

Answer 2

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

Это очень сложный макет для 1 раза
alvarotrigo.com/fullPage/examples/navigationV.html...
он должен так работать
высота секции должна подстраиваться под размер экрана. И адаптив нужно делать не только под ширину, но и под высоту.

вы пишите про гриды и ие7
caniuse.com/#search=grid
смотрите caniuse
гриды не все последние версии браузеров поддерживают, их только через неск лет можно начинать юзать.
ие7 даже inline-block не полностью поддерживает. и он уже умер как браузер
дальше ие10 вобще уже не стоит лазить.
Если используете флексы, то только с автопрефиксером.

2. для body margin: 0

Comments

[Станислав Ботев]

Большое спасибо за комментарий.
Так понимаю, что надо будет прочитать документацию для этого fullpage.js. JS знаю крайне плохо, на уровне вывода alert. Стараюсь не распыляться на все три языка сразу (HTML, CSS, JS), а наработать опыт верстки с первыми двумя, потому что уже понял, что с JS "чем дальше в лес, тем больше дров".
С флексами не совсем удается. Понял, как размещать блоки, однако с этим макетом это так не работает. Нужно разместить блоки разных размеров в разных местах. Неужели надо делать пустые и задавать размеры?