ну раз уж обратно пошла мода Раиру верстать…

[swetlana]

Вот такой ещё вариант.

Традиция использования в вёрстке Раиры абсолютного позиционирования соблюдена (хотя и в нетрадиционном месте).

Поддержка IE весьма условная.

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

В Опере при «подогнать по ширине» на ширине, близкой к переходу в мобильную версию, колонки прячутся за пределы экрана. Что с этим делать — ума не приложу. Опера считает, к примеру, что margin-left: 25% спокойно можно сократить до 5% в таких условиях.

Код ужасен. Была честная попытка использовать разгильдяйскую версию html, но IE и FF не позволили, пришлось соглашаться на полумеры.

В общем, поругайте то, что получилось.

[arez]

Если группировать то до конца:

<hgroup>

<a href=index.html>

<h1>Раира</h1>

<h2>Страхование без помарок</h2>

</a>

</hgroup>

В остальном зачетно

[swetlana]

arez, вообще-то да, но до недавних пор такое считалось грубейшей ошибкой, и вот так вмиг полностью перестроиться не получается что-то. Пугаюсь такие конструкции пользовать

[Great Rash]

А чо, в HTML5 можно теперь вкладывать блоки в инлайны?

Эффекты на ссылках при наведении мерзкие беее... Не знаю как там рендерит Сафари на маках, но в Хроме ссылка становится нечитаемой.

А еще, я б сделал max-width... Размазанный на 1920 пикселей сайт фигово выглядит. Хотя обрезанная лупа наверное тоже будет фигово выглядеть... хз короче.

Не уверен, что делать номер телефона списком определений - лучшая идея. Разве енто семантично?

[psywalker]

А чо, в HTML5 можно теперь вкладывать блоки в инлайны?

Да сер

[rediskavet]

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

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

[rus]

Титл страницы порадовал. Очень много всяких подключений, можно было постараться и без них обойтись:

<!--[if lte IE 8]>
	<script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script>
	<script src=/js/jquery.js></script>
	<script src=js/oldiebehave.js></script>
	<link rel=stylesheet href=oldie.css>
<![endif]-->
<!--[if lte IE 6]>
	<script src=/js/DD_belatedPNG_0.0.8a-min.js></script>
	<script>DD_belatedPNG.fix('img, .content li, header hgroup h2 a');</script>
<![endif]-->

[SelenIT]

в HTML5 можно теперь вкладывать блоки в инлайны?

Нет, нельзя. Но ссылка теперь — не инлайн, а "прозрачная модель" (если внутри инлайн, то инлайн, если внутри блок, то блок — как раньше <ins> и <del>). И это работает во всех браузерах, включая IE6, что сильно радует (при условии, что и в CSS иерархия блоков выстроена правильно, конечно).

[psywalker]

swetlana

1. На большой ширине менюшка "Страхование " уезжает вправо. Галимо сделано.

2. Футеру vcard втюхала, возможно кстати, что нужно для этого отдельный блок создавать. Нужно узнавать ещё.

3. "Страхование без помарок" смотрится по разному в фф и ие7 например.

4. Рустамыч пральна заметил, до хера чёто подключено всего. Макет говно, можно было обойтись малой кровью.

5. В ие6 вёрстка плывёт. Опять же макет несложный, можно было и там добить ради приличия.

А в целом ничё так, HTML5 задействован нормал. Меня порадовало. Заметил изменения кое какие, растём

Нет, нельзя. Но ссылка теперь — не инлайн, а "прозрачная модель" (если внутри инлайн, то инлайн, если внутри блок, то блок — как раньше <ins> и <del>). И это работает во всех браузерах, включая IE6, что сильно радует (при условии, что и в CSS иерархия блоков выстроена правильно, конечно).

1. Т.е. выходит, что ссылка меняет свою модель исходя из элементов, которые лежат у неё внутри?

2. А если внутри будет лежать и инлайн элемент и блочный, то ссылка какой будет?

3. А как ты вообще смотришь на это новшество, что думаешь?

[SelenIT]

