Верстка макета Раира

[aka.misha]

Сверстал макет Раира из раздела "Макеты для верстки".

Это моя первая законченная работа и думаю ошибок будет немерено. Оцените, пожалуйста, верстку макета. Какие ошибки в коде? Как его можно улучшить? Любая Ваша критика по данной работе для меня, как новичка, очень важна.

HTML http://verstka.h18.ru/raira/

CSS http://verstka.h18.ru/raira/style.css

Edited July 16, 2009 by aka.misha

[psywalker]

Ссылки нерабочие!

[mini]

Первое что бы хотелось отметить

http://validator.w3.org/check?verbose=1&am...8.ru%2Fraira%2F

посмотрите что там не так, может конечно там хостинг что то накрутил не знаю разбирайтесь.

Второе - http://validator.w3.org/check?verbose=1&am...8.ru%2Fraira%2F надо сделать что бы было валидно...

На счёт кода придираться не буду но я бы такие надписи "Мы рады предложить Вам:", "Скидки" ну и т.д сделал бы заголовком, это конечно мое мнение, но мне кажется это семантически будет вернее , остальное пусть пишут формучане, интересно послушать разные мнения, к сожалению в ИЕ6 не смотрел

[Phantom]

В целом неплохо,но есть ряд важных замечаний:

1. Логотип должен переливаться градиентом и должен быть кликабельным,т.е. быть ссылкой.

2. Ну нету градиента в нижней части шапки,нету!Фон должен быть белым.

3. Шрифты в левой и правой колонке должны быть жирными.

4. В левой колонке нет активной ссылки.

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

6. В футере информация должна быть в теге <address></address>,хотя можно и списком,в общем вопрос спорный,просто с <address> меньше кода получается

7. Шрифт в футере должен быть поменьше.

8. Футер можно было бы и прижать(ну это так,придиркавообще этот вопрос с дизайнером надо обсуждать).

9. В css файле экспрешн надо убрать и вынести в отдельный файл для ИЕ6 и подключить его через условные коментарии (для валидности).

10. Слишком много тегов <p> причем там где не надо. Например "Круглосуточная консультация по телефону:" нужно сделать через тег заголовка, а "Очень интересные новости нашей компании и нашего сайта." я бы сделал через <span>.

11. Есть лишние дивы (можно обойтись и без них).

Улыбнуло:

1. Текст в шапке отступает всего на 5 пикселей и при сужении экрана не налазиет на перо(исправил оплошность дизайнера,так сказать).

2. css-файл просто заглядение!Всё очень структуриванно и расписано(надо будет тоже взять в привычку так делать).

Итого оценка 4 с бааааальшой натяжкой

[aka.misha]

Ссылки нерабочие!

Ссылки работают, все нормально.

Первое что бы хотелось отметить

http://validator.w3.org/check?verbose=1&am...8.ru%2Fraira%2F

посмотрите что там не так, может конечно там хостинг что то накрутил не знаю разбирайтесь.

Да, Вы правы, это уже хостинг. Перед заливкой проверял на валидность - все было нормально. С этим можно как-то бороться?

На счёт кода придираться не буду но я бы такие надписи "Мы рады предложить Вам:", "Скидки" ну и т.д сделал бы заголовком, это конечно мое мнение, но мне кажется это семантически будет вернее

В правой колонке не понравились шрифты - сделал картинками. А как здесь по другому?

2Phantom

1. Это Вы верно подметили - градиент был. Пробовал с ним - но тогда ничего не умещалось на разрешении 1024, вот и убрал его. Не подскажите, как сверстать, чтобы умещалось? И как сделать, чтобы был кликабельным?

2. А вот тут нет, градиент там есть. Просто слой в макете не включен.

3. Жирные смотрятся плохо, сделал так.

4. Это Вы про "Очень интересные новости..."?

5. а. Согласен, не хватает отступа. б. Тоже согласен, как-то сразу не подумал.

6. На форуме советовали списками делать, так и сделал. А как написать с <address>?

7. В макете (12px) мелковато смотрится.

9. А как сделать отдельный css для IE6?

11. А какие дивы лишние? Как сделать лучше?

[mini]

