Какие-то сложные игры c флоатами

29 August, 2008

XHTML/CSS

По-другому и правда не назовешь. Ах, эта обманчивая внешняя простота:

конечный результатВсё красиво

Всё просто

Скриншот нашей цели видно выше. Казалось бы, очевидным кодом будет:

  1. <dl>
  2. <dt>42</dt>
  3. <dd>
  4. <strong>Ответ на Вопрос</strong>
  5. <a href="#">Купить</a>
  6. </dd>
  7. </dl>

Добавим такой CSS:

  1. dl,dt,dd{
  2. float:left;/*флоатим каждый из блоков DL, и оба подблока DT DD*/
  3. }
  4. dd strong{
  5. display:block;/*чтобы название товара и кнопка «купить» были на разных строках*/
  6. }

Добавив еще шрифтов и цветов получим это:

конечный результатНичто не предвещало беды

Oh my… not again =(

Однако, вот что происходит при ресайзе окна:

так выглядит в ИЕТак выглядит в ИЕ

Как видите, блоки в панике, и не могут найти себе места. Не хватает только знаменитого крика «А-а-а-а-а».
Признаюсь, после получаса тщетных усилий чувство паники овладело и мной. Я решил обратиться к умным ребятам в WSG.

WSG to the rescue!

Одно из замечательнейших онлайн сообществ на этой планетке. Веселые австралийцы там спорят о том «как делать сайты для слепых», «каким HTML лучше размечать логотип», и «что такое эти веб-стандарты в честь которых назвали наше сообщество». Но там всегда помогают умным CSS-советом.

Калифорнийский француз, многодетный отец (2!) и вообще положительный человек Thierry, как настоящий воин, не смог пройти мимо моей трудной задачи, и придумал своё решение. Все оказалось до постыдного простым, блоки нужно сделать inline, и задать white-space:nowrap;
Вот такой код нужно было добавить к первоначальному, чтобы все заработало:

  1. /*Стили только для IE*/
  2. dt,dd{float:none;} /*убираем флоаты*/
  3. dt,dd{display:inline;zoom:1;} /*делаем DT и DD инлайновыми, но zoom наделяет их возможностью padding и другими блочными свойствами*/
  4. dl{white-space:nowrap;}/*заставляем DT и DD быть на одной строке*/

Попутно, Тьерри поделился забавным ИЕ хаком (из разряда грязных):

  1. dt,dd,{float:none;}/*лишняя запятая*/

Вся строка будет понята только IE6-7.
Всегда полезно общаться с иностранными коллегами.
Спасибо Thierry! Вот подправленный и теперь уже рабочий пример.

Идея и код очень простые, но именно потому могут кому-то пригодиться.

Еще об этом

Изначально я пытался решить проблему CSS-таблицами, но к сожалению мне не удавалось сэмулировать это поведение для ИЕ:

  1. dl{display:table}
  2. dt, dd{display:table-cell}

Это чтобы они вообще ни при каких обстоятельствах не переносились. При сильном сжатии окна, во всех предыдущих примерах, DD таки соскакивал вниз. При таком CSS, не соскакивает. Пример.

И еще вариант!

Как круто и гениально посоветовал в комментариях Влад, все это можно было бы решить вообще одной строкой для ИЕ:

  1. dt,dd{clear:right}

Совершенно непонятно почему, что, впрочем, не редкость с ИЕ, но это работает =).
Великолепно иметь в запасе сразу две простых идеи решения такой задачи.

В конце

Хотя проблема специфична, она связана с «флоатами в одну строку». Что, вобщем, встречается нередко. Никогда не знаешь где может пригодиться inline или clear.
Интересной проблема мне показалась еще и из-за внешней простоты дизайна.

Буду рад если поделитесь своими мыслями по теме! Или задачами =)

XHTML/CSS

30 комментариев к “Какие-то сложные игры c флоатами”

vladfrandom | 1. 29 August, 2008

вместо всей этой красоты для IE хватило бы:

/*Стили только для IE*/
dt,dd{clear:right;}

akella | 2. 29 August, 2008

Круто! Спасибо! И правда работает, не знаешь почему? =)
Или уже сталкивался с такой задачей и опытным путем..?

YoYurec | 3. 29 August, 2008

ну вы, ребята, и маньяки!!!
одним словом – изящно.

>Всегда полезно общаться с иностранными коллегами.
приятно также, что доносят знания и дополняют их наши коллеги :)

ещё раз спсб!

vladfrandom | 4. 29 August, 2008

опыт… пригодилость для карусельного слайдшоу.
а вот почему… it’s IE, be ready, here begins the strange miracles
кстати Тьерри дал невалидный вариант.

akella | 5. 29 August, 2008

Кое-как мне удалось найти в этом логику “уж если ты clear:right; то не смей сползать под float:left!”
Я так и написал “грязный”, я не фанат ЦСС-валидности, я практик работавший в стрессовых ситуациях =) Просто одна из альтернатив для _ и $

