Моя первая вёрстка :)

[psywalker]

Давненько не верстал, времени чё-та никак не было, а тут макетик приглянулся один (главная страница только), решил заверстать. Поэтому можно считать, что это моя Первая вёрстка за долгое время)

В общем всё как обычно, жду критики (не жалейте ), пинков, и прочих советов.

http://css-live.ru/Portfolio/Yandex-winter-task/2/main-page.html

Кстати, отдельный вопрос. Следует ли эту вёрстку класть в портфель или она вообще ни о чём?

p.s. Участвуют только IE8+. И все последние браузеры.

Отдельно спасибо Илье (SelenIT) за всяческую помощь!

[alexandr_v-vich]

1. http://css-live.ru/Portfolio/Yandex-winter-task/2/images/profile.png - уменьшите на сайте.

2. где то на середине ширины стандарт-окна (при сжимании окна), ну, пикселей, эдак 500 - после начального текста....вот это:

много свободного пространства не по месту, ну и беспорядок..

Сразу под этим, если ещё немного уменьшить -

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

Edited March 19, 2012 by alexandr_v-vich

[buddah]

Поздравляю с первой адаптивной версткой)

[Radiocity]

Забрал в примеры сайтов (закладки) для будущего изучения.

PS ПсиВокер, а ты специально сделал такой доступ?

Edited March 19, 2012 by Radiocity

[alexandr_v-vich]

Для второго скрина, который, скинул (?), лучше всё-таки width:100%; У вас первый заголовок ("О нас") с таким стилем, неплохо будет если во всех стилях они будут равны и резина приятнее выглядеть будет.

[psywalker]

Поздравляю с первой адаптивной версткой)

Ага, спасиб)

Забрал в примеры сайтов (закладки) для будущего изучения.PS ПсиВокер, а ты специально сделал такой доступ?

Поставлю заглушку)

Для второго скрина, который, скинул (?), лучше всё-таки width:100%; У вас первый заголовок ("О нас") с таким стилем, неплохо будет если во всех стилях они будут равны и резина приятнее выглядеть будет.

Ага, спасиб, приму к сведению.

Может кто чё по коду скажет ещё?))

[Softlink]

Непонятны некоторые моменты.

1) Почему логотип не ссылкой-то? Вроде давно уже всеми за правило взято так делать.

2) <ul class="lang"> - это тоже относится к навигации на сайте? Я бы не делал все в одном nav.

3) Справа ссылка на pdf один огромный блок. Поделил бы.

4) .download__text {font: 1.0714em 'TrajanProBold',serif;} ты все по емам прешься?)) Или для полной масштабируемости?

5)

<article class="section__content">
					<h2 class="section__content__title">О нас</h2>

Можно же h1 применять. Да и обертку дивную для текста там же не понял. Зачем она нужна?

6)с RU убери курсор pointer. И вообще это не ссылка должна быть, т.к. мы уже находимся в русской версии сайта)

[buddah]

Я бы рисунки лого и пдф сделал более качественными (читай большими) и уменьшал бы их по max-width. Очень заметна потеря качества при уменьшении окна (читай увеличении картинки)

[alexandr_v-vich]

В стиле вопросов)

	<div class="page"><div class="page__i">

Зачем два?

<div class="logo">
	<h1 class="logo__i" title="K&A PARTNERS">
		<img src="images/logo.png" alt="K&A PARTNERS" class="logo__img" />
		<i class="logo__name">
			K<i>&</i>A PARTNERS
		</i>
	</h1>
</div>

Почему не id="logo". Уникальный же и лишние тогда классы у картинки и заголовка...

<div class="section__content__text">
	<p>K&A Partners обеспечивает клиентов, действующих на российском рынке, инновационными решениями, направленными на формирование эффективной структуры бизнеса и создания управленческих команд международного уровня, свободно владеющих основами корпоративного управления передовых стран мира.K&A Partners обеспечивает клиентов, действующих на российском рынке, инновационными решениями, направленными на формирование эффективной структуры бизнеса и создания управленческих команд международного уровня, свободно владеющих основами корпоративного управления передовых стран мира.K&A Partners обеспечивает клиентов, действующих на российском рынке, инновационными решениями, направленными на формирование эффективной структуры бизнеса и создания управленческих команд международного уровня, свободно владеющих основами корпоративного управления передовых стран мира.</p>
</div>

Зачем див? Они и так вместе с заголовком ещё в одном диве..

<h2 class="slogan__title">
	<span class="slogan__title-top">Объединяя</span>
	<span class="slogan__title-bottom">Преумножать!</span>
</h2>

Зачем вам "slogan__title". Если не ошибаюсь, он вообще не прописан в стилях. И может его сделать <h3>? Тогда и для <h2> не нужны будут класыы, так - для <h2> и пропИшите...

И это ещё, вроде, вложено в два тега. По-моему, там половина лишняя.