В правой колонке не понравились шрифты - сделал картинками. А как здесь по другому?

К пртмеру h2 или h3 в нём текст, а картинку на БГ!

3. Жирные смотрятся плохо, сделал так. 7. В макете (12px) мелковато смотрится.

Это уже не твоя проблема, это уже проблема дизайнера, если чел дал тебе такой макет значит так его и вертсай ?)

9. А как сделать отдельный css для IE6?

к примеру так —> <!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen"/><![endif]-->

[Phantom]

1. Это Вы верно подметили - градиент был. Пробовал с ним - но тогда ничего не умещалось на разрешении 1024, вот и убрал его. Не подскажите, как сверстать, чтобы умещалось? И как сделать, чтобы был кликабельным?

Да примерно вот так: <a href="#"><img src="" width="" height="" alt="" /></a> значения в img сами подставите

Я бы посоветовал посмотеть макет psywalkera для примера,тут в этой теме где-то есть,там всё наглядно продеманстрированно.

2. А вот тут нет, градиент там есть. Просто слой в макете не включен.

Если дизайнер выключил этот слой,значит на то были причины. Ваша задача как верстальщика сделать всё один в один как на макете. И если слой выключен,значит так и должно быть.

3. Жирные смотрятся плохо, сделал так.

Опять же,делайте так как на макете,это потом вам дизайнер скажет что и где подправить.

4. Это Вы про "Очень интересные новости..."?

Нет,это я про то,что ДСАГО должен быть выделен жирным.

6. На форуме советовали списками делать, так и сделал. А как написать с <address>?

Ну например запихиваете текст в тег <address></address> и форматируете его через стили

7. В макете (12px) мелковато смотрится.

mini всё сказал поэтому поводу

11. А какие дивы лишние? Как сделать лучше?

Ну вот <div class="menu"> явно лишний,лучше задать класс списку или отформатировать список относительно дива "menu_bg". Остальное смотрите сами...вообще попробуйте переделать вёрстку,что бы при меньшем количестве кода был такой же результат как сейчас.

[aka.misha]

mini, Phantom - спасибо вам за развернутые ответы, буду разбираться и дорабатывать.

[harrids]

3. Шрифты в левой и правой колонке должны быть жирными.

Да где там жирный-то)? Тыкаю в фотошопе на текст - он мне пишет Arial, Regular, 14 pt. У меня плохая карма?

[Phantom]

Да где там жирный-то)? Тыкаю в фотошопе на текст - он мне пишет Arial, Regular, 14 pt. У меня плохая карма?

Не знаюНа самом деле текст не жирный,мой косяк)

[aka.misha]

Исправил ошибки. Есть ли еще какие-нибудь замечания по верстке?

[Павел Билькис]

http://floomby.ru/content/GE4eX7VvkK/

что это за странный текст?

http://floomby.ru/content/BS4N5I0mUq/

ие5

[aka.misha]

http://floomby.ru/content/GE4eX7VvkK/

что это за странный текст?

Поправил. Теперь лучше?

http://floomby.ru/content/BS4N5I0mUq/

ие5

Я в нем даже не смотрел, им пользуются около 0.1%

[psywalker]

http://floomby.ru/content/BS4N5I0mUq/

ие5

Я в нем даже не смотрел, им пользуются около 0.1% smile.gif

Просто всё дело в том, что Павел Билькис настолько Профи, что все его сайты отлично смотрятся даже в ИЕ3 :D

[Павел Билькис]

Просто всё дело в том, что Павел Билькис настолько Профи, что все его сайты отлично смотрятся даже в ИЕ3

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

IE: 5, 6, 7, 8

Mozzila: 2, 3, 3.5

Chrome: all version

Opera: 7, 8, 9, Opera Mini

P.S. Я не верстальщик, я программист. И верстка никогда не была моей сильной стороной. Но зато ты ТАКОЙ профи в программирование, что хочется аккуратно убиться об стенку

[psywalker]

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

IE: 5, 6, 7, 8

Mozzila: 2, 3, 3.5

Chrome: all version

Opera: 7, 8, 9, Opera Mini

Нее, ну это ты загнул, предлагаю так:

IE: 6, 7, 8

