Что неправильно в верстке?

Question

[Станислав Галин]

Привет, недавно я сверстал макет для тренировки, можете подсказать какие основные ошибки в верстке ? И если не тяжело сказать советы на будущее по верстке.

Ссылка: template-2.esy.es

Спасибо за внимание

Comments

[sergey]

не работающее меню к примеру

Answer 1

[Ivanq]

1. Картинка не нажимается
2. Весь блок лучше сделать кликабельным
3. Указатель места здесь не очень подходит
4. Тег <i> нужен для форматирования текста, а не для иконок
5. Лучше сделать для <article> margin со всех сторон, а не только справа и снизу

Comments

[Станислав Галин]

Я не понимаю про какой указатель места вы говорите
Я знаю много кто использует тег <і> доя иконок, ведь в html нету специального тега для иконок
Для чего делать для margin о всем сторонам если они будут всхлопыватся ?

[Ivanq]

Станислав Галин:
1. Указатель, который стоит перед "Movies"
2. <img> ??? А может, свой тег <icon> ?
3. Слева и справа от контента разные отступы

[Станислав Галин]

Ivanq:
1. Этот указатель был в макете, вот я и сделал как в макете
2. Я уже не раз использую тег и это первый раз что кто-то говорит что этот тег не подходит для иконок
3.Там разные отступы потому что в последней колонке я не указал нулевой правый отступ

[Ivanq]

Станислав Галин:
1. Ну ладно
2. Может быть. Но если там текст, то не получится нормально
3. Так исправьте!

[Станислав Галин]

Ivanq: С отступами исправил, спасибо что сказали.
А так в общем какие еще ошибки заметили ?

[Ivanq]

Станислав Галин: Это уже к заказчику: лично мне, как пользователю, будет казаться, что значок и первого пункта обозначает место на карте, а не группу.
А это уже к вам: там на сайте у картинок неправильный отступ справа. Как вам уже сказали, не работает подгрузка контента(хотя возможно, это еще не риализовано) и JS для добавления элементов - это круто )

[Станислав Галин]

Ivanq:
Ну подгрузкой контента занимается программист, а не верстальщик, поэтому я это и не реализовал.А JS для добавления элементом используется чтобы сделать такого типа сетку, так как если я реализовал эту сетку по-другому, то потом поддерживать сайт было б накладно

[Ivanq]

Станислав Галин: Делать сетку absolute'ами плохо. Лучше создать четыре столбца и в них по очереди добавлять данные

[Станислав Галин]

Ivanq: я сперва так сделал, но потом подумал, что так добавлять данные будет не очень удобно и использовал для такой сетки плагин Masonry

Answer 2

[Максим Тимофеев]

Текст нечитабельный, подгрузка контента не работает. Картинка не кликательная. Зачем js для формирования плитки? Ради анимации? А при 5-й подгрузке контента браузер кашлять не начнет?
header - это тег для заглавия страницы, а не блока, это же касается и footer.
абсолютное позиционирование - это зло, если использовать его без необходимости. Там можно сверстать все релятивно.
Я бы за такое не платил. Применение тех или иных методов, должно быть оправдано. А тут все сделано без идеи.

Comments

[Станислав Галин]

Это не продакшин, это макет, здесь текст не должен быть читабельный, js нужен для формирования именно такого вида сетки,потому что если сделать обычным css то программисту будет накладно реализовать добавление других блоков.
Header и footer также можна использоватьв блоках

[Максим Тимофеев]

Станислав Галин: "программисту будет накладно реализовать добавление других блоков" - это почему?

[Максим Тимофеев]

Денис Арсланбеков: "человек про верстку спрашивает" - а абсолютное позиционирование, разве не аспект верстки?

[Станислав Галин]

Максим Тимофеев: Надо будет сделать 4 колонки чтобы сетка была такой-же.
И добавлять контент в каждую колонку по-моему не очень правильно.
С использованием js нету никаких колонок и добавлять контент легче.

[Максим Тимофеев]

Станислав Галин: делать надо не 4 колонки, а зависимо от ширины дисплея. При этом элементы должны быть inline и нет проблем. А в Вашем случае любые изменения в дизайне - будут головной болью.

[Максим Тимофеев]

Станислав Галин: Обратите внимание на крупные сайты, интернет магазины и т.д. Там никто не лепит абсолютное позиционирование без нужды. Посмотрите css фреймворки и сетками, там тоже нет такой лабуды как у Вас. Это красиво, но абсолютно не прикладная чепуха.
Для проекта - вот запилил себе сайт - пойдет.

[Станислав Галин]

Максим Тимофеев: Почему изменения в дизайне будет головной болью ?

[Максим Тимофеев]

Потому что я не раз сталкивался с тем, что это все не годится для малейших изменений. Например станет задача выводить равными по высоте блоками, добавить сайдбар и на ipad сделать только 2 колонки. И легче все снести, чем доделать.

[Станислав Галин]

Максим Тимофеев: та позицирование не статическое, его постоянно меняет плагин и если нужно было б внести какие-то изменения то это можно было сделать