6)с RU убери курсор pointer. И вообще это не ссылка должна быть, т.к. мы уже находимся в русской версии сайта)

Тут, я думаю, просто стили перепутаны. Ровно наоборот...

Edited March 19, 2012 by alexandr_v-vich

[psywalker]

Спасибо братва за замечания, надеюсь не последние)

Softlink

1) Почему логотип не ссылкой-то? Вроде давно уже всеми за правило взято так делать.

Всё верно. Уже давно взято за правило не делать ссылкой лого на главной странице. Раз, два, три, четыре

2) <ul class="lang"> - это тоже относится к навигации на сайте? Я бы не делал все в одном nav.

От этого ничего не изменится. В nav необязательно должна находится принципиально одно навигационное меню. Можно больше.

3) Справа ссылка на pdf один огромный блок. Поделил бы.

А можно поподробнее, на что поделить и с чем скрестить?)

4) .download__text {font: 1.0714em 'TrajanProBold',serif;} ты все по емам прешься?)) Или для полной масштабируемости?

Переться по емам означает совсем другое. Здесь же я задал емы только лишь шрифту, из тех соображений, что тот же вертикальный ритм лучше всего настраивается именно при "em".

5)

<article class="section__content">

<h2 class="section__content__title">О нас</h2>

Да и обертку дивную для текста там же не понял. Зачем она нужна?

Обёртка для текста считаю, что нужна. Опыт подсказывает мне это. Я делаю вёрстку, думая о её будущем

Можно же h1 применять.

Х1 уже есть на странице для лого + СЕО не факт, что такое одобрит всё же и т.д.

6)с RU убери курсор pointer. И вообще это не ссылка должна быть, т.к. мы уже находимся в русской версии сайта)

Согласен. Упустил.

alexandr_v-vich

В стиле вопросов)

<div class="page"><div class="page__i">

Зачем два?

Посмотри внимательнее CSS, первый нужен для растяжки, а второй для настраивания отступов. + второй нужен ещё для других дел. Это не лишняя обёртка, а наоборот - нужная.

<div class="logo">

<h1 class="logo__i" title="K&A PARTNERS">

<img src="images/logo.png" alt="K&A PARTNERS" class="logo__img" />

<i class="logo__name">

K<i>&</i>A PARTNERS

</i>

</h1>

</div>

Почему не id="logo". Уникальный же и лишние тогда классы у картинки и заголовка...

Потому что ID нужен для других целей. На форуме уже обсуждалась эта инфа.

<div class="section__content__text">

<p>K&A Partners обеспечивает клиентов, действующих на российском рынке, инновационными решениями, направленными на формирование эффективной структуры бизнеса и создания управленческих команд международного уровня, свободно владеющих основами корпоративного управления передовых стран мира.K&A Partners обеспечивает клиентов, действующих на российском рынке, инновационными решениями, направленными на формирование эффективной структуры бизнеса и создания управленческих команд международного уровня, свободно владеющих основами корпоративного управления передовых стран мира.K&A Partners обеспечивает клиентов, действующих на российском рынке, инновационными решениями, направленными на формирование эффективной структуры бизнеса и создания управленческих команд международного уровня, свободно владеющих основами корпоративного управления передовых стран мира.</p>

</div>

Зачем див? Они и так вместе с заголовком ещё в одном диве..

Минимализм здесь неуместен, имхо. В будущем в этом блоке может оказаться ещё что нибудь + его так смеелее переносить и работать с ним, чем с элементом <p>.

<h2 class="slogan__title">

<span class="slogan__title-top">Объединяя</span>

<span class="slogan__title-bottom">Преумножать!</span>

</h2>

Зачем вам "slogan__title". Если не ошибаюсь, он вообще не прописан в стилях. И может его сделать <h3>? Тогда и для <h2> не нужны будут класыы, так - для <h2> и пропИшите...

Класс тут нужен 100%. Я никогда не позволю себе опираться лишь на элементы, которых в будущем может стать больше одного. Такое я делал, когда только начинал верстать.

И это ещё, вроде, вложено в два тега. По-моему, там половина лишняя.

Содержимое и визуальный вид этих контейнеров совершенно разный + не факт, что и даже такой вид ещё сохраниться. В общем я посчитал, что это два разных блока.

buddah

Спасибо чувак

[ShumNo]

Не знаю участвует ли FF 3.6 но там половина поехала + горизонтальный скролл

[psywalker]

Не знаю участвует ли FF 3.6 но там половина поехала + горизонтальный скролл

Нет, не участвует) Участвует только IE8+. И все последние браузеры.

[alexandr_v-vich]

Edited March 19, 2012 by alexandr_v-vich

[Softlink]

Всё верно. Уже давно взято за правило не делать ссылкой лого на главной странице. Раз, два, три, четыре

Да, если с этим умыслом, то все верно.

От этого ничего не изменится. В nav необязательно должна находится принципиально одно навигационное меню. Можно больше.

