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

[Chakra]

Вот тут сама верстка: http://chakra.besaba.com/examples/indotourism/index.html

Тут шаблон страницы: http://all-psd.ru/files/19-05-2013/01910.zip

Тут jpg этой страницы: http://i60.fastpic.ru/big/2013/1218/1f/58b7de3f68fbcda0f9bee9d6383b571f.jpg

 

Буду очень признательна, если ответите на несколько вопросов:

1. Правильно ли я подключила шрифты (в частности, cufon для IE8-)?

2. У страницы горизонтальная симметрия, поэтому я отцентрировала основные элементы, но из-за этого элементы сдвинулись относительно их расположения на шаблоне. Такое допускается? Как обычно относятся к подобным "улучшениям"?

3. Возможно, нужно было использовать заголовки <h1>,... Если да, то где именно?

4. Тот же вопрос насчет новых тегов. Понимаю только, где <footer> :-)

[Ludwig Voltman]

1) Шрифты я бы подключал через font squirrel или google fonts, так как для отображения шрифтов во всех браузерах (в т.ч. старых) необходимо загрузить несколько различных расширений одного и того же файла.

2) Лого (надпись indo tourism) я бы сделал h1. Кстати, использовать тег strong для выделения слова indo не совсем семантично, т.к. вряд ли во фразе indo tourism слово indo несет какую-то дополнительную важность. Лучше, как мне кажется, для этих целей использовать либо тег <b>, либо тег <i>.

3) С новыми структурными тегами я сам не разобрался, могу только сказать, что блок с лого и навигацией это header, а сама навигация -- это nav. Галерею картинок (которая реализована через таблицы) структурными тэгами можно заверстать так: <figure><img><figcaption>Описание картинки</figcaption></firure>. Копирайт внизу можно обернуть в small.

[Chakra]

Людвиг, спасибо за советы! Подключила шрифты через font squirrel (надеюсь, правильно, пока не могу проверить во всех браузерах), переделала теги для лого и еще кое-что (теперь работает в IE6, если верить IETester'у).

[Radiocity]

Картинки меню загружаются при наведении. Лучше подобного эффекта избегать, задавая фон для элемента сразу.

http://jsfiddle.net/d2Fpk/

 

ИМХО, страница напрашивается на адаптивность.

Edited December 19, 2013 by Radiocity

[Chakra]

Radiocity, почему-то ваш вариант у меня не работает. Но когда поменяла position в background на 999em, то заработало. Насчет адаптивности согласна, но мне пока еще рано этим заниматься. Спасибо за комментарий!

[Radiocity]

Radiocity, почему-то ваш вариант у меня не работает. Но когда поменяла position в background на 999em, то заработало. 

 

В каком браузере?

[Chakra]

В каком браузере?

 

 

В jsfiddle в firefox 26.0, причем в том же firefox открывала сайт с background-position: 9999em и все работало.

[Radiocity]

Видимо особенность jsfiddle

[ryter]

Людвиг, спасибо за советы! Подключила шрифты через font squirrel (надеюсь, правильно, пока не могу проверить во всех браузерах), переделала теги для лого и еще кое-что (теперь работает в IE6, если верить IETester'у).

не верь ему он подведет в самый ответственный момент 

[ya_verstaka]

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

2. Зачем вы всем основным блокам задавали min-width:1280px? Это плохо, из-за этого  при разрешении 1280 и ниже  появляется нижний скрол! Так же для отцентрированых элементов ( .top-menu .top-menu-wrapper) вы задаете ширину в 1024px, но нужно учитывать, что при такой ширине, при разрешении в 1024px сайт не вместиться в экран, так как вы не учли ширину скрола. В общем ширину нужно брать меньше (хотя-бы 1000px, а то и меньше  (учитывая, что в опере, в некоторых пользователей, включается левая функциональная панель)).

3.Блок bottom-links, нужно было сделать списком, так же не понятно зачем для каждой ссылки задавать отдельный класс (link1 link2 link2...)!

4. Текст в блоке banner-text  судя по всему должен быть оформлен в h1, это явно не обычный текс, который вставляется в <p>. 

5. Кнопка ok ask me, должна быть ссылкой.

[Chakra]

1. Старайтесь не задавать.....

 

1. Оке, больше не буду)

2. На макете было так указано. Сделала более адаптивный вариант: http://chakra.besaba.com/examples/indotourism2/index.html

3. Переделала (ссылка п.2), а классы просто забыла убрать.

4. По-моему, все-таки лого важнее, поставила h2.

5. Ну не знаю, эта кнопка очень похожа на кнопку)) Не понимаю причину, поэтому оставила как было.

 

Спасибо вам за комментарий!