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

[Raccoon]

Всем привет. Прошу оценить мою первую верстку: http://continuum.besaba.com/

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

Еще одна проблема: в сафари, хроме и опере верстка плывет при сильном уменьшении масштаба.

Буду рад получить как можно больше замечаний и советов от опытных верстальщиков.

[advokatua]

Беглым взглядом совсем жутких или нубских косяков не нашел.

 

Ну, разве что кнопки нужно делать кнопками, а не дивами. 

 

И еще тут непонятно, или косяк или так было задумано, но по-хорошему так не делают.

 

 

#recent,

#categories,

#pages,

#newsletter,

#subscribe,

#subscribe div span,

#columns2 ul li p,

#columns1 ul li p,

#navigation ul li {

font-family: Arial, serif;

}

Edited December 26, 2013 by advokatua

[Ludwig Voltman]

1) Если указываете в доктайпе html5, то ссылку на файл стилей можно писать короче: <link href="..." rel="stylesheet">. Type не обязателен. При использовании тега <script> type тоже можно не указывать

2) Название сайта лучше поместить в <h1> вместо стерильного тега <span>

3) Основную навигацию необязательно заключать в тег <div id="navigation">, просто присвойте этот id списку (ul).

4) Аналогично и с <div id="columns1> и <div id="columns2">

5) Не советую указывать height для блоков с текстовым содержимым. Лучше заменить на min-height или же просто указать padding-top/padding-bottom

6) Очень намудрили с кнопками: отрицательные поля, зачем-то указано абсолютное позиционирование... Не совсем понял замысел. Это вы так хотели расположить блочные элементы горизонтально?

7) У четырех колонок в футере стилизация одинакова. Зачем заводить 4 разных id, когда можно обойтись одним?

8) специальный <div class="line"> который идет после каждого пункта меню во всех четырех колонках сильно перегружает html код. Лучше задать верхнее и нижнее подчеркивание элементам меню. Так линии наложатся друг на друга и создастся эффект объемности, которого хотел добиться дизайнер. При этом нужно отменить верхнее подчеркивание у первых пунктов через псевдокласс

9) зачем использовать везде id? Class я встретил только 1(!) раз на странице. Соотношение должно быть противоположным, имхо

Edited December 26, 2013 by Ludwig Voltman

[Raccoon]

 

Беглым взглядом совсем жутких или нубских косяков не нашел.

 

Ну, разве что кнопки нужно делать кнопками, а не дивами. 

 

И еще тут непонятно, или косяк или так было задумано, но по-хорошему так не делают.

 

 

#recent,

#categories,

#pages,

#newsletter,

#subscribe,

#subscribe div span,

#columns2 ul li p,

#columns1 ul li p,

#navigation ul li {

font-family: Arial, serif;

}

 

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

[advokatua]

Да смысл не в оптимальности, а в том, что у вас сначала указан шрифт без засечек (Ариал), и если его в системе нет, то применяется шрифт с засечками, по типу Таймз. 

[Девятый]

Да смысл не в оптимальности, а в том, что у вас сначала указан шрифт без засечек (Ариал), и если его в системе нет, то применяется шрифт с засечками, по типу Таймз. 

Объясните, пожалуйста, подробнее.

[advokatua]

Это 2 разных семейства шрифтов. Если вы первым указываете Arial, то и общее семейство остальных шрифтов должно быть подобным, т.е. sans-serif.

 

Ну, это как если вы предпочитаете пиво, приходите в бар и заказываете Балтику, а вам говорят, что его нет и предлагают Хайнекен, а вы говорите:"Та не, давай водки, и лимон". )

 

Короче говоря правильно вот так: font-family: Arial, sans-serif;

Если нужен шрифт с засечками, то как-то так: font-family: Times, serif;

[Игорь Ермаков]

Ссылки не подчёркиваются. Должны подчёркиваться. Всегда.

 

Текст в шапке не выделяется, должен выделяться. 

[Девятый]

Это 2 разных семейства шрифтов. Если вы первым указываете Arial, то и общее семейство остальных шрифтов должно быть подобным, т.е. sans-serif.

 

