Макет BusinessName.com

[amelice]

Привет всем!
Выкладываю первый макет с форума.
Так как выкладываю на бесплатный хостинг,справа вылазит всякая реклама.
А по макету, попинайте хорошенько.
Проверила в старых ИЕ, вроде работает. Но не уверена, так как для меня - работает, может для вас караул.

И еще вопрос, у меня не получается плавный градиент.
Как добиться, чтоб не было четкой линии?

Edited June 1, 2014 by amelice

[Gaspode]

Ссылки на наведение не реагируют.

<div class="left">
<div class="right">

Нехорошо.

<li class="raz">

Ужасно.

<strong> Fusce nec eros augue</strong>

Тут лучше b, а не strong.

Edited July 6, 2011 by Gaspode

[Vlad]

Градиенты лучше сохранять в PNG, будет небольшой объём файла и цвета останутся исходными. Но здесь искажения, пожалуй, по любому будут, пусть и не очень заметные, потому что фотография в JPEG, а он цвета "портит", что довольно заметно становится при наложении одного изображения на другой.

[psywalker]

cheburek, Вот, зацени тут, вроде более-менее решена проблема с градиентом http://psywalker.ru/Portfolio/BusinessName.com/main-page.html

[amelice]

Ссылки на наведение не реагируют.

<div class="left">
<div class="right">

Нехорошо.

<li class="raz">

Ужасно.

<strong> Fusce nec eros augue</strong>

Тут лучше b, а не strong.

Спасибо!

1. Исправила.

2. Исправила. Но хочу понять, почему ужасно?

Только в менюшке оставила класс li.not_b. для первого элемента списка,

так как нужно убрать слева бордер(в старых ИЕ).

а для ИЕ>7 и других браузеров использовала:

#nav ul li+li{
	background:url(img/lin_menu.jpg) no-repeat;
	}

Можно было :first-child применить, но мне кажется так более приоритетно.

3. Сначала применила b , но тут написано, что нужно - strong вместо b.

[buddah]

3. Сначала применила b , но тут написано, что нужно - strong вместо b.

Все правильно ты делаешь, <strong> для смыслового выделения текста и для поисковиков, а просто жирный шрифт задается через font-weight: 700;

Gaspode что-то перепутал..

[amelice]

Градиенты лучше сохранять в PNG, будет небольшой объём файла и цвета останутся исходными. Но здесь искажения, пожалуй, по любому будут, пусть и не очень заметные, потому что фотография в JPEG, а он цвета "портит", что довольно заметно становится при наложении одного изображения на другой.

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

Png-24 намного лучше по качеству и больше по объему, но там тоже видны расслаивание пикселов. А jpeg(качество 75) - мне показалось лучшим вариантом из всех. И по объему меньше чем png-24.

Может, что-то нужно включить дополнительно?

3. Сначала применила b , но тут написано, что нужно - strong вместо b.

Все правильно ты делаешь, <strong> для смыслового выделения текста и для поисковиков, а просто жирный шрифт задается через font-weight: 700;

Gaspode что-то перепутал..

Но в макете было просто жирный текст. А вообще, применяемость того или иного элемента я смотрю тут. Где D-запрещен, значит этот элемент не использую. Это так?

а элемент b он вроде не запрещен.

cheburek, Вот, зацени тут, вроде более-менее решена проблема с градиентом http://psywalker.ru/Portfolio/BusinessName.com/main-page.html

psywalker, изучаю.

Edited July 6, 2011 by cheburek

[buddah]

Но в макете было просто жирный текст. А вообще, применяемость того или иного элемента я смотрю тут. Где D-запрещен, значит этот элемент не использую. Это так?

а элемент b он вроде не запрещен.

Запрещенные - F, устаревшие - D.

Но насколько я вижу эта таблица еще для html4, а с тех пор немало воды уже утекло (xhtml, html5)

Нельзя в хтмл задавать визуальное представление (повторюсь, <strong> -это смысловое выделение, а <b> - визуальное)

Все оформление должно быть в стилях.

[amelice]

Но в макете было просто жирный текст. А вообще, применяемость того или иного элемента я смотрю тут. Где D-запрещен, значит этот элемент не использую. Это так?

а элемент b он вроде не запрещен.

Запрещенные - F, устаревшие - D.

Но насколько я вижу эта таблица еще для html4, а с тех пор немало воды уже утекло (xhtml, html5)

Нельзя в хтмл задавать визуальное представление (повторюсь, <strong> -это смысловое выделение, а <b> - визуальное)

Все оформление должно быть в стилях.

Понятно.

Еще не использовала h1.