Mozzila: 3, 3.5

Chrome: all version

Opera: 9х, 8 (не часто), Opera Mini (не часто)

Safari 3x

Но зато ты ТАКОЙ профи в программирование, что хочется аккуратно убиться об стенку smile.gif

Давно пора

Edited July 17, 2009 by psywalker

[Павел Билькис]

Давно пора

Ты не понял. нам обоим

[aka.misha]

А еще какие-нибудь замечания будут? Посмотрите, пожалуйста, не поленитесь. Неужели все настолько "щикарно", что ни у кого больше нет замечаний?

[psywalker]

А еще какие-нибудь замечания будут? Посмотрите, пожалуйста, не поленитесь. Неужели все настолько "щикарно", что ни у кого больше нет замечаний?

1) Заголовок: "Страхование" - не отцентрирован

2) Шрифты на всём сайте не соответствуют макетным

3) Центр сделан неправильно, но для твоего уровня пойдёт

4) Бабочка сделана неправильно, по половинкам и т. д.

Так, вот тебе пример, сравнивай: http://psywalker.ru/Raira/main-page.html

Edited July 17, 2009 by psywalker

[aka.misha]

1) Заголовок: "Страхование" - не отцентрирован

2) Шрифты на всём сайте не соответствуют макетным

3) Центр сделан неправильно, но для твоего уровня пойдёт

4) Бабочка сделана неправильно, по половинкам и т. д.

Так, вот тебе пример, сравнивай: http://psywalker.ru/Raira/main-page.html

1. Специально так сделал, чтобы при уменьшении надпись не налезала на картинку слева. В вашем примере, кстати, налезает и смотрится это не очень.

2. Левая и правая колонка: 14px Regular. Центральная колонка: 18px Regular. Футер: 12px Regular. Где несоответствие?

3. Почему он сделан неправильно?

4. Что плохого в том, что она сделана по половинкам?

[psywalker]

1. Специально так сделал, чтобы при уменьшении надпись не налезала на картинку слева. В вашем примере, кстати, налезает и смотрится это не очень.

2. Левая и правая колонка: 14px Regular. Центральная колонка: 18px Regular. Футер: 12px Regular. Где несоответствие?

3. Почему он сделан неправильно?

4. Что плохого в том, что она сделана по половинкам?

1) В моём примере я эту вещь не доделал, неохота было, а просто надо было сохранить в ПНГ-24 и всё было бы гуд

2) Кажись нужно 14px Bold

3) Посмотри, как сделано у меня

4) Потому что при разрыве они распадутся, а во вторых эта бабочка пренадлежит правой колонке, надо было позиционировать её

[Cabalist]

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

Страхование действительно надо сделать по центру.

[psywalker]

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

Страхование действительно надо сделать по центру.

Нет, Бабочку надо делать ПНГ-24 именно, потому что при случайном или вольном переполнении белого блока она сразуже даст о себе знать!

p.s. - кстати не поленился, сделал тут минимальную ширину побольше, всё равно надо было, теперь косяков нет, теперь можете сравнивать для примера: http://psywalker.ru/Raira/main-page.html

Edited July 17, 2009 by psywalker

[aka.misha]

1. Заголовок "Страхование" поправил.

2. На счет шрифтов тоже сначала думал Bold должно быть, но в макете указано Regular. Не так уж это и важно

3. Сделал центральную часть по другому, нашел как проще.

#left_sidebar{
  float: left;
  width: 265px;
  }

#right_sidebar{
  float: right;
  width: 265px;
  }

#content{
  margin: 0 265px;
  }

Код короче и все работает.

psywalker, а у вашего способа размещения трех колонок есть какие-то преимущества? Почему делаете именно так?

4. Бабочку поправил, сделал одной картинкой.

[Cabalist]

p.s. - кстати не поленился, сделал тут минимальную ширину побольше, всё равно надо было, теперь косяков нет, теперь можете сравнивать для примера: http://psywalker.ru/Raira/main-page.html

Всё хорошо,только под лупой тень должна быть

P.S. Подвал я бы прижал,что бы рациональнее использовать площадь монитора. Но это моё мнение и я его никому не навязываю