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

Доброго времени суток.
Я начал верстать свой первый макет. Вырезал картинки и иконки в фотошопе. Разбил визуально на блоки, принялся за дело. В итоге, ужасно не нравится результат.
Вопросы:
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", например, если нет страницы с таким названием или файлов для скачивания? Нужна ли иконкам-кнопкам анимация?


Не то, чтобы попиксельно размещать блоки и элементы это "фу". Скорее, мне кажется, должны быть способы делать это аккуратнее и изящнее.
8e424a0bb2264e08a9d5f0b14b8c2848.png
  • Вопрос задан
  • 375 просмотров
Решения вопроса 1
KazeZlat
@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
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
SkiperX
@SkiperX Куратор тега CSS
Это очень сложный макет для 1 раза
alvarotrigo.com/fullPage/examples/navigationV.html...
он должен так работать
высота секции должна подстраиваться под размер экрана. И адаптив нужно делать не только под ширину, но и под высоту.

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

2. для body margin: 0
Ответ написан
Ваш ответ на вопрос

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

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