Оцените верстку странички. Не сайт

[Starter]

Вот оригинал: http://windows.microsoft.com/ru-ru/windows7/help/getting-started, вот моя верстка: http://getting-started.ucoz.ru/

Ни в коем случае не копия. Просто попытка реализовать основные моменты своими силами.

Ссылки не работают.

Требуется мнение специалиста

1. Можно ли сократить коль-во Div ов и имеет ли это смысл?

2. Какие замечания по семантике, компоновке и к именам классов?

4. Пишите обо всем что видите и чего не видите из того что должно быть.

5. Надеюсь, доп. код Юкоза под footer Вас не остановит.

Наверняка, в процессе возникнут ещё вопросы и доработки. Не надо советовать хорошие платные хостинги

http://getting-started.ucoz.ru/getting-started.rar - локальная копия.

P. S. Обращение к модераторам: спасибо за перемещение темы. Название ещё сократите пожалуйста до адекватного.

Edited October 6, 2012 by Starter

[Starter]

Люди! Неужели ни у кого ничего так и не "расползлось"? Быть не может.

Что, вообще нет замечаний и все идеально? Лично меня так и не оставляет ощущение что я пишу какую-то фигню.

Именование классов - настоящая проблема

Может есть какая нибудь "система"? Кто как её решает?

[hedgehog]

Что за ерунда с доктайпом? И почему он 4.1 transitional, кстати? 5 не подходит?

.video, .item - это список, не изобретайте велосипедов. Сюда же:

<div class="header">
 <p><a href="#">Войти</a><span class="delimiter">|</span><a href="#">Россия</a><span class="delimiter">|</span><a href="#">Все веб-сайты Майкрософт</a></p>
</div>

Код так и бомбите - практически без какой-либо индентации?

Что за ерунда после </html> ?

[Starter]

Что за ерунда с доктайпом? И почему он 4.1 transitional, кстати? 5 не подходит?

Там XHTML 1.0 transitional вроде бы. Подходит, но пока что так.

.video, .item - это список, не изобретайте велосипедов.

Предлагаете сделать через контекстные селекторы списков? Или просто не семантично?

<div class="header">
<a href="#">Войти</a><span class="delimiter">|</span><a href="#">Россия</a><span class="delimiter">|</span><a href="#">Все веб-сайты Майкрософт</a></div>

Код так и бомбите - практически без какой-либо индентации?

Это один из способов убрать пробелы между инлайн-блоками. Это было сделано уже после проверки кода.

Что за ерунда после </html> ?

Комментарий. Я туда для удобства убираю "лишний" код в процессе разработки макета.

[hedgehog]

Там XHTML 1.0 transitional вроде бы. Подходит, но пока что так.

Перед доктайпом - пустая строка

Предлагаете сделать через контекстные селекторы списков? Или просто не семантично?

Что такое "контекстные селекторы списков"? Семантически - это списки, зачем вешать кучу классов и путаться в двух соснах, если можно обойтись ul?

Это один из способов убрать пробелы между инлайн-блоками. Это было сделано уже после проверки кода.

Я имел ввиду, что менюшка - это тоже, по сути, список. А про индентацию я говорил "вообще", по всему коду

Комментарий. Я туда для удобства убираю "лишний" код в процессе разработки макета.

Там висит див.

[Starter]

Перед доктайпом - пустая строка

Там висит див.

Не вижу...

Семантически - это списки, зачем вешать кучу классов и путаться в двух соснах, если можно обойтись ul?

Понятно

Я имел ввиду, что менюшка - это тоже, по сути, список. А про индентацию я говорил "вообще", по всему коду

Чем Вы смотрите код?

[hedgehog]

Чем Вы смотрите код?

Исходник? Чем угодно: CTRL+U в браузерах, curl. Сейчас перед доктайпом вагон тегов, я так понимаю это ucoz старается. Нашли куда выкладывать

[tori]

Делать бордеры в менюшке картинками, причём не бэкграундом, а именно img - верх извращения Почитайте, что такое border и border-radius. Градиент тоже, слава всем богам, теперь можно делать не картинкой, а стилями.

Вёрстка разъехалась во многих местах, по сравнению с исходником. Футер например. Вообще - крайне небрежное отношение к исходному макету, шрифты не того размера, отступы не того размера и т.д.

В форме поиска вверху - неправильного цвета рамочка, не помешал бы placeholder.

[Starter]

Делать бордеры в менюшке картинками, причём не бэкграундом, а именно img - верх извращения

ie 6 - тоже извращение

Почитайте, что такое border и border-radius.

