Оцените верстку

[kompolom]

Первый раз верстал более-менее сложный макет, который взял с этого же форума.

http://forum.htmlboo...showtopic=27440 отсюда.

сверстанный макет - http://kompolom.ru/p...samples/templ1/

Большая просьба, дать конструктивную критику, что получилось, что нет, и как правильней.

[Bobikys]

Ябпокормил шрифты ... ссылка вверхнем левом углу подчеркнута ...текст не соответствует макету... в левом нижнем углу *|* между ссылками не того цвета что в макете и эти *ссылки* оформленны не как ссылки ... кто нашел еще визуальное несоответствие ?

[uuu]

сыр с травкой надо сделать фоном, а не картинкой

у тебя 2 <header> на странице, я бы их объединил в один

#header вылезает за ширину макета из-за padding-left

Не нравится как вы сверстали и расположили блоки в шапке. Интересная статья: http://habrahabr.ru/post/160177/

Название сайта на логотипе лучше выровнять через line-height и text-align: center, сейчас он у вас не по центру. И вроде в макете градиентная заливка.

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

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

Левое меню в форме заметки надо тоже сделать фоном.

Вот давайте посмотрим на footer, например вам надо будет добавить картинку перед списком ссылок (который надо оформить как список, а не абзац текста ), но вы не сможете просто добавить туда картинку, т.к. #footermenu почему-то занимает весь подвал. К счетчикам вы применили float: right, но потом вынесли их полностью за пределы блока, тоже нелогично и потом придется все переделывать.

Кстати в html5 очень много тегов, есть свои теги и для навигации и для контента и для блоков, не относящихся к основному содержанию сайта.

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

[pashkje]

Не буду углубляться в исходники сайта, но скажу одно. Сделай все ссылки понятными, что это ссылка. То есть при наведении чтобы они подчеркивались или меняли цвет.

[kompolom]

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

Спасибо, за развернутый ответ. Конечно интересует. И еще,

сыр с травкой надо сделать фоном, а не картинкой

Почему так лучше?

[nebovluje]

сыр с травкой надо сделать фоном, а не картинкой

Почему так лучше?

Для кликабельности webreference.ru, я думаю.

Edited January 28, 2013 by nebovluje

[stan07]

кликабельной можно сдлать и картинку

[uuu]

Почему так лучше?

Потому что картинка относится к оформлению страницы.

http://www.xiper.net/learn/tegofenshuj/img-vs-backround-image.html

И, кстати да, надо webreference.ru сделать кликабельным, причем не только текст, но и весь блок.

Визуальные отличия:

- шрифт и размер шрифта

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

-сыр сдвинут влево

-левая менюшка не по центру столбца, смещена влево.

-верхнее меню слишком плотно прижато друг к другу

- большое расстояние между колонками

- RSS слишком зажат в угол

как-то так

[kompolom]

Спасибо за советы, буду исправлять

[danik.html]

Прошу прощения, если что-то уже говорили, вот мои рекомендации:

- Ховер эффекты, хотя бы для текстовых ссылок. А то страница выглядит мертвой.

- Для фоновых картинок исользовать ... фоновые картинки (background-image)

- Поле поиска немного вниз ушло (в Chrome как минимум). Вместо скрипта использовать атрибут placeholder, для изменения прозрачности опять же css. вообще долой jQuery, он тут врядли понадобится.

- Меню обычно списком ul li делают. Я про меню в подвале

- Есть мнение что лучше использовать классы вместо id. Я его придерживаюсь, но это не обязательно делать другим, конечно.

- Под копирайтом отступ увеличить

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

- Цвет у body не задан. В опере помоему дефолтный цвет серый. Для body нельзя задавать height: 100%, но можно min-height: 100%

- xmlns задавать просто бессмыслленно - у вас ведь не xhtml тип контента, хотя вроде бы совместим по синтаксису. Тип для скриптов и стилей можно также не указывать, они совпадают с дефолтными, так что все ок.

В целом нормально.

Вообще, макет выглядит староватым, сейчас есть много приятных минималистичных дизайнов, но это уже не к верстальщику предъява )

[nebovluje]

- Есть мнение что лучше использовать классы вместо id. Я его придерживаюсь, но это не обязательно делать другим, конечно.

Что, простите?

[danik.html]

Что, простите?

1) У id большой приоритет. Если нужно будет переопределить некоторые стили, то возникнут проблемы.

2) Не нужно держать в голове какому блоку задан id, а какому - class.

3) Не всегда можно однозначно сказать что такой-то блок будет использоваться только в одном экземпляре.

Встречный вопрос: А в чем преимущество использования id перед class?

[uuu]

danik.html +1

id используем преимущественно в связке с JS

для оформления CSS стоит использовать классы

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