Консультации и оценка качества html-вёрстки (бесплатно)

[nyan]

Мержевич - хорошо, но Мейера почитайте («CSS-каскадные таблицы стилей. Подробное руководство» Эрик А. Мейер).

Почитаю, спасибо, как раз недавно раздобыл данный труд, но читать пока не начал.

 

[Drap41k]

Моя первая страница, дайте, пожалуйста, оценку -

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

#header - почему бы не объединить верхний марджин и верхний паддинг (оставить только паддинг, равный 90px)

#content - дублировать семейство шрифтов не обязательно, т.к. оно совпадает с семейством на body.
Правый паддинг на контенте лучше перенести на родителя - #main

Если ты уже дал класс alignleft на имагу в контенте, то почему в css обращаешься к ней глобально #main img ? сайт редко бывает из одной страницы, не думаю, что все имаги в #main должны выравниваться по левому краю

в боковой навигации сайдбара предусмотреть отступ справа, для случаев, когда текста будет больше

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Также, на всякий случай, я б дал бы боковые отступы на хедер и футер.

В остальном, если это реально твоя первая страничка - отлично

 

[nyan]

#header - почему бы не объединить верхний марджин и верхний паддинг (оставить только паддинг, равный 90px)

#content - дублировать семейство шрифтов не обязательно, т.к. оно совпадает с семейством на body.
Правый паддинг на контенте лучше перенести на родителя - #main

Если ты уже дал класс alignleft на имагу в контенте, то почему в css обращаешься к ней глобально #main img ? сайт редко бывает из одной страницы, не думаю, что все имаги в #main должны выравниваться по левому краю

в боковой навигации сайдбара предусмотреть отступ справа, для случаев, когда текста будет больше

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Также, на всякий случай, я б дал бы боковые отступы на хедер и футер.

В остальном, если это реально твоя первая страничка - отлично

Спасибо большое за замечания, семейство шрифтов лишнее убрал, свойства для img перезадал через класс, забыл про эти моменты. Падинг с контента убрал, на маин запилил.

в хедере марджином двигается фоновое изображение и заголовок, а паддингом только заголовок, другого способа просто не придумал ими управлять.

На счет боковой навигации, добавил текста, падинг не добавлял пока, посмотрите, пожалуйста, отступ должен быть больше от текста до правой границы пункта меню?

 

[Del]

в хедере марджином двигается фоновое изображение и заголовок, а паддингом только заголовок, другого способа просто не придумал ими управлять.

Логотип не должен быть фоновым изображением #header, т.к. является отдельной сущностью. Его нужно реализовывать либо:

1. любой image replacement technique, в идеале - вначале выводим текстовое лого, шрифтом приближённым к шрифту логотипа, а поверх него, закрывая, выводим изображение через :before
2. через img с текстовым описание лого в alt, шрифтом приближённым к шрифту логотипа, в этом случае лого будет выведено при печати, что является плюсом.

И логотип и заголовок внутри #header не зависят друг от друга и от других элементов что потенциально там могут появится. Поэтому оба их нужно размещать через абсолютное позиционирование.

На счет боковой навигации, добавил текста, падинг не добавлял пока, посмотрите, пожалуйста, отступ должен быть больше от текста до правой границы пункта меню?

Да, больше, некрасиво же.

 

[nyan]

Логотип не должен быть фоновым изображением #header, т.к. является отдельной сущностью. Его нужно реализовывать либо:

1. любой image replacement technique, в идеале - вначале выводим текстовое лого, шрифтом приближённым к шрифту логотипа, а поверх него, закрывая, выводим изображение через :before
2. через img с текстовым описание лого в alt, шрифтом приближённым к шрифту логотипа, в этом случае лого будет выведено при печати, что является плюсом.

И логотип и заголовок внутри #header не зависят друг от друга и от других элементов что потенциально там могут появится. Поэтому оба их нужно размещать через абсолютное позиционирование.


Да, больше, некрасиво же.

Спасибо, учту на будущее.

 

[Drap41k]

На счет боковой навигации, добавил текста, падинг не добавлял пока, посмотрите, пожалуйста, отступ должен быть больше от текста до правой границы пункта меню?

Дело в том, что сейчас прописаны "широкие" буквы, и из-за этого получилось так, что текст не прилипает к правому краю, но если там будет слово с буквами j i l - текст может полностью "прилипнуть" к краю

в хедере марджином двигается фоновое изображение и заголовок, а паддингом только заголовок, другого способа просто не придумал ими управлять.