Я вижу что его поддержка гарантирована только в современных версиях барузеров. Начиная с ie 9.

http://htmlbook.ru/css/border-radius

Вёрстка разъехалась во многих местах, по сравнению с исходником. Футер например.

Буду благодарен за скриншоты. И название используемого браузера.

Вообще - крайне небрежное отношение к исходному макету, шрифты не того размера, отступы не того размера и т.д.

Вы правы. Это я побоялся что меня привлекут за копирайт

В форме поиска вверху - неправильного цвета рамочка, не помешал бы placeholder.

http://htmlbook.ru/html/textarea/placeholder Ужс совместимости.

А за подсказку - спасибо.

я так понимаю это ucoz старается. Нашли куда выкладывать

Да... виноват

Повторяю некоторые вопросы:

1. Можно ли сократить коль-во Div ов и имеет ли это смысл?

2. Какие замечания по семантике, компоновке и к именам классов?

просветите, пожалуйста.

Edited October 14, 2012 by Starter

[tori]

ie 6 - тоже извращение

В смысле? Он понимает бэкграунды, если вы об этом.

Я вижу что его поддержка гарантирована только в современных версиях барузеров. Начиная с ie 9.

http://htmlbook.ru/css/border-radius

Да, но для версий ie8-ie6 есть вполне прилично выглядящий хак. Вот тут можно ознакомиться: http://www.xiper.net/collect/html-and-css-tricks/overclock-site/rounding-corners-review.html

Плюс, можно ещё почитать про graceful degradation

Буду благодарен за скриншоты. И название используемого браузера.

Ну если это по задумке автора в целях избегания проблем с копирайтом, то вопрос снимается

http://htmlbook.ru/html/textarea/placeholder Ужс совместимости.

А за подсказку - спасибо.

Опять же - для тех, кто это свойство не поддерживает, есть лекарство.

http://www.xiper.net/collect/js-plugins/html5-and-css3/jquery-placeholder.html

Плюс, опять graceful degradation

Повторяю некоторые вопросы:

1. Можно ли сократить коль-во Div ов и имеет ли это смысл?

2. Какие замечания по семантике, компоновке и к именам классов?

1. Да, можно - как уже писали выше, списки из дивов с классами переделать в списки на ul/li. Верхнее меню, "Другие видеоролики" например.

2. а) Использовать классы вроде video или menu в чистом виде можно себе позволить только на маленьких сайтах. На сайте, размер которого превышает 20 страниц и срок работы которого превышает полгода - будете огребать проблемы. Если действительно интересно, то советовала бы почитать про БЭМ от Яндекса, и как стоит именовать классы.

б) "Другие видеоролики" - у элементов задана высота. Если количество текста будет больше, чем влезает в эту высоту - будет крайне не красиво. Лучше переделать это с использованием display:inline-block; без фиксированной высоты (ну и конечно - на списки).

[Viper]

Опять же - для тех, кто это свойство не поддерживает, есть лекарство.

http://www.xiper.net...laceholder.html

Плюс, опять graceful degradation

я бы это скорее отнес к Progressive Enhancement, ИМХО.

Если действительно интересно, то советовала бы почитать про БЭМ от Яндекса, и как стоит именовать классы.

Почитать стоить, но повсеместно его применять не советую, разве-что методику верстки независимыми блоками. Даже не знаю кому, кроме самого Яндекса, этот БЭМ(full) был бы нужен...ИМХО.

[tori]

я бы это скорее отнес к Progressive Enhancement

Разница не принципиальна

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

В чистом виде - конечно, а вот именно вёрстка независимыми блоками и основные принципы наименования классов - очень полезно.

[Starter]

Так.

Обновление макета:

1. В форму добавлен placeholder.

2. Менюшки с закругленными краями без картинок.

3. Пункты меню структурированы в виде списка. ИМХО все усложнилось после этого. Одна надежда что ренднер стал быстрее.

4. Добавлены необходимые "хаки" для старых браузеров.

5. Doctype заменен на HTML 5.

Меня интересует правильно я ли я сделал совместимость placeholder и CSS 3 с ie6.

Кстати после того как я попытался удалить класс submenu, конструкция вида:

.menu li:hover .submenu {
  display: block;
}

замененная на:

.menu li:hover .menu li ul {
  display: block;
}

работать перестала. Это нормально?

Теперь на странице только ссылка на скачивание архива. Чтобы не было разночтений по коду.

Edited October 17, 2012 by Starter

[Viper]

Меня интересует правильно я ли я сделал совместимость placeholder и CSS 3 с ie6.

IE6? Серьезно? Зачем?

[Starter]

