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

[uteelers5]

Попробовал сверстать несложный вроде бы шаблон:

ссылка 1

И вот что получилось:

ссылка 2

- не могу в кроссбраузерность, подгоняю для ff

- из html 5 пока знаю/использую только doctype

Спасибо.

[buddah]

На макете шрифт без засечек, у вас с.

Зачем это?

display: inline-block;
float: left;
position: relative;

inline-block и float: left в этом случае делают одно и то же. Зачем там позиционирование?

Контент в Features и Prices я бы делал списком, потому что это списки по своей сути. Ну возможно на счет Review еще есть вопросы.

.main {
background: url(img/main.png) repeat-x;
height: 531px;

А если контента будет больше?

Научитесь прижимать футер к низу страницы, независимо от количества контента.

Дальше не копался, надо учиться)

[Vin]

Ха, забавно, сам в первый раз верстал этот макет. Кстати, даже не доделал полностью))

Я так понял, что окаймление пункта главного меню — это hover, поэтому стоит сделать так:

a:hover {
    background: url("img/shape.png") no-repeat;
    color: #B3B2B2;
}

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

Скачать макет

Ну и кагбэ ТЗ:

Всё также, как на макете. Сам контент фиксированный, фоны тянутся на всю ширину, IE8+. Скриншоты в центре just for fun и just for training можно сделать с помощью позиционирования и z-index.

Edited March 5, 2012 by Vin

[uteelers5]

На макете шрифт без засечек, у вас с.

Зачем это?

display: inline-block;
float: left;
position: relative;

inline-block и float: left в этом случае делают одно и то же. Зачем там позиционирование?

Контент в Features и Prices я бы делал списком, потому что это списки по своей сути. Ну возможно на счет Review еще есть вопросы.

.main {
background: url(img/main.png) repeat-x;
height: 531px;

А если контента будет больше?

Научитесь прижимать футер к низу страницы, независимо от количества контента.

Дальше не копался, надо учиться)

По поводу inline и float - пробелы в теории

Футер прижал вроде бы, если не трудно посмотрите еще раз код

Контент в Features и Prices в списке или тут тоже напутал что то?

Ха, забавно, сам в первый раз верстал этот макет. Кстати, даже не доделал полностью))

Я так понял, что окаймление пункта главного меню — это hover, поэтому стоит сделать так:

a:hover {
    background: url("img/shape.png") no-repeat;
    color: #B3B2B2;
}

Не совсем понятно что из себя представляет shape.png

За макет отельное спасибо.

Edited March 5, 2012 by uteelers5

[Vin]

Футер прижал вроде бы, если не трудно посмотрите еще раз код

Не, футер не прилипает, кое-чего не хватает:

html, body {
	height: 100%;
}

.wrapper {
	position: relative;
        min-height: 100%;
	height: auto !important;
	height: 100%; /* Это только для ИЕ6, который про min-height ничего не знает */
}

.footer {
        margin-top: -42px;
	width: 100%;
	height: 42px;
	position: absolute;
	bottom: 0;

Не совсем понятно что из себя представляет shape.png

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

За макет отельное спасибо.

Всегда пожалуйста. Бесплатных макетов в сети over 9000, но реально подходящих для тренировки в вёрстке не так уж много.

Edited March 17, 2012 by Vin

[alexforce2]

Vin padding не может быть отрицательным, возможно вы имели в ввиду margin отрицательный.

[Vin]

Да, совершенно верно. Поправил, как должно быть.