можно подвинуть БГ за счет бэкграунд-позиции по оси Y. т.е. координаты БГ будут такими 80px 50px
Но если же этот домик действительно является логотипом, а не элементом декора - то Del прав.

 

[nyan]

Вторая страница -

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

 

[Drap41k]

Вторая страница -

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

1) Структура построена неверно. Сделай во враппере #header, #main и #footer. В Хедере будет лежать логотип, баннер и навигашка (на которую не помешает дать класс, например #nav)
Так еще будет правильней и потому, что логотип будет лежать первый коду

В #main будет лежать #content и #sidebar (в котором будет лежать боковая навигация)

если уж ты реализовал баннер текстом, то либо сделай его не с фиксированной высотой, либо, если определенная высота важна - то сделай хотя бы, чтобы обрезался текст при

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

2) #content img - тот же баг, что был и в прошлой страничке, дай класс и флотни класс относительно контента, а не имаги в контенте глобально. Также, не помешают отступы у имаги слева и снизу.

3) Не рекомендую давать верхний и нижний марджин на футере, лучше дай паддинги

4) Обычно .design в футере - это ссылкаю Также, дай отступ слева от нее

5) Логотип. Лучше будет ссылку логотипа завернуть в стронг и перенести класс logo на него. Это нужно для тех случаев, когда логотип может быть не ссылкой, например хоум страничка, в моем случае значительно проще удалить ссылку из логотипа.

6) #wrapper-frame ul - тут дать более логичный класс, например .side-nav и, как я уже писал выше, поместить в сайдбар.
Если стремишься в верстке к pixel perfect - лучше обнули дефолтные стили у списка (list-style:none т.к. они не кроссбраузерны. Буллеты у пунктов списка лучше вырезать картинкой и повесить бекграундом на li, задав левый паддинг, чтобы текст не налазил на буллеты.
(Если же тебе не важен браузер ИЕ6-7 - то можно не на бекграунд вешать а на псевдоэлемент li:before, но я думаю об этом пока рано говорить))
Также опять баг с боковым прилипанием текста в этом списке - дай правый паддинг на родителя.... Можно на #sidebar дать.
По моему мнению ссылки в боковой навигации значительно лучше выглядят, если задать на них display:block и боковые паддинги небольшие, а то сейчас серый ховер вообще корявый)

 

[nyan]

1) Структура построена неверно. Сделай во враппере #header, #main и #footer. В Хедере будет лежать логотип, баннер и навигашка (на которую не помешает дать класс, например #nav)
Так еще будет правильней и потому, что логотип будет лежать первый коду

В #main будет лежать #content и #sidebar (в котором будет лежать боковая навигация)

если уж ты реализовал баннер текстом, то либо сделай его не с фиксированной высотой, либо, если определенная высота важна - то сделай хотя бы, чтобы обрезался текст при переполнении


2) #content img - тот же баг, что был и в прошлой страничке, дай класс и флотни класс относительно контента, а не имаги в контенте глобально. Также, не помешают отступы у имаги слева и снизу.

3) Не рекомендую давать верхний и нижний марджин на футере, лучше дай паддинги

4) Обычно .design в футере - это ссылкаю Также, дай отступ слева от нее

5) Логотип. Лучше будет ссылку логотипа завернуть в стронг и перенести класс logo на него. Это нужно для тех случаев, когда логотип может быть не ссылкой, например хоум страничка, в моем случае значительно проще удалить ссылку из логотипа.

6) #wrapper-frame ul - тут дать более логичный класс, например .side-nav и, как я уже писал выше, поместить в сайдбар.
Если стремишься в верстке к pixel perfect - лучше обнули дефолтные стили у списка (list-style:none т.к. они не кроссбраузерны. Буллеты у пунктов списка лучше вырезать картинкой и повесить бекграундом на li, задав левый паддинг, чтобы текст не налазил на буллеты.
(Если же тебе не важен браузер ИЕ6-7 - то можно не на бекграунд вешать а на псевдоэлемент li:before, но я думаю об этом пока рано говорить))
Также опять баг с боковым прилипанием текста в этом списке - дай правый паддинг на родителя.... Можно на #sidebar дать.
По моему мнению ссылки в боковой навигации значительно лучше выглядят, если задать на них display:block и боковые паддинги небольшие, а то сейчас серый ховер вообще корявый)

Большое спасибо за замечания, исправил.

Третья моя страница -

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

 

