Оцените, пожалуйста, верстку

[Catherine]

Здравствуйте. Прошу оценить качество верстки. Сделала задание №1 из http://divhack.com/node/60. Проверяла в IE7+, Safari, Chrome, FF, Opera последних версий.

Правда, размеры шрифтов для Arial специально не подбирала, а оставила, какие были оригинале.

Вот сама верстка макета

Макет.jpg

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

[sammasati]

По-моему, все хорошо. Не нашел каких-то ошибок.

Единственное замечание - стоило задать max-width контейнеру, чтобы страница растягивалась не на всю ширину(при этом фон все-равно должен быть на всю ширину). На моем разрешении 1600х900 страница не очень хорошо смотрится из-за растянутости.

Да, и макет слишком простой. Если вы уже знаете, что такое кроссбраузерность, то не стоит тратить время на такие макеты. Ищите интересные, сложные и непонятные Вам макеты. Только верстая их, Вы сможете научиться новому.

[Catherine]

По-моему, все хорошо. Не нашел каких-то ошибок.

Единственное замечание - стоило задать max-width контейнеру, чтобы страница растягивалась не на всю ширину(при этом фон все-равно должен быть на всю ширину). На моем разрешении 1600х900 страница не очень хорошо смотрится из-за растянутости.

Да, и макет слишком простой. Если вы уже знаете, что такое кроссбраузерность, то не стоит тратить время на такие макеты. Ищите интересные, сложные и непонятные Вам макеты. Только верстая их, Вы сможете научиться новому.

Спасибо за критику! Учту Ваше замечание в отношении ширины контейнера. Считаю, что ошибки есть всегда и во всем, просто не всегда их видно. Макет, может, и простой, но для меня был важен именно сам подход к верстке, к тому же у меня пока мало опыта, и где-то его надо брать) Следующий макет возьму посложнее, чтобы было что обсуждать)

[lexxcode]

Хотел бы обратить внимание, на заголовок в сайдбаре справа.

1. Отступ от края стоит закладывать с двух сторон симметрично (кроме случаев, если макетом обусловлены иные параметры).

2. Высота заголовка определена свойством line-height:40px; , но в такой ситуации попробуй сделать текст в заголовке длинней, чтоб он стал в две строки. В следствии текст будет некрасиво разъезжаться по высоте.

Мой вариант css:

.note-header {
    color: white;
    line-height: 22px;
}
.note-header h3 {
    padding: 10px;
}

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

По структуре документа, h3 потом h2, потом h4 и отсутствие h1, не корректно.

Анализатор пишет вот такое:

<h1>[Missing heading]

<h2>[Missing heading]

<h3>Maecenas suscipit

<h2>Pellentesque vestibulum erat.

<h3>[Missing heading]

<h4>Nullam vitae leo vel pede sollicitudin suscipit

<h4>Nullam vitae leo vel pede sollicitudin suscipit

А так, в целом хорошо! Учись, пробуй, ошибайся, исправляйся, развивайся! Да пребудет с тобой Сила!

[Svatov]

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

Тем не менее есть пару замечаний:

1. Логотип, конечно, сначала удивило решение разбить его разметкой, но допустим потом будет это все натягиваться на движок, там любят подобные кастумизируемые логотипы в шаблонах. Но!

Читаем тех.задание:

Весь текст в .PSD макете должен быть перенесён на сайт, картинками текст делать нельзя, за исключением логотипа – логотип делаем картинкой.

Перестарались

2. Зачем лишний span в contacts?

3. В этом не уверен, в menu свойства с дробными процентами до сотых лучше наверное избегать, в опере вроде были по этому поводу проблемы, точно не уверен...

Лучше избегать задание высоты через line-height, допустим с меню вам повезло, что так все четко встало, но есть же альтернативные свойства специально для этого предназначенные height, padding,margin...если уже выставили блочность ссылкам, уместно им железно задать размеры полезной площади

4. Слоган можно вложить в див. с бликом, таким образом не плодить лишнюю разметку.

5. div class="main gradient" класс градиент не используется, а стили все в мейн...зачем? Да и лучше таких названий потом избегать, мейн на то и мейн что главный, а потом у вас идет main-container и тд..не понятно становится где и что главное.

Edited January 18, 2012 by Svatov

[lexxcode]

3. ... в опере вроде были по этому поводу проблемы, точно не уверен...

Именно так и есть. Опера редкий фрик, который не умеет обсчитывать дробные проценты, на протяжении всей его истории, и исправлять этот нелепый фейл они не собираются.

[SelenIT]

Лучше избегать задание высоты через line-height

