Гуру верстки, оцените первый сайт. Почему он едет при зуме?

Question

[rojer89]

Всем привет!
После месяцев теории наконец сделал свой первый сайт, макет которого увидел на тостере. До этого только повторял увиденное в видео уроках и баловался с разноцветными div`ами. Параллельно учу JS и препроцессоры (сайт сделан на SASS).
По макету кажется неплохо вышел, но вот при увеличении начинаются проблемы. При 150% и более слайдер с хедером начинают вылазить вправо. В чем может быть проблема? Как следует проверять свою верстку? Какой максимальный/минимальный зум она должна выдерживать?
Буду благодарен за критику и найденные ошибки.

my-first-site.ucoz.net/index.html

Исходники
https://goo.gl/OnlLzS

Comments

[rojer89]

Максим Зайцев: исправился

[DenJel]

Дальше хедера не смотрел, ну: 1) container обычно вкладывается внутрь тематического блока, а не наоборот, в вашем случае можно было вообще обойтись без него, а все применить на 1 блок, зачем вам лишние DOM элементы 2) верстайте html5 элементами, поисковики их лучше индексируют div#header замените просто на header 3) забываем, что такое float и clearfix, появилось замечательное свойство display: flex (если не нужна поддержка древних ИЕ ессно) 4) при инспектировании элементов не должно быть белых пространств (если элементы не в position absolute или fixed). А так впринципе для первой верстки неплохо

[rojer89]

DenJel: Спасибо!
1), 2), 3) - набрался этого из видео уроков. Буду исправляться)
4) Не смог найти белые пространства в инспекторе. Если не трудно, подскажите между какими элементами оно появляется.

[Александр Голубев]

DenJel: а не рано отказываться от float в пользу flex?

Answer 1

[deeppines]

"...при увеличении начинаются проблемы. ...В чем может быть проблема?"

При увеличении до 200% (процент я так понял зависит от разрешения экрана) начинается вылезание, потому что у класса container фиксированная ширина в 1024px.
Макет не адаптивный и не резиновый, потому шаг вправо шаг влево и поехала верстка.

"Как следует проверять свою верстку?"

• Изменением размера окна браузера;
  
• Увеличением размера шрифта в настройках браузера;
  
• Переполнением контента;
  

"Какой максимальный/минимальный зум она должна выдерживать?"

А вот тут хз, самому стало интересно.

Comments

[rojer89]

Не пойму в чем проблема, кажется гугл диск правильно настроен. А через маил.ру открывается? https://goo.gl/LX1bKr

[deeppines]

rojer89: Та, нормально открылось, только ссылку сразу нужно было крепить или на фрихостинг заливать.

Answer 2

[Tlito]

а вас не адаптивный сайт. в нем нету media-запросов в css
рекомендую вам попробовать первый сайт с готовым адаптивным диайном на друпал.
в моем блоге в графе HTML/CSS есть тема про адаптивный дизайн. сумейте поставить друпал на хостинг и скачайте любую адаптивную тему, а дальше верстайте нужный вам макет (а потом редактируйте media.css) для вас рекоендуется Professional Responsive Theme - друпал. или Media Responsive Theme

Answer 3

[rojer89]

То есть такое поведение для фиксированной верстке можно считать нормальным?
Больше в глаза ничего не бросилось? Интересны ошибки в моей верстке или замечания по ней.

Answer 4

[dk-web]

Вставлю свою копейку. Не совсем по верстке, но тем не менее.
В слайдере.. если с последнего изображения кликнуть на первое - то мотается все назад - а по идее скрипт должен определить позицию последнюю и переключить "вперед" на первый...

Comments

[rojer89]

Это довольно легко меняется. Я этому значения не предавал.