Ultumate TV

[ohinem]

Доброго времени суток!

Хочу представить Вам мою вёрстку. Хотелось бы услышать Вашу оценку и комментарии по поводу ошибок.

Во всех браузерах(кроме IE) верстка работает стабильно.

Вёрстка

Изображение макета

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

Edited July 31, 2013 by ohinem

[cris7iano]

главное чтоб блоки были пиксель в пиксель,а текст может быть с погрешностью.

два футера это бред.

и две навигации тоже не то.

Edited July 31, 2013 by cris7iano

[121990]

Сконвертируй шрифт в eot для ie5-8.

Разберись что написано в ластике. Тупо скачивать чужой, и прилинковывать его на сайт с лишним кодом. Не есть хорошо.

[ohinem]

главное чтоб блоки были пиксель в пиксель,а текст может быть с погрешностью.

два футера это бред.

и две навигации тоже не то.

Блоки попиксельно! Т.е. можно считать это попиксельной вёрсткой?

Два футора и нави - это не моя задумка. Моя цель научиться верстать глядя на макет, на данный момент - это один из лучших макетов, которых я нашёл.

Сконвертируй шрифт в eot для ie5-8.

Разберись что написано в ластике. Тупо скачивать чужой, и прилинковывать его на сайт с лишним кодом. Не есть хорошо.

Простите немного не понял. Ластик - это HTML5Shiv?

Сконвертируй шрифт в eot для ie5-8.

Это просто магия какая-то честно говоря! Спасибо огромное!

Edited July 31, 2013 by ohinem

[121990]

Простите немного не понял. Ластик - это HTML5Shiv?

reset.css

Это просто магия какая-то честно говоря!

Есть прекраснейшая статья про шрифты на htmlbook

[ohinem]

Есть прекраснейшая статья про шрифты на htmlbook

Перед тем, как поставить eot шрифт я успел часть этой статьи прочитать. Но до этого я даже не подозревал, что такое возможно.

reset.css

А разве там есть что-то лишнее? Вроде всё к месту!

Какие ещё есть замечания? Буду рад выслушать!

Edited July 31, 2013 by ohinem

[121990]

А разве там есть что-то лишнее? Вроде всё к месту!

Например: Вот это тут зачем?

blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Суть в том. Что, похвально когда на сайте ластик заточенный под сайт. И сделанный в индивидуальном стиле, который отличается от аналогов. Но это лично мое мнение...

[ohinem]

Хммм... Интересно!

Да меня эта часть кода тоже смущала, но я руководствовался тем, что это моя первая серьёзная вёрстка. И не зная всех тонкостей, решил оставить для пущей верности. Ну раз вы говорите, что оно того не стоит - ок, спасибо!

[Vin]

- Шрифты для всех основных браузеров легко делаются через шрифтобелку http://www.fontsquirrel.com.

- Желательно сделать hover-эффекты для кнопок-ссылок, а также для footer.top>ul и nav#top.

- 2013 год на дворе, подсказки в полях формы следует делать не с помощью атрибута value, а с помощью специального атрибута placeholder. Для браузеров, не поддерживающих этот атрибут, есть скрипт placeholder.js.

А так, в целом — да, неплохо.

Edited August 1, 2013 by Vin

[ohinem]

Шрифты для всех основных браузеров легко делаются через шрифтобелку http://www.fontsquirrel.com

Спасибо, буду знать!

Желательно сделать hover-эффекты для кнопок-ссылок, а также для footer.top>ul и nav#top

Все кнопки теперь с hover.

с помощью специального атрибута placeholder

Я искал решение этой проблемы, т.к. не имею ни малейшего познания в JS. Спасибо. Исправил.

Подскажите пожалуйста, что ещё криво?

Edited August 1, 2013 by ohinem

[Struggle]

#login {
width: 319px;
height: 94px;
background: #212121;
margin-top: 32px;
margin-right: 52px;
padding: 18px;
float: right;
}

убрать длину,

Текст в слайдере должен быть текстом, а не общей картиной

<section id="list">
<a href=""><img src="img/list1.jpg" title="" alt=""></a>
<a href=""><img src="img/list2.jpg" title="" alt=""></a>
<a href=""><img src="img/list3.jpg" title="" alt=""></a>
<a href=""><img src="img/list4.jpg" title="" alt=""></a>
<a href=""><img src="img/list5.jpg" title="" alt=""></a>
<a href=""><img src="img/list6.jpg" title="" alt=""></a>
</section>

Обычно делается списком, а не ссылками

В подвале меню, там безобразие, и два footer

Edited August 1, 2013 by Struggle

[ohinem]

убрать длину

Даже не представляю, а какая разница-то?

Текст в слайдере должен быть текстом

А разве там целиком картинка?

Обычно делается списком, а не ссылками

Сделал ссылками, т.к. при таком варианте не стоит дописывать лишний код для списков. Это принципиально важно, сделать списком?

В подвале меню, там безобразие, и два footer

В чём конкретно заключается безобразие?

[Struggle]

Убери длину в инспекторе браузера, увидишь, насчет слайдера ошибся, не очень видно выделение, насчет списка не принципиально, но принято так, вроде этикета, как с меню, делаются списки

В подвале два <footer>

он должен быть 1, этикет

обернуть весь подвал в 1 <footer>, а там уже классы должны пойти без <footer class='">

Edited August 1, 2013 by Struggle

[ohinem]

Насчёт этикета понял. Исправлю вечером.

NAV блоки... Хммм... Тоже 1 сделать?

[Struggle]

Насчёт этикета понял. Исправлю вечером.

NAV блоки... Хммм... Тоже 1 сделать?

На то и нужен этот тег, навигация, меню, его не нужно трогать, там всё гуд

[SelenIT]

принято так, вроде этикета

Имхо, не лучшее обоснование. Хорошая практика хороша тогда, когда дает практические плюсы (напр. закавычивание всех атрибутов позволяет не беспокоиться о пробелах в их значениях и упрощает поддержку кода, разметка заголовков элементами hn, а абзацев — p, делает текст понятнее для поисковиков и доступнее для экранных читалок и т.п.), а действия, повторяемые непонятно зачем просто потому что «так принято» (напр., обязательная простановка концевых слешей в одиночных тегах в HTML) приносят не пользу, а лишь путаницу.

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

[ohinem]

Убери длину в инспекторе браузера

Вот это мне не совсем понятно! Можете разъяснить?

Списки решил не делать. У всех свой подход к вёрстке.

А вот футер переделал.

[Struggle]

Убери длину в инспекторе браузера

Вот это мне не совсем понятно! Можете разъяснить?

Списки решил не делать. У всех свой подход к вёрстке.

А вот футер переделал.

#login {
width: 319px;
height: 94px;
background: #212121;
margin-top: 32px;
margin-right: 52px;
padding: 18px;
float: right;
}

Значит смотрим, стоит padding 18px, значит со всех сторон добавятся по 18px, вроде бы все гуд, если не дописывать длину, т.к если её дописать, то форма логина обрежеться на несколько пикселей, и получиться не ровное соотношение сторон внутри блока, сверху 18px, снизу будет 14 пикселей черного фона

Edited August 1, 2013 by Struggle

[Vin]

Все кнопки теперь с hover.

При наведении на кнопки в первый после загрузки раз происходит дёрганая смена фоновых картинок. Думаю, использование CSS-градиента решит эту проблему.