[Drap41k]

Третья моя страница -

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

div#nav - это не похоже на основную навигацию сайта, поэтому я б такой айди скорее всего дал бы на то, что сейчас add-nav. Ну хотя не критично.
Можно упростить структуру сделать не div#nav>ul>li, а ul#nav>li . На улку даешь text-align:right; , а li делаешь display: inline-block;

your company slogan here - я бы завернул в стронг с классом slogan - чисто семантического усиления

/bg-upper.jpg
bg-lower.jpg эти бекграунды можно вырезать одним пикселем по ширине.
Также, рекомендовал бы их в спрайт запихнуть

.add-nav li - отступ слева ну не очень хорошо в данном случае, лучше уже на родителе паддинг слева дать больше, зато регулировать расстояния между пунктами можно без опасений съезжания всех пунктов относительно левой точки. Ну хз, я наверное не очень понятно объяснил)

#content img - опять! , почему глобально?

#sidebar-padding - лишний блок, паддинги дать на сайдбар, а заголовок выше вытянуть минусовыми боковыми марджинами.
Кстати я б не стал заголовок h3 в сайдбаре так застайливать, скорее всего завернул бы в блок .heading и зайстайлил бы уже его

#sidebar h4 - пропиши размеры фонта и лайнхейт, т.к. разные браузеры сделают размер по своим соображениям (Например величайший браузер IE7 проставил тебе вот такие размеры заголовков -

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

)

кстати, заметил, что ты часто ставишь лайн-хейт на 2 пикселя больше размера фонта - лучше 3 пикселя делай разницу, в таких браузерах как ИЕ может резаться шрифт



Кстати, то, что ты исправил в прошлых проектах - тоже лучше показывать, т.к. из практики - когда что-то фиксишь - ломается что-то другое

 

[_KurT_]

Собственно продолжая тему БЭМ и АНБ.
Получается что много тех правил, прописанных в шаблоне boilerplate вверху (или собственных наработок), мне надо удалить и прописывать их каждому классу отдельно, где это нужно, так ? Получается для каждой ссылки мне надо прописать text-decoration: none; и потом :hover{text-decoration: underline;}, списки, заголовки и инпуты так же.
Еще по поводу шрифтов, с ними работаем так же как и раньше(без БЭМ и АНБ) ?

 

[Del]

Получается что много тех правил, прописанных в шаблоне boilerplate вверху (или собственных наработок), мне надо удалить и прописывать их каждому классу отдельно, где это нужно, так ?

Еще по поводу шрифтов, с ними работаем так же как и раньше(без БЭМ и АНБ) ?

Можно примеры: о каких правилах речь и как сейчас вы работаете со шрифтами?

 

[_KurT_]

Можно примеры: о каких правилах речь и как сейчас вы работаете со шрифтами?

Пример тут в css-файле:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

ссылки, строки 97-120
заголовки, строки 130-162
списки, строки 286-299

Со шрифтами: в body правило font для большинства элементов, там где меняется шрифт - конкретному классу или группе классов прописываю font.

 

[Del]

Собственно продолжая тему БЭМ и АНБ.
Получается что много тех правил, прописанных в шаблоне boilerplate вверху (или собственных наработок), мне надо удалить и прописывать их каждому классу отдельно, где это нужно, так ? Получается для каждой ссылки мне надо прописать text-decoration: none; и потом :hover{text-decoration: underline;}, списки, заголовки и инпуты так же.
Еще по поводу шрифтов, с ними работаем так же как и раньше(без БЭМ и АНБ) ?

Мне потребовалось 5 месяцев

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

прежде чем я наконец могу вам уверенно ответить.

Это один из тех вопросов, на которые я сам не мог найти ответа в статьях и докладах по BEM, спрашивал Харисова, но всё равно не мог сформулировать, понять, пока не прошёл через всё сам и не понял сам.

По-сути у Яндекса есть только один сайт где мы можем видеть какие-то контентные стили - это

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

. Я смотрел её, но не был уверен что понимаю верно. Набив свои шишки, вернулся к ней и понял что всё правильно сделал.

Как быть с блоками где смешиваются базовые стили оформления текста и стили для текста что приходит из админки?
1. Не нужно оборачивать всё блоком куда приходят стили контента.
2. У вас должен быть один блок с классом куда навешан каскад для текста, и этот класс вы должны добавлять к нужным блокам. (Яндекс-way, у них это .b-text)
Или у вас есть блок типа section.entry-content - где прописаны стили для контента и этот блок вы вставляете там где нужен вывод из визига.

 