Меня интересует правильно я ли я сделал совместимость placeholder и CSS 3 с ie6.

IE6? Серьезно? Зачем?

У меня нет старых версий браузеров. Вместо этого я хочу быть уверен в правильном применении методов совместимости.

[Viper]

У меня нет старых версий браузеров. Вместо этого я хочу быть уверен в правильном применении методов совместимости.

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

Возможно, мы не поняли друг друга. То есть, зачем ты до сих пор поддерживаешь IE6?

[Starter]

Опять же, зачем это тебе? Сейчас уже IE7 перестают поддерживать(Google, например, уже давно его не поддерживает и в ближайшем будущем может отказаться и от IE8). Возможно, мы не поняли друг друга. То есть, зачем ты до сих пор поддерживаешь IE6?

Конкретно в этом учебном макете я "поддерживаю" ie6 потому что в принципе должен уметь делать и это. А вообще, я не думаю что проблема "старого браузера" когда нибудь совсем потеряет актуальность. Просто "ie6" будет называться ie10 к примеру. Нужно быть в курсе.

[tori]

Теперь на странице только ссылка на скачивание архива. Чтобы не было разночтений по коду. 

А можно всё-таки сам макет где-нибудь в видимости выложить, а не просто ссылку на архив? Закачивать его себе, распаковывать, открывать - слишком много телодвижений.

[Starter]

А можно всё-таки сам макет где-нибудь в видимости выложить, а не просто ссылку на архив? Закачивать его себе, распаковывать, открывать - слишком много телодвижений.

Можно

Но внимание: Ucoz наотрез отказался принимать PIE_uncompressed.htc в, поэтому скругления все же могут отображаться некорректно.

Ссылка на таблицу стилей:

<link type="text/css" rel="StyleSheet" href="/_st/my.css">

Описание класса:

.discover .menu li {
display: inline-block; margin: 0;
background: url('../img/tabh_bkgdsel_light.gif') repeat-x;
border-radius: 5px; border: 1px #E7E9E9 solid;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
behavior: url('PIE.htc');
}

Предполагается в папке с css файлом.

Edited October 17, 2012 by Starter

[tori]

Ucoz наотрез отказался принимать PIE_uncompressed.htc

Абсолютный путь можно попробовать прописать.

Ещё из недочётов:

1. В форме поиска вверху - зачем textarea? Логичнее то использовать input. И если уж использовать textarea, то хотя бы resize: none поставить.

2. <div class="video">...</div><div class="video">...</div> - красивее заменить на <ul class="video"><li>..</li><li>..</li></ul> - кода меньше, а в css незначительные правки.

3. Для меню в серёдке для li нужно добавить маргин снизу, а то при переносе они друг к другу прилипают.

4. Картинка рядом с "Познакомьтесь с Windows 7" - я бы посоветовала не ей назначать класс, а обернуть её в див с таким классом. Т.к. если вдруг понадобится добавить какую-нибудь подпись под картинку (в реально работе,а не тестовом макете - это сплошь и рядом случается) возникнут проблемки.

5. Самое верхнее меню - тоже переделываем на ul/li. Разделители между ними делаем не палочкой, а border-left:1px solid #000000; Чтобы избавиться от палочки для первого элемента - :first-child {border-left:0px;}. Для ИЕ6 есть эмуляция, если сильно хочется с ним возиться.

6. Для всех ссылок ховер всё-таки нужно прописывать обязательно. Или подчёркивание, или изменение цвета.

7. Для кнопки с лупой хорошо бы поставить cursor:pointer, чтобы лапа была на ней. И если совсем красоты хочется, то бэкграунд рыжий можно сделать градиентом с круглыми углами (для ИЕ есть эмуляция), и при наведении - менять градиент в обратную сторону.

[Starter]

Пардонте за отсутствие. Тема продолжается

Недочеты учтены. Макет обновлен.

5. Самое верхнее меню - тоже переделываем на ul/li. Разделители между ними делаем не палочкой, а border-left:1px solid #000000; Чтобы избавиться от палочки для первого элемента - :first-child {border-left:0px;}. Для ИЕ6 есть эмуляция, если сильно хочется с ним возиться.

Эмуляции для ie пока нет.

7. Для кнопки с лупой хорошо бы поставить cursor:pointer, чтобы лапа была на ней. И если совсем красоты хочется, то бэкграунд рыжий можно сделать градиентом с круглыми углами (для ИЕ есть эмуляция), и при наведении - менять градиент в обратную сторону.

Сделано все же через hover.

Вопросы эмуляции и CSS3 в процессе изучения.

Приемлемо?