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

[IvanRu08]

Первая работа, которую полностью закончил. Хочу услышать критику по поводу моей верстки: что сделал неправильно и так далее. По возможности проверить кроссбраузерность. У меня отлично отображается в IE10,9, Chrome, FF, Opera.

Возникло 2 проблемы, которые никак не могу решить. Сайт: http://cm04741.tmweb.ru/

1. Почему то не работает @font-face, когда пытаюсь подключить шрифт в нескольких форматах. То есть беру Roboto Regular.tff, генерирую с помощью сервиса дополнительные форматы и подключаю вот так: 

@font-face {    font-family: 'robotoregular';    src: url('robotoregular-webfont.eot');    src: url('robotoregular-webfont.eot?#iefix') format('embedded-opentype'),         url('robotoregular-webfont.woff2') format('woff2'),         url('robotoregular-webfont.woff') format('woff'),         url('robotoregular-webfont.ttf') format('truetype'),         url('robotoregular-webfont.svg#robotoregular') format('svg');    font-weight: normal;    font-style: normal;}

Не работает. Если подключаю только в формате ttf, все нормально. Что может быть не так?

2. В хроме, когда навожу на значок поиска, появляется "левая картинка". В других браузерах все нормально. Что это может быть?

Заранее спасибо.

Edited August 10, 2015 by IvanRu08

[savinovka]

хром 44.0.2403.130

-подвал не доходит до правого края, соответственно от кого дизайн не видно;

-по левому краю отступа нету;

-значка поиска нигде не вижу;

[antonKar]

1) Зачем вам 2 блока с одинаковым идентификатором "search_icon"? Вы читали про идентификаторы http://htmlbook.ru/samcss/identifikatory? Бросайте их использовать, есть нормальные классы, которые можно использовать сколько угодно раз на странице. Идентификаторы нужны, навскидку, разве что для связки input с label.

2) "Почему то не работает @font-face, когда пытаюсь подключить шрифт в нескольких форматах" Это вы сейчас так пошутили? http://li.tl/i/e/OglNl.png

3) В подписке на почту нет проверки ввода;

4) "Загрузить ещё 10 статей" не работает;

5) В подвале у иконок и лого при ховере заметна пауза для подгрузки ховерной картинки. Навёл мышку, иконка пропала, через некоторое время появилась ховерная.

[IvanRu08]

1) Зачем вам 2 блока с одинаковым идентификатором "search_icon"? Вы читали про идентификаторы http://htmlbook.ru/samcss/identifikatory? Бросайте их использовать, есть нормальные классы, которые можно использовать сколько угодно раз на странице. Идентификаторы нужны, навскидку, разве что для связки input с label.

2) "Почему то не работает @font-face, когда пытаюсь подключить шрифт в нескольких форматах" Это вы сейчас так пошутили? http://li.tl/i/e/OglNl.png

3) В подписке на почту нет проверки ввода;

4) "Загрузить ещё 10 статей" не работает;

5) В подвале у иконок и лого при ховере заметна пауза для подгрузки ховерной картинки. Навёл мышку, иконка пропала, через некоторое время появилась ховерная.

1. ID в форме использую для javascript, по другому насколько я знаю не получится. Все осталтное - классы.

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

3,4. Верстка будет натягиваться на wordpress, поэтому пока не реализовано.

5. Иконки скорее всего просто перекэширывались в тот момент. Сейчас все должно быть нормально.

Огромное спасибо за отзыв!

хром 44.0.2403.130

-подвал не доходит до правого края, соответственно от кого дизайн не видно;

-по левому краю отступа нету;

-значка поиска нигде не вижу;

С какого девайса смотрите? Может проблема в том, что нет адаптивной верстки? На мобильных устройствах сайт не хочет центрироваться. Edited August 11, 2015 by IvanRu08

[antonKar]

1. ID в форме использую для javascript, по другому насколько я знаю не получится

Привет из 2005-го?

 

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

У вас 404-ая по прямому пути к файлам шрифта, возможно браузер на этом спотыкается.

 

Иконки скорее всего просто перекэширывались в тот момент

Это ненормально. Я сейчас зашёл с другого браузера и опять моргание. Я очищу кеш и опять будет моргание. Это баг, который надо исправлять, а не делать отмазки.

[IvanRu08]

 

1. ID в форме использую для javascript, по другому насколько я знаю не получится

Привет из 2005-го?

 

 

 

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

У вас 404-ая по прямому пути к файлам шрифта, возможно браузер на этом спотыкается.

 

 

 

Иконки скорее всего просто перекэширывались в тот момент

Это ненормально. Я сейчас зашёл с другого браузера и опять моргание. Я очищу кеш и опять будет моргание. Это баг, который надо исправлять, а не делать отмазки.

 

1. Понял. Спасибо, буду копать в этом направлении. Просто не нашел больше способов реализовать скрытие сразу несколько элементов. Знаний маловато.

2. Со шрифтами попробую разобраться.

3. Не понимаю в чем проблема. Это же обычное hover, только иконки в формате svg. Даже не знаю в чем дело. 

[antonKar]

Даже не знаю в чем дело

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

[IvanRu08]

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

Спрайтик сделаем. Не подскажете, как можно подгружать заранее картинки? 

[antonKar]

 как можно подгружать заранее картинки?

 

 

Можно делать небольшие спрайтики

Edited August 11, 2015 by antonKar

[IvanRu08]

@antonKar, Спасибо за советы! Спрайты сделал, теперь все как надо. Буду разбираться дальше 

[savinovka]

 

хром 44.0.2403.130

-подвал не доходит до правого края, соответственно от кого дизайн не видно;

-по левому краю отступа нету;

-значка поиска нигде не вижу;

С какого девайса смотрите? Может проблема в том, что нет адаптивной верстки? На мобильных устройствах сайт не хочет центрироваться.

 

стационарный комп, 1024*768. кста, слева отступ появился. подвал пропал. появился поиск, но ведёт себя странно...

[IvanRu08]

стационарный комп, 1024*768. кста, слева отступ появился. подвал пропал. появился поиск, но ведёт себя странно...

Спасибо. Буду разбираться

Edited August 12, 2015 by IvanRu08