[John.Smith]

Приветствую!
Оцените, пожалуйста, вёрстку. Я начинающий, и это пока самое сложное что делал.
Сделано не в полной мере, так как не владею JS. Но по части вёрстки - вроде всё.

Задание взято отсюда: h t t p ://htmlbook.r u /practical/poshagovaya-forma

Вот моё решение: h t t p ://jsfiddle.n e t /ZPE87/4/embedded/result/

 

[Del]

Приветствую!
Оцените, пожалуйста, вёрстку. Я начинающий, и это пока самое сложное что делал.
Сделано не в полной мере, так как не владею JS. Но по части вёрстки - вроде всё.

Задание взято отсюда:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Вот моё решение:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Представьте себе что это ваше первое "настоящее" задание, за которое вам заплатят деньги.

ТЗ из htmlbook:

1. Валидная вёрстка на HTML5.
2. Корректное отображение в браузерах IE9, Opera 11.10, Firefox 5, Safari 5, Chrome 12 и их старших версиях.
3. Работоспособность формы в IE8.
4. Допустимы незначительные отклонения от макета при отображении в разных браузерах.

Все эти пункты - не выполнены. Всё, таск провален, заказчик в гневе (теперь ему нужно срочно искать нового исполнителя), вы остаётесь без денег, с потерянным временем и негативным отзывом в профиле фриланс-биржы.

Теперь по вёрстке:
HTML:

1. Зачем нужна ссылка "Заполнить форму"? Её нет в макетах, и в реальных сайтах таких вещей тоже нужно стараться избегать.
2. Стремление использовать html5-теги - похвально, но не нужно их тулить туда, где они не нужны. Внутри формы не должно быть nav и article
3. Почему внутри nav не список?
4. По струтктуре: выключаем css и смотрим:
   • Почему навигация по табам формы (Описание/Ингредиенты/Параметры/Бокалы) находится внутри табов, а не над ними и к тому же продублирована в каждом табе? Почему она не кликабельна?
   • Кнопка загрузки фото - должна быть input[file], а не просто кнопка (type=button)
   • Заголовки табов - должен быть явно не <p>
   • Кнопка сабмита данных и перехода на следующий таб - должен быть input[submit], а не ссылка
   • Тоже самое - касательно сабмита данных всей формы
   • На втором табе - нет заголовка "Украшение" над колонкой таблицы
5. Неверно заполнены имена элементов форм, такая форма не сможет передать корректные данные в бекенд
6. Почему не работает resize элементов форм? Зачем его выключили? При том что уголки резайза нарисованы и выводятся.
7. В таблицах нужно использовать th для заголовков

CSS:

1. Частая ошибка: отступ у блоков должен реализовываться через margin у элементов блоков, а от самих блоков. В даннном случае речь о margin-top у fieldset, он должен быть у form
2. Где доп. правила с вендорными префиксами для css3-свойств? Ну т.е. -webkit-gradient,-webkit-linear-gradient и т.п?
3. Иконки в навигации нужно было занести в спрайт
4. Не очень понравилось создание колонок с помощью кучи pos:abs правил, тут смело можно было таблицу использовать

Т.к. оформление из дизайна практически не было перенесно в том что касалось кастомных стилей, то больше тут смотреть особо нечего - стандартные элементы форм и все.

Косяки внешнего вида, кроссбраузерности, несоответсвия макету, отсутствия функционала - я писать не стал.


Btw, на WSG Russia вышли 2 потрясающие статьи по основам вёрстки, настоятельно рекомендуеся к прочтению всем:

• Тільки зареєстровані користувачі бачать весь контент у цьому розділі
• Тільки зареєстровані користувачі бачать весь контент у цьому розділі

 

[John.Smith]

Спасибо за развёрнутый ответ!

Теперь буду отбиваться

По первому пункту из задания.
html-код проходит валидацию на W3C. Этого не достаточно?

