Оцените новую вёрстку

[DivMan]

Макет http://i68.fastpic.ru/big/2014/1010/68/1c27718eeacf8d810134663fec089368.jpg

Вёрстка http://allnet.16mb.com/remont/

 

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

 

За основу взял boilerplate. Так как в этой сборке уже прописан clearfix, я элементам решил не задавать его с помощью :after, а просто прописывал класс clearfix.

 

Мой css код начинается с 100 строчки. в файле main.css

 

У меня есть 1 вопрос: почему, когда сжимаешь ширину сайта, то фон шапки обрезается?

 

Сколько можно взять денег за такую вёрстку?

[npofopr]

1000 рублей)

Сделайте pixelPerfect, у вас очень много расхожестей с макетом. Да и сам макет  не из лучших, как мне кажется.

По моему вы .clearfix пихаете везде, куда надо и не надо. Вот зачем он у article стоит? Зачем на main, header? и т.п.

[xzarxzes]

http://validator.w3.org/check?uri=http://allnet.16mb.com/remont/&charset=(detect+automatically)&doctype=Inline&group=0

 

Это судя по всему цитата.

“Стройка - единственный и лучший путь развития страны” - Н. Тимофти

 

http://i.imgur.com/7oUDWep.png

В футере тоже пункты меню уехали на новую строку, в firefox

 

Для копирайта больше подходит элемент small

 

upd: фон обрезается наверно из за бага связанного с вьюпортом, тут можно почитать, там сбоку есть первод на русском

Edited October 10, 2014 by xzarxzes

[DivMan]

http://validator.w3.org/check?uri=http://allnet.16mb.com/remont/&charset=(detect+automatically)&doctype=Inline&group=0

 

Почему на валидацию не пускает? 

[pangurban]

Неправильное использование html5 элементов.

Хромает структура разметки.

 

Например .header и .main-logo можно объединить в .header.

Также, не надо в nav вставлять ul когда один уровень меню или это не продиктованно техническими особеностями.

Ну и так далее.

Edited October 10, 2014 by pangurban

[xzarxzes]

 

http://validator.w3.org/check?uri=http://allnet.16mb.com/remont/&charset=(detect+automatically)&doctype=Inline&group=0

 

Почему на валидацию не пускает? 

 

Не знаю, втавтье вручную ссылку на страницу в валидатор

Также, не надо в nav вставлять ul когда один уровень меню или не нужно для технических целей и т.д.

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

Edited October 10, 2014 by xzarxzes

[Aleksandr.L]

Зачем здесь ширина? Из-за нее эта проблема: 

http://i.imgur.com/7oUDWep.png В футере тоже пункты меню уехали на новую строку, в firefox

[DivMan]

 

http://i.imgur.com/7oUDWep.png

В футере тоже пункты меню уехали на новую строку, в firefox

 

 

 

А у меня в firefox 32 ничего не уехало

[xzarxzes]

А у меня в firefox 32 ничего не уехало

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

Edited October 10, 2014 by xzarxzes

[DivMan]

 

Зачем здесь ширина? Из-за нее эта проблема: 

 

 

http://i.imgur.com/7oUDWep.png В футере тоже пункты меню уехали на новую строку, в firefox

 

Задал ширину, потому что флоатил, а я где -то в теории читал, если элемент надо флоатить, то ему нужно задавать ширину 

 

А у меня в firefox 32 ничего не уехало

У меня линукс, там всегда уезжает то что не уезжает на виндусе

 

 

Теперь придётся на виртуалку поставить все оси и тестить на всех? 

[xzarxzes]

Теперь придётся на виртуалку поставить все оси и тестить на всех? 

 

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

Edited October 10, 2014 by xzarxzes

[Aleksandr.L]

Задал ширину, потому что флоатил, а я где -то в теории читал, если элемент надо флоатить, то ему нужно задавать ширину 

• Элемент отображается как блочный, так словно ему установлено свойство display: block;
• Элемент по ширине сжимается до размеров содержимого, если для элемента явно не установлена ширина width;
• Элемент прилипает к левому (left) или правому краю (right);
• Все остальное содержимое страницы, идущее в HTML коде после элемента с float, обтекает его;

Источник: http://habrahabr.ru/post/136588/

[pangurban]

 

Также, не надо в nav вставлять ul когда один уровень меню или не нужно для технических целей и т.д.

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

 

 

А что дает список кроме двух лишних уровней вложенности?

Edited October 10, 2014 by pangurban

[xzarxzes]

 

А что дает список кроме двух лишних уровней вложенности?

 

Это полезно для скринридеров, так же у вас есть лишние элементы которые можно застилить.

