Прошу оценить вёрстку макета

[yujin11]

Доброго времени суток. Выкладываю для вашей оценки страничку которую сам сверстал. Жду ваших оценок, наставлений ну и замечаний.

Edited June 12, 2011 by yujin11

[Gaspode]

Навскидку:

<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]--> 
<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]--> 

Зачем одну и ту же таблицу подключать в двух разных не взаимоисключающих случаях?

<span>A-</span> 
<p>A+</p> 
<span>skip to content</span> 

В чём принципиальное отличие A+, чтоб оно удостоилось другого элемента, да ещё и абзаца?

div id="blk1"

Очень говорящее название.

<div id="block"> 
</div> 

Это что за ужас?

Information Sheets 

Это абзац, по-вашему? Это заголовок. Аналогично в других случаях.

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

В общем, так себе - и это только после поверхностного взгляда.

Edited June 12, 2011 by Gaspode

[buddah]

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

1. С каких пор reset.css стал стандартом?

2. Там нет кучи дивов и все понятно. Просто без табуляции (или 4 пробелов) трудно читать.

[yujin11]

С таблицей согласен, не досмотрел когда правил.

Я хотел минимизировать классы и дивы. Как можно меньше классов и ID в коде.

Поэтому

<span>A-</span> 
<p>A+</p> 
<span>skip to content</span> 

Потому что размер шрифта А+ на 1px больше чем остальные. Решил проблему таким образом. Можно было бы использовать класс и ID, но хотел минимизировать. На сколько это правильно не знаю.

Information Sheets 

Опять же не хотел использовать классы.

Подправил табуляцию и подправил таблицу для ослика.

И если стоит задача как можно меньше ID и классов, то стоит ли так делать вёрстку?

Edited June 12, 2011 by yujin11

[Gaspode]

С каких пор reset.css стал стандартом?

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

Там нет кучи дивов и все понятно.

Ну, кому как. Я вот не могу читать такое: </div></div></div>.

И если стоит задача как можно меньше ID и классов, то стоит ли так делать вёрстку?

Такую задачу надо ставить уже после того, как вы начнёте понимать, какой элемент для чего нужен. Заголовок должен быть заголовком, абзац - абзацем.

Edited June 12, 2011 by Gaspode

[Vlad]

Слишком много дивов. Нежеланием использовать множество разных классов вы загнали себя в другую крайность. Код теперь несемантичный и с точки зрения SEO вообще никуда не годится. Эти факторы тоже следует учитывать. Вам надо активнее использовать разные теги вроде h1, h2, h3. Вообще, этот макет лучше сверстать на HTML5, он прям напрашивается для этого, HTML4 уже морально устарел, не котируется.

Некоторые элементы можно безболезненно удалить --- wrapper к примеру. Утверждаете, что хотите минимизировать использование id, а форма прямо пестрит ими. А ведь в стилях легко можно указать input[type=submit]{} и не добавлять id. Сама форма невалидна, нет action и элементы формы не обёрнуты в блочные элементы.

Какие-то решения вызывают недоумение. Вроде не ошибка, но почему используется button для поиска в форме не понятно, есть же <input type="images">, использовать для фона рисунок 1х1 пиксел неоправданно, ничего не потеряете, если увеличите до 20х20. К тому же зачем вообще фоновый рисунок, почему нельзя использовать просто фоновый цвет?

[psywalker]

Некоторые элементы можно безболезненно удалить --- wrapper к примеру.

А я бы не удалял wrapper, по мимо лишней сущности - он ещё и приносит пользу, мой опыт привёл меня к тому, что он всё таки нужен.

Какие-то решения вызывают недоумение. Вроде не ошибка, но почему используется button для поиска в форме не понятно, есть же <input type="images">

Влад, а чисто ради опыта, скажи мне пожалуйста, есть ли какое нибудь отличии между <input type="image"> от <input type="submit">, если оба например делают одну и туже работу вроде?

По сабжу: Вёрстка редкий калич, что и неудивительно, ведь ТС только начинает свой путь верстальщика.

[Vlad]

Влад, а чисто ради опыта, скажи мне пожалуйста, есть ли какое нибудь отличии между <input type="image"> от <input type="submit">, если оба например делают одну и туже работу вроде?

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

[psywalker]

Влад, а чисто ради опыта, скажи мне пожалуйста, есть ли какое нибудь отличии между <input type="image"> от <input type="submit">, если оба например делают одну и туже работу вроде?

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

Первый элемент картинку вставляет, второй кнопку.

Нее, это-то я знаю

Можно конечно настроить так, чтобы они визуально друг от друга не отличались. В таком случае image передаёт координаты точки нажатия, это можно использовать в интерфейсе, где координаты нужны. Например, для выбора оценки, которая выражается в виде градиента от красного до зелёного цвета.

А вот тут если можно, поподробнее. Как визуальный вид, сделанный через CSS, может повлиять на функционал кнопки? Если можно, примерчик.

[Vlad]

Хватит уже не по теме задавать вопросы!

[psywalker]

Хватит уже не по теме задавать вопросы!

Да почему же сразу так строго, это интересный вопрос и в тему (это же касается его кнопок), думаю он и автору будет интересен.

[Vlad]

Макс, хватит флудить! Автора интересует оценка его вёрстки, тебя вопрос о кнопках. Создай отдельную тему, там и поговорим.

[psywalker]

Макс, хватит флудить! Автора интересует оценка его вёрстки, тебя вопрос о кнопках. Создай отдельную тему, там и поговорим.

Я не считаю, что прям зафлудил я этим вопросом, но если тебе так угодно, то нет проблем, сделаем.

[yujin11]

И так, попробую подвести итог.

Говорите много дивов, подскажите или покажите где и как правильно решить эту задачу.

За HTML 5 знаю только то, что он не поддерживается всеми браузерами в том числе IE (7-8).

А ведь в стилях легко можно указать input[type=submit]{} и не добавлять id

этого я не знал, подскажите где можно поконкретней почитать про этакие возможности.

Сама форма невалидна, нет action и элементы формы не обёрнуты в блочные элементы.

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

Про теги <h> <span> и <p> тоже обязательно почитаю.

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

PS. Vlad, спасибо за книгу.

Edited June 13, 2011 by yujin11

[Vlad]

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

Про селекторы здесь написано.

http://htmlbook.ru/samcss/selektory-atributov

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

[yujin11]

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

Про селекторы здесь написано.

http://htmlbook.ru/samcss/selektory-atributov

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

Спасибо за подсказку, и подскажите ещё про костыли под HTML5, я так понимаю их довольно много, какие из них нужно использовать?

И хотел уточнить про классы и ID. Что правильней использовать? Скажем так, пытаться использовать больше классов или не злоупотреблять и лучше использовать ID?

Edited June 14, 2011 by yujin11

[Vlad]

Про костыли было написано в этой теме.

http://forum.htmlbook.ru/index.php?showtopic=27283&view=findpost&p=205043

Про id и class давний спор, в моей книге он рассмотрен, стр. 76.

Про HTML5 также посмотрите стр. 318, пример 9.4 и 9.5.

[yujin11]

Про костыли было написано в этой теме.

http://forum.htmlbook.ru/index.php?showtopic=27283&view=findpost&p=205043

Про id и class давний спор, в моей книге он рассмотрен, стр. 76.

Про HTML5 также посмотрите стр. 318, пример 9.4 и 9.5.

Спасибо вам огромное за помощь и подсказки. Очень вам благодарен