Victor-ru

Оцените, пожалуйста, качество верстки

Рекомендованные сообщения

Здравствуйте. Прошу оценить верстку и указать на ошибки. 

Макет без адаптивности. Верстал по размерам из фотошопа.

index.html

main.css

сайт на хосте - http://www.testwebtest.h1n.ru/

Изменено пользователем Victor-ru

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

спасибо за ответ))) В макете был статичный размер 1900рх. Как я понял это только вариант под такие экраны. А по коду какие нибудь замечания есть? 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
2 часа назад, Victor-ru сказал:

 Прошу оценить верстку и указать на ошибки

 

В блоке columns можно было сделать justify-content:space-around; и добавить паддинги, а не сдвигать элементы позиционированием.

Избегайте использовать фиксированную высоту. Что будет с версткой если изменятся размеры или количество внутренних элементов?

Не используйте абсолютное позиционирование там где это не нужно всю вашу страницу можно было сверстать вообще без использования позиционирования. Если вы планируете дальше изучать адаптивную верстку то эту страничку будет очень тяжело адаптировать.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
39 минут назад, AlexZaw сказал:

Избегайте использовать фиксированную высоту.

Спасибо. А если вместо height: использовать min-height, для соответствия размерам макета. Будет ли такой вариант правильный?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
9 минут назад, Victor-ru сказал:

А если вместо height: использовать min-height

min-height уже получше, если вы уверены что элемент не будет меньше указанного размера. Какие-либо родительские элементы лучше вообще не ограничивать в размерах ни в максимальных ни в минимальных,  пусть они зависят от контента. А недостающие размеры можно добить паддингами и/или маржинами

Есть конечно случаи когда можно и нужно задавать размеры, но они не так часто встречаются.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
9 часов назад, Victor-ru сказал:

Исправил ошибки. Надеюсь правильно все понял)))

Было бы лучше, если бы вы исправленную версию файла стилей внедрили бы на сайт,  а не просто выложили сюда

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
11 минут назад, Victor-ru сказал:

Обновил, теперь на хосте последняя версия

Уже лучше. Только для top-menu я бы все-таки не задавал ширину, тем более фиксированную, оно ведь может как увеличится, так и уменьшиться, да и использовать margin-left c таким значением тоже не есть гуд, лучше уж использовать float:right; и отодвинуть меню с помощью margin-right, тоже в принципе относится и к остальным элементам с такими отступами.

Для ul с классом buttons_location_menu можно убрать фиксированную ширину, сделать обертку, задать обертке display:inlline-block; и задать для menu-header  text-align:center; тогда список будет по центру.

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

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

зы. Все мои советы являются не больше чем именно советами, а отнюдь не рекомендацией к действию, это то, как бы сделал я, но все, опять же, зависит от конкретной ситуации и собственных привычек/предпочтений. В верстке нет единственно правильного подхода 🙂

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Похожие публикации

    • Автор: S.Stas
      Необходимо сверстать такую вот форму. Понятия не имею что делать с нижней частью бордера чтобы он прирывался. Зараннее благодарен добрым людям!

    • Автор: deekep
      Как запустить файл типа index.php на пк?