1) Насколько я понимаю, как-то так. Правда, в теперешней спеке вообще от явного определения "строчного" и "блочного" слегка ушли, теперь вместо него phrasing content и flow content, но общий смысл примерно тот же.

2) Блочный, раз есть хоть что-то блочное.

3) Мне нравится, анонсы с заголовками и подзаголовками делать удобно. Вовсю пользуюсь

[psywalker]

1) Насколько я понимаю, как-то так. Правда, в теперешней спеке вообще от явного определения "строчного" и "блочного" слегка ушли, теперь вместо него phrasing content и flow content, но общий смысл примерно тот же.

2) Блочный, раз есть хоть что-то блочное.

3) Мне нравится, анонсы с заголовками и подзаголовками делать удобно. Вовсю пользуюсь

Ага, понял, а ответь плиз ещё вот на что:

1.

1) Насколько я понимаю, как-то так. Правда, в теперешней спеке вообще от явного определения "строчного" и "блочного" слегка ушли, теперь вместо него phrasing content и flow content, но общий смысл примерно тот же.

А не мог бы ты рассказать поподробнее о phrasing content и flow content, что это за понятия и что они означают?

2.

Мне нравится, анонсы с заголовками и подзаголовками делать удобно. Вовсю пользуюсь

А приведи плиз какой нибудь самый странный, но в тот же момент правильный пример.

[SelenIT]

поподробнее о phrasing content и flow content, что это за понятия и что они означают?

Совсем подробно в спеке, но, насколько я сам понимаю — phrasing content практически полностью аналогичен старому доброму понятию "строчный элемент" (может содержать только текст или другие строчные), а flow content — примерный аналог старого доброго блока (может содержать другие блоки, в т.ч. специальные). Еще в новой спеке выдумали новые типы блоков (заголовки и секции, учитывающиеся при генерации структуры документа, на манер оглавления в Ворде) и особый класс "интерактивные элементы", преимущественно для веб-приложений. Кстати, элемент menu попал именно туда, и то, что Светлана (и не одна она) так смело использует его для навигации, меня несколько смущает...

[psywalker]

Совсем подробно в спеке, но, насколько я сам понимаю — phrasing content практически полностью аналогичен старому доброму понятию "строчный элемент" (может содержать только текст или другие строчные), а flow content — примерный аналог старого доброго блока (может содержать другие блоки, в т.ч. специальные). Еще в новой спеке выдумали новые типы блоков (заголовки и секции, учитывающиеся при генерации структуры документа, на манер оглавления в Ворде) и особый класс "интерактивные элементы", преимущественно для веб-приложений. Кстати, элемент menu попал именно туда, и то, что Светлана (и не одна она) так смело использует его для навигации, меня несколько смущает...

Понял. А для чего по твоему нужен menu? И что значит "Интерактивные"?

[rash]

Нет, нельзя. Но ссылка теперь — не инлайн, а "прозрачная модель" (если внутри инлайн, то инлайн, если внутри блок, то блок — как раньше <ins> и <del>). И это работает во всех браузерах, включая IE6, что сильно радует (при условии, что и в CSS иерархия блоков выстроена правильно, конечно).

Серьезно, даже в IE6?

Просто я по-привычке как-то тоже избегаю, не потому, что «так нельзя», а потому, что где-то проблемы с этим встречал (уже не вспомню подробностей, потому что давно избегаю таких ситуаций).

То есть на это можно смело полагаться?

[SelenIT]

По спеке, "интерактивный контент — контент, специально предназначенный для взаимодействия с пользователем" (т.е., насколько я понимаю, нативно, без скриптов и пр.). Туда попадают ссылки, элементы форм, video и audio с атрибутом controls и т.п.

Про назначение menu в спецификации написано как-то невнятно (как и про многое другое). Во введении (правда, с поменткой "This section is non-normative") в первом абзаце сказано, что "menu служит для создания контекстных меню и тулбаров" (для чего предусмотрен специальный атрибут type). Но в определении сказано, что меню — это список "команд", а "команда" — абстракция, объединяющая элементы меню, кнопки и ссылки. Т.е. получается, совсем уж формально навигационное меню определению меню не противоречит. Но всё-таки, поскольку явно нигде спека такого не советуюет, я считаю, что это скорее уступка совместимости. А в основном menu нацелено на веб-приложения, напр., тулбар в визивиг-редакторе. Но не уверен, так что буду благодарен за любую помощь в прояснении этого вопроса