Vii | 6. 29 August, 2008

Немножко не в тему, но для IE ведь еще можно писать: *float:none; (если я не ошибаюсь, это “чудо” понимают и 6-ой, и 7-ой)

vladfrandom | 7. 29 August, 2008

скорее такое поведение имеет общие корни с эффектом height:1%; для родителя флоаченых элементов или vertcal-align:top; для вертикального списка с блочніми линками. imho естественно

vladfrandom | 8. 29 August, 2008

и, да, я маньяк валидности кода. хотя и работаю на верстальном конвейере =)

Олег | 9. 30 August, 2008

> “dt,dd,{float:none;}/*лишняя запятая*/”
а смысл хака, есть универсальный, можно просто добавить знак $ и это поймут только ИЕ, например: $dt,$dd {float:none;}

akella | 10. 30 August, 2008

Олег, то что вы написали не работает. Это не поймет ни один броузер.
Правильно dt,dd{$float:none}.

Deff | 11. 31 August, 2008

Или я что-то пропустил, или пример Тиерри в опере 9.5 таки сползает. И не при минимальном размере окна. А вот пример Влада более стабилен

xain | 12. 31 August, 2008

Юрий, а почему ты не выкладываеш свои кросс-посты на http://www.habrahabr.ru – я думаю людям будет очень приятно почитать твои статьи, сам читаю с удовольствием.

akella | 13. 31 August, 2008

Мне не нравится идея дублирования контента, а выкладывать там только ссылку сюда это какой-то чуждый мне пиар.

Евгений | 14. 1 September, 2008

Отличный пример — спасибо!

Впрочем как всегда… =)

Nit | 15. 3 September, 2008

Мне понравилось, классный пример, я уже и применить как придумал

0Т0 | 16. 3 September, 2008

Юра, простите, что не по теме.
Хочу узнать ваше мнение относительно данной верстки: http://oto-studio.com/lenta/
Любопытно.
Спасибо.

Genn | 17. 4 September, 2008

Очень интересный пост. Автор показался раскрыть со всех сторон тему. Мне кажется, что ему это удалось. Раньше зависал на других сайтах, но узнал об этом.

Genn | 18. 4 September, 2008

Кстати, проверь в Гуглохроме на всякий случай. Мне кажется, что эта компания энтузиастов придумала-таки, как подложить всем свиней ;)

akella | 19. 4 September, 2008

@OTO: табличная верстка. Для пользователя, почти никакой разницы, кроме слегка дерганой загрузки, как всегда с таблицами.
С технической точки зрения — много необязательных таблиц, как следствие неоправданные усложнения читабельности и сложности кода.
Так же обязательно нужно начать использовать таг P.
В остальном все клево.

@Genn: да нет, таки нет, по крайней мере в этом случае, обычный webkit. Просто не последняя версия.

hitalex | 20. 5 September, 2008

Думаю все-таки придумано очень даже интересно. Правда с другой стороны это искусство ради искусства.

0Т0 | 21. 5 September, 2008

Благодарю.

cross | 22. 9 September, 2008

Ох ничего себе :) Подобных манимуляций с dd тегами еще не видел )

Дизель генератор | 23. 15 September, 2008

Интересная игра с тэгами…

СПАСИБО!

Kelly | 24. 16 September, 2008

А по-моему, ничего особенного от ресайзинга и не произошло. Зря автор так сильно кричал Oh my god!

Роман | 25. 2 October, 2008

Интересно вот что: в вашем примере каждый блок является отдельным Definition list. Что не логично и “несемантично”. А логично было бы, мне кажется, заключить ВСЕ элементы в один DL. Правда в таком случае вам уже не удастся не использовать обтекание (float) для DT и DD.

akella | 26. 2 October, 2008

@Роман: в спецификации вообще говорится что DT должен быть один внутри DL ;)

Роман | 27. 3 October, 2008

Вы не могли укать где именно так говорится? http://www.w3.org/TR/html401/struct/lists.html#h-10.3

akella | 28. 4 October, 2008

Да, это я что-то сам придумал, прошу прощения =) Кажется где-то в WSG проскакивало, а контекст забыл. Наверное неверно отложилось. =(
В любом случае мне кажется логичным оборачивать так =) да и удобнее стилизовать, вы правы.

ЗЫ: кстати метод вполне сошел бы, только не удалось бы контролировать, чтобы дата и текст к ней относящийся был на одной строке =(

Андрей | 29. 13 November, 2008

Отличный пост, много новичков спрашивают именно подобные вопросы про слои. Помню как сам искал ответы на вёрстку и похожие темы нигде особо не были раскрыты.
Ставлю ссылку на пост :)

cssing :: Архив :: CSSing 2008 | 30. 30 December, 2008

[…] ? акие-то сложные игры c флоатами — по-другому и правда не скажешь. Необычный clear’инг […]

Оставить комментарий