Тут спорно, спека говорит, что не все подряд надо толкать в nav, а лишь ссылки на значимые страницы сайта. Как-то так мне это понялось из перевода. Спорить не хочу, т.к. все эти новые штуки..

А можно поподробнее, на что поделить и с чем скрестить?)

http://clip2net.com/s/1IefC

Обёртка для текста считаю, что нужна. Опыт подсказывает мне это. Я делаю вёрстку, думая о её будущем

Да если смотреть по контексту, то там пожизненно будет 10 строчек текста. Ну может картинка добавится. Т.к. внизу следует фон, на который залазить ему нельзя, как я понял. В общем, на усмотрение это. Но я бы вряд ли сделал ее в такой ситуации. Хотя сам ой как люблю обертки.

Х1 уже есть на странице для лого + СЕО не факт, что такое одобрит всё же и т.д.

В таких элементах можно использовать H1 не стесняясь. Это новый смысловой блок. Со своим заголовком первого уровня.

p.s. Я вас умоляю, нашел о чем думать - СЕО

[alexandr_v-vich]

Х1 уже есть на странице для лого + СЕО не факт, что такое одобрит всё же и т.д.

В таких элементах можно использовать H1 не стесняясь. Это новый смысловой блок. Со своим заголовком первого уровня.

Поддержу. При том, хотя бы шрифт изменить нужно - отделить от "Наши услуги". Причём стиль оставить общий, с бордером, со всем. Но увеличить и чуть темнее.

Edited March 19, 2012 by alexandr_v-vich

[psywalker]

alexandr_v-vich

Потому что ID нужен для других целей. На форуме уже обсуждалась эта инфа.

Не затруднит ссылку дать? Давно не могу чётко определить что к чему)

К сожалению не смог найти в поиске((. Но, скажу кратко, что у ID есть ряд недостатков и отличий от class по части поддержки сайта в будущем и вообще.

- Скорость (class быстрее в целом на 11%)

- Специфичность (ID всегда "важнее" чем class, тем самым поддержка такого блока в CSS становится очень трудной )

- Уникальность (Возможны 10 одинаковых блоков)

Ну и вообще, ID для программеров нужно, у меня с этим тоже были в своё время траблы, получил пенчища и усвоил урок)

Вот полный контейнер

<article class="section__content">

<h2 class="section__content__title">О нас</h2>

<div class="section__content__text">

<p>K&A Partners обеспечивает клиентов, действующих на российском рынке, инновационными решениями, направленными на формирование эффективной структуры бизнеса и создания управленческих команд международного уровня, свободно владеющих основами корпоративного управления передовых стран мира.K&A Partners обеспечивает клиентов, действующих на российском рынке, инновационными решениями, направленными на формирование эффективной структуры бизнеса и создания управленческих команд международного уровня, свободно владеющих основами корпоративного управления передовых стран мира.K&A Partners обеспечивает клиентов, действующих на российском рынке, инновационными решениями, направленными на формирование эффективной структуры бизнеса и создания управленческих команд международного уровня, свободно владеющих основами корпоративного управления передовых стран мира.</p>

</div>

</article>

В общем не знаю, видимо старая школа действует). Для меня абзац - это не полноценный какой-то контейнер, т.е. это параграф у которого должна быть обёртка. + вдруг добавится картинка, ещё чего. В общем интуитивно как-то сделал. Не навязываю.

С ним (section__content) и работайте... если что-то текстовое добавить - ставте ещё один <p>, либо этот расштряйте. Что-то другое - пожалуйста. Проще же, не?

Softlink

Тут спорно, спека говорит, что не все подряд надо толкать в nav, а лишь ссылки на значимые страницы сайта. Как-то так мне это понялось из перевода. Спорить не хочу, т.к. все эти новые штуки..

Ну да, согласен. Нужно узнать поточнее.

А можно поподробнее, на что поделить и с чем скрестить?)

http://clip2net.com/s/1IefC

Ага, понял, подумаю))

В таких элементах можно использовать H1 не стесняясь. Это новый смысловой блок. Со своим заголовком первого уровня.

p.s. Я вас умоляю, нашел о чем думать - СЕО

Да я ща с блогом своим по этому вопросу сам вот думал уже, советовался. И нет однозначного ответа. Поэтому пока оставляю такк)) Но понимаю, что с точки зрения HTML5 ты прав конеша. Сам знаю)

[alexandr_v-vich]

psywalker,

К сожалению не смог найти в поиске((. Но, скажу кратко, что у ID есть ряд недостатков и отличий от class по части поддержки сайта в будущем и вообще.

- Скорость (class быстрее в целом на 11%)

- Специфичность (ID всегда "важнее" чем class, тем самым поддержка такого блока в CSS становится очень трудной )

- Уникальность (Возможны 10 одинаковых блоков)

Ну и вообще, ID для программеров нужно, у меня с этим тоже были в своё время траблы, получил пенчища и усвоил урок)

Спасибо большое, вроде разъяснилось всё)