Как я понимаю, это с точки зрения SEO, необходимо наличия элемента h1? а что если его не использовать, но использовать другие, например начиная с h2?

[Vlad]

Насчёт <b> спорный момент, для SEO наоборот, стараются ключевые слова выделять жирным, поисковики так лучше повышают "вес" подобных слов. Для вёрстки удобнее через стили жирность задавать, в любой момент можно её убрать, цвет изменить или другие параметры. Для семантики лучше <strong> использовать, чтобы какие-нибудь речевые браузеры осмысленно диктовали этот текст.

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

[buddah]

Понятно.

Еще не использовала h1.

Как я понимаю, это с точки зрения SEO, необходимо наличия элемента h1? а что если его не использовать, но использовать другие, например начиная с h2?

А это до сих пор неизвестно. То есть все привыкли считать, что h1 нужен обязательно. Но только гугл или яндекс могут точно сказать его удельный вес в общей релевантности страницы.

И если кто-то будет бить себя кулаком в грудь "Я знаю, что ТОЧНО нужен!" либо "Я знаю, что ТОЧНО НЕ нужен!", то они лжецы либо мало знают.

100% доказательств нет, есть только общие рекомендации, которые советуют писать h1.

Насчёт <b> спорный момент, для SEO наоборот, стараются ключевые слова выделять жирным, поисковики так лучше повышают "вес" подобных слов. Для вёрстки удобнее через стили жирность задавать, в любой момент можно её убрать, цвет изменить или другие параметры. Для семантики лучше <strong> использовать, чтобы какие-нибудь речевые браузеры осмысленно диктовали этот текст.

Не соглашусь. Насколько мне известно, поисковики дают одинаковый вес и <b> и <strong>. Но при этом второй тег правильный с точки зрения W3C + как ты и сказал, для речевых браузеров.

Edited July 6, 2011 by buddah

[amelice]

Насчёт <b> спорный момент, для SEO наоборот, стараются ключевые слова выделять жирным, поисковики так лучше повышают "вес" подобных слов. Для вёрстки удобнее через стили жирность задавать, в любой момент можно её убрать, цвет изменить или другие параметры. Для семантики лучше <strong> использовать, чтобы какие-нибудь речевые браузеры осмысленно диктовали этот текст.

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

Влад, спасибо за подробное разъяснение. Так как я пока макеты для себя делаю, и хочу научится правильно верстать с учетом семантики, то значит буду использовать <strong>.

Edited July 6, 2011 by cheburek

[SelenIT]

Но насколько я вижу эта таблица еще для html4, а с тех пор немало воды уже утекло (xhtml, html5)

Пишется "HTML4" — читается "HTML 4.01 и XHTML 1.0". Содержательно это одно и то же, разница только в базовом синтаксисе. А XHTML 1.1 = XHTML 1.0 Strict + (пара спецтегов для японск. яз.) - (name для форм и якорей), т.е. на 99.5% — тот же добрый старый HTML 4.01 Strict.

Нельзя в хтмл задавать визуальное представление (повторюсь, <strong> -это смысловое выделение, а <b> - визуальное)

А вот как раз это для HTML4/XHTML1 . В HTML5/ЖHTML <b>, <i>, <small> и подобные — не визуальное выделение, а скорее стилистическое.

А про градиенты есть неплохая (имхо) статья на Хабре...

[amelice]

Но насколько я вижу эта таблица еще для html4, а с тех пор немало воды уже утекло (xhtml, html5)

Пишется "HTML4" — читается "HTML 4.01 и XHTML 1.0". Содержательно это одно и то же, разница только в базовом синтаксисе. А XHTML 1.1 = XHTML 1.0 Strict + (пара спецтегов для японск. яз.) - (name для форм и якорей), т.е. на 99.5% — тот же добрый старый HTML 4.01 Strict.

Нельзя в хтмл задавать визуальное представление (повторюсь, <strong> -это смысловое выделение, а <b> - визуальное)

А вот как раз это для HTML4/XHTML1 . В HTML5/ЖHTML <b>, <i>, <small> и подобные — не визуальное выделение, а скорее стилистическое.

А про градиенты есть неплохая (имхо) статья на Хабре...

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

Edited July 6, 2011 by cheburek

[SelenIT]

SelenIT, а есть у тебя замечания по верстке?

Что мне бросилось в глаза:

• Некоторые списки явно лишние, как минимум #abs и #inside_content (никакие однотипные сущности в них не перечисляются, li-шки фактически зря дублируют вложенные в них div-ы, да и form можно использовать как полноценный контейнер);
  
• Картинку zd-bg_02.jpg лучше сделать фоном, она не несет самостоятельной информационной ценности;
  
