Макет Bluish.

[Red Planet]

Здравствуйте! Доделал макет, нужны замечания по качеству верстки.

1. Проверял на Opera 9.63, Opera 11, Internet Explorer 6 (Portable), Internet Explorer 8, Google Chrome, Safari, Mozilla Firefox 3.6.13.
   
2. Отсутствие закругленных уголков у блока с поиском на старых браузерах не недостаток, - так было задумано. Хотел испробовать способы для старых браузеров (на боковых блоках со ссылками) и для новых (на блоке с поиском). В том же блоке с поиском ничего, кроме абсолютного позиционирования, для ссылки не придумал. Буду рад комментариям на этот счет.
   
3. Если бы не добавление после </html> кода, то документ был бы валидным.
   
4. Как смог оптимизировал и сокращал CSS, но могут быть недостатки, плохие решения.
   
5. Выпадающее меню сверху не делал.
   

Верстка

Жду ответов.

Edited February 4, 2011 by Red Planet

[Vlad]

* {

margin: 0;

padding: 0;

}

Вот этот код зло, не устану этого повторять.

[Red Planet]

Почему?

Вместо * нужно использовать следующее?

ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote {margin: 0; padding: 0;}

Edited February 2, 2011 by Red Planet

[Vlad]

Так оно конечно лучше, но тоже далеко от здравого смысла и логичности. На странице есть <ol>? Нет! Значит, пишем

ul {list-style: none;}

В верстке применяются теги <h5>, <h6> и др.? Тоже нет! Выкидываем их из списка и оставляем только то, что действительно нужно и применяется.

Это первый момент. А второй — с чего вы вообще решили, что у тегов вроде <h1> нужно обнулять отступы, а также поля, которых у них отродясь не было? Т.е. вы, грубо говоря, решили прогнуть мой браузер, заставляя его заниматься всякой херней, и мешая мне быстрее насладиться вашим творчеством.

[Red Planet]

Понял, займусь этим.

[Чебурашка]

Подскажите а это для чего?

</body> 
</html></textarea></form>
</title></comment></a>
</div></span></ilayer></layer></iframe></noframes></style></noscript></table></script></applet></font>

[Vlad]

Это narod.ru вставляет. Для баннера.

[htmlonline]

Верстка хорошая, мог бы верхнее меню сделать градиентным, или у тебя мат задумывался?

[Чебурашка]

Это narod.ru вставляет. Для баннера.

Спасибо.

[Red Planet]

Верстка хорошая, мог бы верхнее меню сделать градиентным, или у тебя мат задумывался?

Насчет верхнего меню. Мне порекомендовали отказаться от спрайтов и сделать hover, чтобы не загружать лишние картинки. А что значит "мат"?

Насчет обнуления отступов. Все бы хорошо, если бы только не разиновые блоки (коричневый и полоска внизу). Им если и явно задашь обнуления, то все равно остаются зазоры.

ul, h4, footer {
	margin: 0;
	padding: 0;
}


#over-footer {
	padding: 32px 0 0 0;
	margin: 0;
}

Результат.

Edited February 7, 2011 by Red Planet

[Serlutin]

* {
margin: 0;
padding: 0;
}

Можно подумать, что браузер от этого зависнет. Теоретически, может, но практически ещё не разу такого не было. Скорее всего браузер ляжет из-за JS, чем от маленькой строчки в CSS. Правда при использовании * встречается неприятные казусы, при использовании текстовых полей, кнопок и т.д. Далее при использовании * сбивается стандартные отступы у списков, поэтому их нужно заново прописать. Это нужно для тех, кто потом будет контентом заниматься. Захочется ему сделать список, а он выглядит кое-как. Поэтому логичнее всего вообще не использовать css сборсы, даже от Мейера, хотя некоторые приёмы стоит взять на заметку. Такие как удаление кавычек из тега Q.

Теперь по вёрстке. Вместо html5-fix лучше использовать modernizr, который надо уже подключать всем браузерам, а не только IE.

Дальше. Почему так странно свёрстано меню .top-nav? Просто, если Google будет оценивать ваше меню, то он совершенно ничего там не найдёт. Добавляем текст в ссылки, используем свойство text-indent, убираем стандартный focus c помощью a:focus {outline: none;} и делаем нестандартный focus, например таким же, как :hover. Да и меню желательно на списках делать, это теперь почти общепринятый стандарт, но это так, чисто субъективно, ваш вариант тоже имеет место быть.

По мимо DIV в новом HTML есть тег SECTION. Например <div class="content">, можно заменить на <section class="content">, чтобы код читать приятнее было.

Закругление уголков без картинок с помощью тегов b - красивое решение. Но почему бы не сделать с помощью border-radius, а для ie картинку с уголками подложить. Ведь всё равно у вас сайдбар имеет фиксированную ширину.

Еще, хотелось, чтобы кнопка "GO" рядом с поиском тоже подсвечивалась при наведении.

В целом же хорошо свёрстано. Код чистый и понятный, во многом семантичный.

Edited February 4, 2011 by Serlutin

[htmlonline]

"Мат" - это матовый оттенок, без блеска и т.п.

[Red Planet]

Заметил на IE 7.

Нужно было поставить min-width для резиновой растяжки.

Edited August 26, 2011 by Red Planet