Ну, это как если вы предпочитаете пиво, приходите в бар и заказываете Балтику, а вам говорят, что его нет и предлагают Хайнекен, а вы говорите:"Та не, давай водки, и лимон". )

 

Короче говоря правильно вот так: font-family: Arial, sans-serif;

Если нужен шрифт с засечками, то как-то так: font-family: Times, serif;

Наглядно и доступно - спасибо

[Raccoon]

Да смысл не в оптимальности, а в том, что у вас сначала указан шрифт без засечек (Ариал), и если его в системе нет, то применяется шрифт с засечками, по типу Таймз. 

А, вот в чем дело) Действительно. По ошибке запутался и думал, что serif - это шрифт без засечек, а sans-serif - с засечками.

Edited December 31, 2013 by Raccoon

[Raccoon]

1) Если указываете в доктайпе html5, то ссылку на файл стилей можно писать короче: <link href="..." rel="stylesheet">. Type не обязателен. При использовании тега <script> type тоже можно не указывать

2) Название сайта лучше поместить в <h1> вместо стерильного тега <span>

3) Основную навигацию необязательно заключать в тег <div id="navigation">, просто присвойте этот id списку (ul).

4) Аналогично и с <div id="columns1> и <div id="columns2">

5) Не советую указывать height для блоков с текстовым содержимым. Лучше заменить на min-height или же просто указать padding-top/padding-bottom

6) Очень намудрили с кнопками: отрицательные поля, зачем-то указано абсолютное позиционирование... Не совсем понял замысел. Это вы так хотели расположить блочные элементы горизонтально?

7) У четырех колонок в футере стилизация одинакова. Зачем заводить 4 разных id, когда можно обойтись одним?

8) специальный <div class="line"> который идет после каждого пункта меню во всех четырех колонках сильно перегружает html код. Лучше задать верхнее и нижнее подчеркивание элементам меню. Так линии наложатся друг на друга и создастся эффект объемности, которого хотел добиться дизайнер. При этом нужно отменить верхнее подчеркивание у первых пунктов через псевдокласс

9) зачем использовать везде id? Class я встретил только 1(!) раз на странице. Соотношение должно быть противоположным, имхо

Благодарю за подробные подсказки и советы. Учту и исправлю все. Оставлю комментарии\вопросы по некоторым пунктам:

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

8) За этот совет отдельное спасибо! Очень много времени потерял на реализацию этих подчеркиваний. Использую ваш совет.

9) Я просто не до конца понимаю смысл назначения класса для одного уникального элемента, если он будет использоваться один раз. Поэтому я задавал id, а не class. Проясните эту тему в моем случае, пожалуйста.

[Ludwig Voltman]

Про горизонтальное позиционирование кнопок - тут все просто. Либо вы можете позиционировать их через float (задать float: left span'у перед кнопками, и кнопки обтекут его справа).

Правда возникнут сложности с вертикальным выравниванием, если элементы разной высоты. Поэтому я бы просто сделал div'ы-кнопки строчно-блочными (dispay: inline-block). Это очень удобно, т.к. элементы 1) будут выровнены по одной горизонтальной линии (baseline), независимо от высоты 2) строчно-блочным элементам можно будет задавать высоту и верхние рамки как блочным (что пригодится для кнопок). Правда сточно-блочные элементы не будут работать в IE6,7, но это решаемо (если я не ошибаюсь, в условных комментариях для этого браузера нужно прописать display: inline; zoom: 1;). Подробнее можете почитать в книге Влада Мержевича, очень сжато и по-существу.

По поводу классов и айди: разница между ними не очень большая. Id 1) имеют большую специфичность 2) используются для js-скриптов 3) могут встречаться только один раз на странице. В хорошей верстке (примеры Мейера, Макфарланда) id присваиваются основным контейнерам (header, footer, content etc.) и формам. Но многие вообще не используют id и присваивают только классы. Обычно так делают чтобы не мучиться со специфичностью и лимитом на одно использование элемента с id. В случае использование к-л ява-скрипта элемент с классом просто заменяется на элемент в id.