Edited October 10, 2014 by xzarxzes

[pangurban]

Это полезно для скринридеров, так же у вас есть лишние элементы которые можно застилить.

 

Думаю гораздо полезнее будет поставить атрибут role.

Да и если выбирать между чистотой разметки и сомнительной пользой для скриндера, то выбор очевиден.

Edited October 10, 2014 by pangurban

[xzarxzes]

Думаю гораздо полезнее будет поставить атрибут role.

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

Тогда делайте без списка.

[Sabay]

Привет ты не совсем разобрался с классом .clearfix, этот класс заставляет контейнер <<очистить>> плавающие элементы которые в нем содержаться.

В данной верстке класс применяется не один раз подряд и не к месту, например в хедере.

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

И почему все здесь пишут .clearfix, .clearfix?  Говорящий класс?? Вот Дэн Сендерхольм  предлагает так  <div class="main group">

.group:after {

content:'';  итд итп;

}

Основной класс говорящий и смысловой, главный, main,  а group, или .clearfix дополнительный и несущий определенную функцию

 Почитай книгу CSS ручной работы, Дэна Сендерхольма там очень здорово про .clearfix именно написано.

Если я не прав, дискуссируем господа верстальщики.

[pangurban]

Какие еще классы для clearfix? На дворе 2014 год. Используйте препроцессоры.

%clearfix{  &:after{    container: '';    display: table;    clear: both;  }}ul{  @extend %clearfix;}

Edited October 12, 2014 by pangurban

[npofopr]

Какие еще классы для clearfix? На дворе 2014 год. Используйте препроцессоры.

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

 

Подумайте над ситуацией, когда исходники вашей верстки будут утеряны. И другому разработчику, после вас, будет очень сложно вычищать из ваших стилей все ваши @extend %clearfix; и т.п. Куда проще ему будет просто убрать у элемента класс .clearfix.

[pangurban]

Подумайте над ситуацией, когда исходники вашей верстки будут утеряны. И другому разработчику, после вас, будет очень сложно вычищать из ваших стилей все ваши @extend %clearfix; и т.п. Куда проще ему будет просто убрать у элемента класс .clearfix.

 

Не совсем понимаю в чем сложность между убрать %clearfix у элемента из таблицы стилей и удалить у того же элемента класс в разметке?

По моему, разница лишь в том, что в первом случае нужно будет в редакторе нажать ctrl+f и найти нужный селектор. Зато разметка становится чище.

Нет?

[swandev]

 

Какие еще классы для clearfix? На дворе 2014 год. Используйте препроцессоры.

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

 

Подумайте над ситуацией, когда исходники вашей верстки будут утеряны. И другому разработчику, после вас, будет очень сложно вычищать из ваших стилей все ваши @extend %clearfix; и т.п. Куда проще ему будет просто убрать у элемента класс .clearfix.

 

 

и чем же они разные? разница лишь в том, где он записывается, в html - класс, миксин в less/sass/etc. (для меня второе удобнее)

class="clearfix"

.clearfix() 

 

найти и удалить в обоих случаях не составит труда

Edited October 12, 2014 by ALEEX SWN

[npofopr]

разница лишь в том, где он записывается

вы плохо читаете:

когда исходники вашей верстки будут утеряны

 

 

+ не каждый верстальщик умеет пользоваться препроцессорами. 

+ чтобы быстро исправить исходник, его надо будет еще потом скомпилировать обратно в css. Если это будет sass, тут надо будет еще и руби ставить. Хотя конечно сейчас много онлайн-генераторов.

+ а если сам пользователь захочет изменить что то, прочитав первую страницу htmlbook? очистить стили для него будет скорее всего очень тяжело.

 

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

А если блок в 40% может сменить свой смысл, то лучше, наверно, прописать ему класс.

Ну и очень редко в проектах, после выхода их в продакшн, получается использовать "исходники". 

У нас, например, несколько человек, которые могут что то менять. 

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

[Sergik+]

Мне кажется если верстальщик не знает препроцессоров то нечего в мой код лазить.

[npofopr]

Мне кажется если верстальщик не знает препроцессоров то нечего в мой код лазить.

вы как то слишком узко мыслите) мир не только из верстальщиков состоит) а в код может влезть любой.

Но это всё лирика. Каждый делает как ему нравится.

[Sergik+]

 

Мне кажется если верстальщик не знает препроцессоров то нечего в мой код лазить.

вы как то слишком узко мыслите) мир не только из верстальщиков состоит) а в код может влезть любой.

Но это всё лирика. Каждый делает как ему нравится.

 

Так программист никогда не увидит sass, мы вроде о препроцессорах говорим.