HTML:
1. Ссылка "Заполнить форму" - это вынужденный ход. Вся форма выполнена на одной странице, и идёт игра со скрытием фреймсетов через свойство display. Я не придумал как в начале сделать видимым первый фреймсет, а потом скрыть его при переходе к следующим фреймсетам. Пробовал по-разному, но всё никак. Поэтому решил сделать начало со ссылки, которая потом скрывается. Согласен что это не правильно.
2. Не знал. Использовал их чтобы не использовать DIV с классом. Так ведь короче.
3. Так короче html-код. А чем это плохо?
4. По структуре:
- Согласен, кроме кликабельности. Зачем дублировать фонкционал? Табы указывают где находишься. А переход осуществаяеться с помощью специальной кнопки внизу.
- Это да. Но кнопка input[file] плохо видоизменяеться через CSS. Тут, видимо нужен JS, коим не владею. Поэтому сделал input[button] чтобы хоть с виду похоже было.
- Согласен, упустил. Тут должен быть <h...>.
- Почему? Форма ведь не оканчивается. Это только переход на следующий филдсет.
- Так и есть. В конце формы есть input[submit] "Отправить".
- Его нет и в задании. Есть всплывающая подсказка при наведении курсора на клубничку.
5. Что не так? Не пойму.
6. Отключил как раз чтобы не были видны уголки. Чтобы максимально близко к макету было. Я их не вижу. А вы в какой ОС/Браузере смотрите?
7. Да, упустил.

CSS:
1. Не знал. А почему?
2. Признаюсь, про них забыл.
3. Пробовал, но не получалось. Только сейчас понял почему.
4. Да, но ведь это не табличные данные. Или имеется ввиду использовать не табличные теги с display:table, cell... ?

Отдельное спасибо за ссылки. Много интересного.

 

[cris7iano]

прошу оценить верстку

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

 

[Del]

1. Ссылка "Заполнить форму" - это вынужденный ход. Вся форма выполнена на одной странице, и идёт игра со скрытием фреймсетов через свойство display. Я не придумал как в начале сделать видимым первый фреймсет, а потом скрыть его при переходе к следующим фреймсетам. Пробовал по-разному, но всё никак. Поэтому решил сделать начало со ссылки, которая потом скрывается. Согласен что это не правильно.

Через JS.
На jQuery через show(), hide() такое очень просто сделать.

2. Не знал. Использовал их чтобы не использовать DIV с классом. Так ведь короче.

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

3. Так короче html-код. А чем это плохо?

Семантика и SEO. Списки - это классика.

4. По структуре:
- Согласен, кроме кликабельности. Зачем дублировать фонкционал?

Для юзабилити. В предметах окружающего вас быта - много избыточности, но они удобны.

Это да. Но кнопка input[file] плохо видоизменяеться через CSS. Тут, видимо нужен JS, коим не владею.

Есть готовые плагины. Не нужно придумывать велосипеды, просто используйте.

- Почему? Форма ведь не оканчивается. Это только переход на следующий филдсет.

Чтоб без JS работало.

Так и есть. В конце формы есть input[submit] "Отправить".

Действительно. Значит померещилось.

Что не так? Не пойму.

Вы в бэкенд (PHP например) передайте данные вашей формы - увидите. Просто например в конце выводите всё что засабмитил юзер - вас ждёт сюрприз.

6. Отключил как раз чтобы не были видны уголки. Чтобы максимально близко к макету было. Я их не вижу. А вы в какой ОС/Браузере смотрите?

В любом практически. По дефолту сейчас у textarea включен resize. Вы его выключили. Но при это на макетах есть пиктограмма резайза у формы, которую вы заботливо вставили бекграундом. Юзер смотрит на неё, хочет потянуть - а оно не тянется! Это только пиктограмма, это не элемент UI браузера, ресайз выключен!

1. Не знал. А почему?

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

4. Да, но ведь это не табличные данные. Или имеется ввиду использовать не табличные теги с display:table, cell... ?

Вполне себе табличные. Таблица которая заполняется.

прошу оценить верстку

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Белый экран, и пустота в html

 

[John.Smith]

В предметах окружающего вас быта - много избыточности, но они удобны.

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

Вы в бэкенд (PHP например) передайте данные вашей формы - увидите. Просто например в конце выводите всё что засабмитил юзер - вас ждёт сюрприз.

Если бы умел... С бэкендом вообще не дружу. Пока-что...

В любом практически. По дефолту сейчас у textarea включен resize. Вы его выключили. Но при это на макетах есть пиктограмма резайза у формы, которую вы заботливо вставили бекграундом. Юзер смотрит на неё, хочет потянуть - а оно не тянется! Это только пиктограмма, это не элемент UI браузера, ресайз выключен!

Я понял в чём дело. Эти пиктограммы ресайза я с самого начала воспринял как декоративные элементы. Чисто для красоты. Как в уголках фреймсетов. Ведь зачем полю input ресайз? Это же не textarea.