[psywalker]

SelenIT

Спасибо тебе огромное за просветление. Жаль с английским полная беда, а так бы почитал сам с удовольствием.

[SelenIT]

Серьезно, даже в IE6?

Сами по себе ссылки — да. С блочно отображаемыми кликабельными элементами в ссылках (особенно позиционированными) бывают глюки (поправимые hasLayout-ом для предка и т.п.). Но это, насколько я в курсе, не связано с изначальной блочностью самих элементов, со <span style="display:block"> бывает ровно то же самое. И таблицы таки нельзя, с ними у IE особые отношения. А с обычными абзацами и заголовками лично я проблем не встречал...

[swetlana]

Титл страницы порадовал. Очень много всяких подключений, можно было постараться и без них обойтись

да, в общем-то не только можно было, даже и следовало без них обойтись.

И изначально там было только лишь подключение одного файла стилей — всё красиво и минималистично.

Но потом смотрю в IE — даже в нормальном, восьмом… мрак. Он такой бред выдал, что в первый момент страшно стало. А на часах уже где-то к шести утра, ну и уже лениво стало что-то пересматривать, переделывать. Вот и получился не самый изящный обвес.

Да и то, в IE6 элементы лишь условно и приблизительно на своих местах. Хотя, в принципе, на практике я именно так и делаю.

swetlana

1. На большой ширине менюшка "Страхование " уезжает вправо. Галимо сделано.

долго думала, как будет лучше. Но оставлять её прибитой к левому краю — точно хуже.

2. Футеру vcard втюхала, возможно кстати, что нужно для этого отдельный блок создавать. Нужно узнавать ещё.

в нынешнем состоянии незачем.

3. "Страхование без помарок" смотрится по разному в фф и ие7 например.

логично. Браузеры ж вольно обходятся со шрифтами. А делать текст картинкой — не труъ.

4. Рустамыч пральна заметил, до хера чёто подключено всего. Макет говно, можно было обойтись малой кровью.

может потом как-нибудь и поправлю.

5. В ие6 вёрстка плывёт. Опять же макет несложный, можно было и там добить ради приличия.

IE6 за бортом истории Пусть скажет спасибо за DD_Belaten_PNG

А в целом ничё так, HTML5 задействован нормал. Меня порадовало. Заметил изменения кое какие, растём

Макс, пугаешь! Какие изменения?

1. Т.е. выходит, что ссылка меняет свою модель исходя из элементов, которые лежат у неё внутри?

не совсем так. Просто у неё модель достаточно хитрая. Раньше, к примеру, картинки в ссылки ставили и не замечали, что она при этом ведёт себя заметно иначе, чем если внутрь поставить текст.

[psywalker]

Макс, пугаешь! Какие изменения?

<menu> например

IE6 за бортом истории Пусть скажет спасибо за DD_Belaten_PNG

А нахера он нужен, если всё равно в ие6 каша?

[swetlana]

<menu> например

сдаётся мне, что этот <menu> не стоит тех жарких дебатов, которые из-за него время от времени разгораются.

А нахера он нужен, если всё равно в ие6 каша?

ну так… минимальные приличия соблюсти.

Вообще, люди, пользующие в 2011 году IE6 уж наверняка знают, зачем им это, и готовы ради своей приверженности пойти на некоторые неудобства. Так что может и нуегонафикк.

[LunatiK]

Заметил отсутствие <html></html> , в html5 оно стало не обязательным ?

[swetlana]

LunatiK, оно формально необязательно в любом html. Строго обязательно оно лишь в xhtml.

[SelenIT]

Оно и в HTML2-4 было необязательным. Браузер сам достраивает.

[swetlana]

а вообще, при всём безобразии кода это чудовище отлично проходит валидацию.

[LunatiK]

LunatiK, оно формально необязательно в любом html. Строго обязательно оно лишь в xhtml.

А мужики-то не знают