По критикуйте верстку

[uvlad]

Всем привет !

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

Макет брал из этой темы (Katalog1.psd), на данный момент он там не доступен, поэтому скачать его можно здесь http://dump.ru/file/5365248

Готовый результат находится здесь: http://uvlad.tk/html/pilot/index.html *

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

Делал всё под Linux, поэтому под рукой не было быстрого доступа к IE6, о проблемах знаю.

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

* Сделал изменения в верстке после сделанных замечаний.

- Перешел на XHTML Strict

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

- Все стили убрал в отдельный файл.

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

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

Edited August 30, 2011 by uvlad

[cyklop77]

мне нравится.

только заголовки не по порядку идут(h1 после h2 и h3). честно говоря, сам не знаю можно ли так, но вебдевелопер ругается.

и блоков слишком уж много. например зачем картинку логотипа обернул дивом? её и без него позиционировать можно. подобное часто у тебя встречается.

[Vlad]

Transitional сейчас не катит. Делайте либо XHTML Strict, либо HTML5.

[Gaspode]

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

 <div id="headerContact"> 
                <h3>Контактный телефон</h3> 

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

<div class="clear"></div> 

Мусор.

и блоков слишком уж много. например зачем картинку логотипа обернул дивом? её и без него позиционировать можно. подобное часто у тебя встречается.

Так себе предъява, если честно. Лежит себе див, жрать не просит. Почему бы ему и не быть? Логотип - это отдельный блок, как ни крути. И ни в том дело, можно ли без него обойтись в данном случае.

<div id="transparentOverlay"> 

Нехорошо. Названия классов/айдишников должны бы отражать структуру, а не внешний вид.

<span class="grayLogo" style="left:0;top:-8px;"></span>

<span style="margin-left:30px;">

<span class="blueLogo" style="top:15px;"></span>

Почему не в стилях?

<img src="images/violet_canister.jpg" height="95" width="95" alt="" /> 

Вот тут вопрос к знатокам: размеры картинок в разметке задавать - это нормально или не надо лучше?

<span class="orangeLogo"></span>

В разметку-то зачем это пихать, когда можно для заголовка задать фон? И да, ещё раз: названия классов должны отражать структуру, а не внешний вид.

Edited August 29, 2011 by Gaspode

[uvlad]

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