neol, какой браузер и какая ОС?

Firefox 13,  Debian.

Руководствуясь w3schools и здравым смыслом я решил, что все уникальные элементы на странице я буду делать через ID, а все повторяющиеся (даже может потенциально, а не на данный момент) - через CLASS. Мне кажется логично так. Ибо в последующем может потребоваться работа JS с любым из элементов.

Я тоже так сначала делал.
Но приходилось сталкиваться с ситуацией где есть готовый скрипт написанный индусом из-за которого приходилось менять. Дело конечно не сложное. Но ну его нафиг - теперь я не парюсь и использую только классы.

а по внешнему виду ни один кодер на подобные мелочи внимания не обратит (а вот дизайнер обратит).

Кстати да. Был у меня один клиент ему нужно было сходство с макетом пиксел в пиксель (при этом было пофиг, что в макете дизайнер шрифты гдето с размытием оставил, где то текст сжал......  Тогда прямо весь шаблон загонял в фон страницы и "играл" с пикселями + в войну с клиентом в то, что браузер (с учетом всех видов и версий) не может сделать все то, что неопытный диз сделает с шрифтами в шаблоне.

<div id="content">
        <div id="content_top_bg"></div>
        <div id="content_middle_bg">

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

<div class="content">
        <div class="top"></div>
        <div class="middle">

и в стилях использовать

.content .top
.content .middle

И присоединюсь к замечаниям voral.

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

Да, зачет.

1. У тегов <a> всегда стаить атрибут title. Заполнять (верстальщику) не надо. Я всегда пишу на подобии <a href="#" title="">....</a>
2. У тегов <img> всегда стаить атрибуты alt и title. Заполнять (верстальщику) не надо. Я всегда пишу на подобии <img src="...." title="" alt="">

Это да, учту.

Это было решение последней из 2х проблем сложных, я пробовал все подряд и по этому на скорую руку применил такой стиль. Естественно, нужно в css убрать.

Да, точно, учту.

Руководствуясь w3schools и здравым смыслом я решил, что все уникальные элементы на странице я буду делать через ID, а все повторяющиеся (даже может потенциально, а не на данный момент) - через CLASS. Мне кажется логично так. Ибо в последующем может потребоваться работа JS с любым из элементов.

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

Это называется работа со спрайтами. Там все очень просто. Делается файл из нескольких картинок склееных и далее подгоняется смещение. На пример:

background: url(images/sprite.png) 100px 0

Т.е. идет смещение картинки по горизонтали на 100 пикселей.

metra пишет:

PSD-шаблону

Это не совсем UNIX-way

Вей, не вей, а ~80% исходников присылают в данном формате. Это я узнавал.

Небольшая часть ai, cdr.

Кстати sk1 их может открывать.

Это не совсем UNIX-way

Это реальность.
Большинство макетов приходит в PSD.  Небольшая часть ai, cdr.  (Я от таких сразу отказываюсь)

По мелочи
Ниже все мое ИМХО (что то родилось и прижилось на основе требований при работе в различных командах) и не претендует на истину
По HTML:
1. У тегов <a> всегда стаить атрибут title. Заполнять (верстальщику) не надо. Я всегда пишу на подобии <a href="#" title="">....</a>
2. У тегов <img> всегда стаить атрибуты alt и title. Заполнять (верстальщику) не надо. Я всегда пишу на подобии <img src="...." title="" alt="">
3. все стили в таблицу стилей. Здесь этому не место

<div style="width: 900px; height: 1px; clear: both;"></div>

Кроме того width:900px здесь (если я не проглядел чего) лишнее, у вас родительский блок имеет фиксированную ширину. (кстати уже чем 900px).
Во многих командах (и я для себя перенял) такую конструкцию обзывают классом clear.

.clear{
   height:1px;
   clear:both;
   overflow:hidden;
}
<div class="clear">&nbsp;</div>

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

4. Параметры id оставляю тем кто будет пришивать скрипты. для верстки только class
5. Как то читал статью по сео. Там рекомендовалось, чтоб на одной странице был только один тег <h1>...</h1>. вопрос, конечно, холиварный, но у меня прижилось
6. Тут больше вопрос, конечно, к дизайнеру. Но кнопки не живые.  Лучше, чтоб при наведении они как то видоизменялись. ВОзможно вы знаете этот метод, на сякий случай расскажу:

Картинку кнопки или ее фона делаете двойной (а можно и тройной высоты)
По высоте делаете. В нормальном состоянии и при наведеном. Третье состояние можно например для текущего выбора. А затем:

.button{
    background:#CCC url("bt.png") center top no-repeat;
}
.button:hover{
    background:#CCC url("bt.png") center bottom no-repeat;
}
.active{  /* стиль добавляется скриптом при формировании страницы */
    background:#CCC url("bt.png") center center no-repeat;
}

Кстати, в одном зарубежном проекте видел когда в один файл png засунули вообще все кнопки (и их состояния) с сайта. И опирировали в таблице стилей уже смещениями этого фона.

PSD-шаблону

Это не совсем UNIX-way

А оригинал, с которого верстал где?
Вообще хорошо получилось, сам макет темноват.

http://freepsdfiles.net/graphics/dark-p … -template/
правда я заменил фон сайта (ибо тот мне показался отвратительным) и не доделал правый нижний блок с подвалом - спать пора)) завтра