Имхо, сильно зависит от ситуации. В случае меню здесь оно убивает двух зайцев — задает высоту полосе и центрирует текст по вертикали. А стыковать его ни с чем не нужно, так что даже издержки масштабирования верстки не поломают. Имхо, тут всё оправдано. А вот для логотипа, да, рискованно.

И кнопку "read more", на мой взгляд, вполне можно было попробовать сделать без картинки, бордер-радиусом и градиентами (раз уж общий прицел на перспективу, тот же бордер-радиус всё равно используется в др. местах и т.п.).

[Catherine]

Спасибо всем за критику! Очень помогает разобраться с недостатками верстки. Даже в таком простом макете назревают вопросы)

[Catherine]

стоило задать max-width контейнеру, чтобы страница растягивалась не на всю ширину(при этом фон все-равно должен быть на всю ширину)

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

<div class="container">
	<div class="header"><div class="wrap">...</div></div>
	<div class="menu"><div class="wrap">...</div></div>
	<div class="slogan"><div class="wrap">...</div></div>
	<div class="main gradient"><div class="wrap">...</div></div>
	<div class="footer"><div class="wrap">...</div></div>
</div>

.wrap {max-width: 1400px; margin: 0 auto;}

Или, может, есть более лаконичные решения?

[Catherine]

1. Отступ от края стоит закладывать с двух сторон симметрично (кроме случаев, если макетом обусловлены иные параметры).

2. Высота заголовка определена свойством line-height:40px; , но в такой ситуации попробуй сделать текст в заголовке длинней, чтоб он стал в две строки. В следствии текст будет некрасиво разъезжаться по высоте.

По структуре документа, h3 потом h2, потом h4 и отсутствие h1, не корректно. Анализатор пишет вот такое:

1, 2 - спасибо, не учла, что заголовок может быть на 2 строки

По поводу заголовков. Спасибо за замечание, буду учиться использовать грамотно) Кстати, о каком анализаторе идет речь?

[Catherine]

Тем не менее есть пару замечаний:

Спасибо за замечания! Помогает думать)

1, 2-таки перестаралась

3, 4-на будущее пригодится, учту

5.По поводу класса градиент - в данном контексте он, действительно, лишний. Для построения градиента воспользовалась генератором, где есть следующее примечание:

Support for full multi-stop gradients with IE9 (using SVG).

Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:

<!--[if gte IE 9]>

<style type="text/css">

.gradient {

filter: none;

}

</style>

<![endif]-->

Но так как svg я не воспользовалась, то и дополнительный класс, получается, не нужен.

Над именованием классов, видимо, придется еще работать и работать...

Edited January 18, 2012 by Catherine

[lexxcode]

Кстати, о каком анализаторе идет речь?

В Google Chrome есть плагин Web Developer называется (В других браузерах не в курсе, т.к. Chrome у меня основной). Там во вкладке Information есть пункт View Document Outline и он в новой вкладке выводит структуру заголовков h1-h6 в документе и указывает на ошибки.

Кроме этого в этом плагине еще много полезного, советую.

5.По поводу класса градиент - в данном контексте он, действительно, лишний. Для построения градиента воспользовалась генератором, где есть следующее примечание:

Support for full multi-stop gradients with IE9 (using SVG).

Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:

<!--[if gte IE 9]>

<style type="text/css">

.gradient {

filter: none;

}

</style>

<![endif]-->

Но так как svg я не воспользовалась, то и дополнительный класс, получается, не нужен.

Над именованием классов, видимо, придется еще работать и работать...

Это просто пример. Я например просто исключаю не нужные IE через хаки.

Edited January 18, 2012 by alexriz

[Catherine]

Кстати, о каком анализаторе идет речь?

В Google Chrome есть плагин Web Developer называется (В других браузерах не в курсе, т.к. Chrome у меня основной). Там во вкладке Information есть пункт View Document Outline и он в новой вкладке выводит структуру заголовков h1-h6 в документе и указывает на ошибки.

Кроме этого в этом плагине еще много полезного, советую.

...

Это просто пример. Я например просто исключаю не нужные IE через хаки.

Огромное спасибо за ответ! Буду разбираться с Web Developer'ом, тем более, что Chrome у меня тоже основной браузер

Edited January 18, 2012 by Catherine

[SelenIT]

У W3Cшного валидатора тоже есть опция "Show outline" (чекбокс вверху, сама outline показывается внизу)

[Catherine]

У W3Cшного валидатора тоже есть опция "Show outline" (чекбокс вверху, сама outline показывается внизу)

Супер! Вот вроде не первый раз валидатор вижу, а ни разу не обратила внимание на чекбоксы в опциях Где были мои глаза? Спасибо!