• Очень непрочная структура списка .simple_1, стоит ссылке стать на два-три слова длиннее, она некрасиво сползает вниз. Надо предусмотреть возможность отображения более длинных текстов в несколько строк.
  

А так в целом аккуратненько. Сама страница несколько специфичная — без явного основного контента, фактически вся из разных сортов навигации, поэтому про последовательность блоков в коде спорить не о чем.

Желаю дальнейшего прогресса и всяческих удач!

[amelice]

cheburek, Вот, зацени тут, вроде более-менее решена проблема с градиентом http://psywalker.ru/Portfolio/BusinessName.com/main-page.html

Применила твой метод Везде работает, но, в Ие5 караул.

В ИЕ 5 нужно будет отцентрировать весь сайт, так как бекграунд у меня top center, а свойство margin:auto для блоков не работает(как мне кажется), то мой плавный градиент сам по себе гуляет в центре. )

Как решить эту проблему?

А за метод спасибо! Мне понравился, просто и не долго.

[amelice]

Что мне бросилось в глаза:

• Некоторые списки явно лишние, как минимум #abs и #inside_content (никакие однотипные сущности в них не перечисляются, li-шки фактически зря дублируют вложенные в них div-ы, да и form можно использовать как полноценный контейнер);
  
• Картинку zd-bg_02.jpg лучше сделать фоном, она не несет самостоятельной информационной ценности;
  
• Очень непрочная структура списка .simple_1, стоит ссылке стать на два-три слова длиннее, она некрасиво сползает вниз. Надо предусмотреть возможность отображения более длинных текстов в несколько строк.
  

А так в целом аккуратненько. Сама страница несколько специфичная — без явного основного контента, фактически вся из разных сортов навигации, поэтому про последовательность блоков в коде спорить не о чем.

Желаю дальнейшего прогресса и всяческих удач!

Большое спасибо!

1. Убрала #inside_content. По поводу #abs подумаю, как можно форму использовать вместо него.

2. Не понимала суть бекграунда. Теперь знаю, что нужно было сделать фоном эту картинку. Так и сделала.

3. Переделала .simple_1, но не знаю, что ты имел в виду конкретно.

[SelenIT]

...в Ие5 караул.

В ИЕ 5 нужно будет отцентрировать весь сайт, так как бекграунд у меня top center, а свойство margin:auto для блоков не работает(как мне кажется), то мой плавный градиент сам по себе гуляет в центре. )

Как решить эту проблему?

В IE5 так или иначе будет караул, не в одном, так в другом . Он не только центрировать блоки по стандарту не умеет, у него вообще вся боксовая модель нестандартная. От него массово отказались еще в 2005-м. Сейчас многие уже IE6 поддерживать отказываются, зачем откапывать еще больший антиквариат

3. Переделала .simple_1, но не знаю, что ты имел в виду конкретно.

Я имел в виду полосатую "табличку" с датами и ссылками. До правки, если ссылка не вмещалась в одну строку (я пробовал добавить пару слов текста через Firebug), она целиком опускалась вниз, под дату. Сейчас (как минимум, в FF5) не проваливается, дату как бы обтекает — уже намного лучше. Но, по-моему, было бы еще лучше, если бы вторая строка ссылки начиналась под первой, как в настоящей табличке...

[amelice]

В IE5 так или иначе будет караул, не в одном, так в другом . Он не только центрировать блоки по стандарту не умеет, у него вообще вся боксовая модель нестандартная. От него массово отказались еще в 2005-м. Сейчас многие уже IE6 поддерживать отказываются, зачем откапывать еще больший антиквариат

Да, скорее бы уже Ие6 закончил свой век существования.

Для таких не образованных как я было б намного проще )

Я имел в виду полосатую "табличку" с датами и ссылками. До правки, если ссылка не вмещалась в одну строку (я пробовал добавить пару слов текста через Firebug), она целиком опускалась вниз, под дату. Сейчас (как минимум, в FF5) не проваливается, дату как бы обтекает — уже намного лучше. Но, по-моему, было бы еще лучше, если бы вторая строка ссылки начиналась под первой, как в настоящей табличке...

Думаю, можно сделать inline-block'ом. Щас попробую.

[amelice]

Я имел в виду полосатую "табличку" с датами и ссылками. До правки, если ссылка не вмещалась в одну строку (я пробовал добавить пару слов текста через Firebug), она целиком опускалась вниз, под дату. Сейчас (как минимум, в FF5) не проваливается, дату как бы обтекает — уже намного лучше. Но, по-моему, было бы еще лучше, если бы вторая строка ссылки начиналась под первой, как в настоящей табличке...

Сделала, спасибо.