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

[djan]

Решил  слегка поправить http://djan.bl.ee/Stroyinfo/hhh.png этот макет.

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

http://djan.bl.ee/Stroyinfo/INDEX.htm

 

[Ludwig Voltman]

В новых тегах разбираюсь плохо. Просто про верстку напишу.

1) Первое, что бросается в глаза - горизонтальная прокрутка и большой отступ справа. Это из-за того, что логотип вложен в враппер, причем ширина логотипа больше ширины враппера.

2) Зачем врапперу задана статичная высота (height)? Это относится и к некоторым другим divам

3) Разметка шапки мне показалась очень сложной.

Я бы иначе нарезал макет. Левая и правая часть логотипа (а это один и тот же рисунок) может быть зациклена. Я бы вырезал эту часть и назначил её как body {background url(...) repeat-x; Среднюю часть логотипа (с домом и облаками я бы включил как отдельный блок в wrapper, а телефон спозиционировал относительно окна браузера.

В вашем варианте если экран монитора будет шире логотипа - изображение с домом будет дублироваться.

4) В оформлении классов лучше избегать сочетания строчных и прописных букв если нет специальной системы организации классов

Edited November 29, 2013 by Ludwig Voltman

[djan]

Какое у тебя разрешение экрана? По адаптивному дизайну в mozilla всё ровно.

А вот по поводу логотипа - там всё идёт одной картинкой http://dlelab.ru/701-maket-sayta-stroyinfo.html

[Ludwig Voltman]

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

[djan]

Спасибо - не заметил.

Поменял и лого так как не хочется с тем возиться.

[djan]

Хотелось бы какой-нибудь критики по-поводу тегов.

[Animkim]

Названия классов, это ужас! Еще и через пробелы, никогда так не делайте...

п.с да понял дурак насчет пробелов.

Edited December 3, 2013 by Animkim

[djan]

Название именно каких классов,тебя не устраивает? единственные  названия которые могут вызывать  подозрение, отвращение или ужас: #usluga1, #usluga2. Остальное написано в меру эстетично и читабельно.

 

 

Еще и через пробелы

Чтобы далеко не ходить - http://htmlbook.ru/samcss/klassy. Пункт  Одновременное использование разных классов

Edited December 3, 2013 by djan

[Ludwig Voltman]

Тоже решил сверстать этот макет из любопытства. Обнаружил любопытное поведение background'a в firefox, если задать его расположение по центру при масштабировании (я пытался лого сделать бэкграундом - не получилось). Спрошу потом на форуме.

В новых тегах я плохо разбираюсь вот ещё порция критики по макету:

1) в оригинальном макете используются 3 разновидности нелегального шрифта myriadpro (regular, bold, semi-bold). Верхнее меню и a:hover в меню сделаны градиентом. Здесь этого нет.

2) слишком сложно сделана горизонтальная колонка под меню (там, где 3 картинки с текстом). Картинки я бы сделал через img, а не через background. Кроме того, при добавлении текста в эти колонки (туда, где написано "комплексная разработка", "строительные работы" и т.п.) текст перекрывает картинку, и залазит на колонку, которая идет ниже. Кроме того в макете ссылка "подробнее" (если не ошибаюсь) расположена справа, а не слева.

3) Три верхних колонки с картинками одинаковы. 3 отдельных класса не нужно, можно обойтись одним.

4) если мы добавим текст в div с классом content2, то этот текст полезет вниз и перекроет нижнюю навигационную панель и футер. Аналогичный баг происходит с div с классом text. Нужно убрать фиксированную высоту отовсюду, где это возможно

5) косяки с логотипом остались те же. Я ошибся с background'ом. В firefox он ведет себя непредсказуемо. Но вполне можно засунуть background в отдельный див (я сделал так)

6) ну и так, перфекционизм: мне кажется, что <br> в верстке лучше не использовать, т.к. он относится к дизайну, а не к информации, а значит ему не место в html. Перенос строки можно сделать путем комбинации блочного и строчного элементов, а также через фиксированную ширину.

Edited December 3, 2013 by Ludwig Voltman

[djan]

Спасибо интерес к работе и критику.

1.По поводу шрифта - как ты его определил - если не секрет.

 

 

 Верхнее меню и a:hover в меню сделаны градиентом. Здесь этого нет.

Смотрим style.css -> 130 строчка

2.

 

 

слишком сложно сделана горизонтальная колонка под меню

Ну это уже кому как.

 

Картинки я бы сделал через img, а не через background

Через  img вставляется картинки которые являются частью меняющегося контента.

 

Кроме того, при добавлении текста в эти колонки (туда, где написано "комплексная разработка", "строительные работы" и т.п.) текст перекрывает картинку, и залазит на колонку, которая идет ниже.

 

ширина  div'a на то и рассчитана - что бы  тот текст как раз туда вмещался - понадобится расширим.

 

Кроме того в макете ссылка "подробнее" (если не ошибаюсь) расположена справа, а не слева.

 

Вот этого не понимаю - у меня это блок сверстан как на макете.

 

3) Три верхних колонки с картинками одинаковы. 3 отдельных класса не нужно, можно обойтись одним. 4) если мы добавим текст в div с классом content2, то этот текст полезет вниз и перекроет нижнюю навигационную панель и футер. Аналогичный баг происходит с div с классом text. Нужно убрать фиксированную высоту отовсюду, где это возможно

Тут возможно.

5) Если ты про

горизонтальная прокрутка и большой отступ справа.

то уже убрал http://djan.bl.ee/Stroyinfo/NoName2.jpg

 

6)<br>Не логично ставить между div'вами а для переноса строк вполне к месту.

[Ludwig Voltman]

1. Шрифт определяется через photoshop. Нужно кликнуть по кнопке "написание текста" (буква Т) и навести курсор на текст. В окошке появится использованный шрифт, размер, межстрочный, межбуквенный интервал и т.п.

2. Про градиент - действительно, для a:hover градиент прописан. а для панели навигации? Скину ссылку для сравнения: навигационная панель из макета и эта же панель на твоей верстке.

http://i.imgur.com/sm9Ig5e.jpg

ширина  div'a на то и рассчитана - что бы  тот текст как раз туда вмещался - понадобится расширим.

С шириной все хорошо, дело в высоте. Вот как отображается макет, если добавить туда больше текста:

http://i.imgur.com/mg0m6Zy.jpg

то уже убрал

 

Проблема осталась. Всё-таки лучше делать через div.

http://prntscr.com/28fn24

[djan]

Для навигации не прописан - так как пришлось лого менять,а с ним и цвет меню - решил что там градиент не к месту.

С нетбука скриншот?Скорее всего из-за того что при уменьшении окна длинна меню остаётся фиксированной  -  а картинки меняется.

[Ludwig Voltman]

Скриншоты делал с нетбука. Но на обычном компьютере то же самое. Бэкграунд растягивается на ширину экрана. Если уменьшить окно, то бэкграунд стянется на ширину окна. А когда отводишь прокрутку влево -- появляется белая полоса.

[djan]

Бэкграунд растягивается на ширину экрана - wrap всё время остаётся 920px. Поэтому и появляется такая полоска.

А на адаптивную верстку я не претендую.

Edited December 5, 2013 by djan

[djan]

Ещё не большой момент - при увеличении до 125%, блок  "Онлайн заказ" вылазит туда куда не должен.

как исправить?

Edited December 6, 2013 by djan