Какие-то сложные игры c флоатами
29 August, 2008По-другому и правда не назовешь. Ах, эта обманчивая внешняя простота:
Всё красиво
Всё просто
Скриншот нашей цели видно выше. Казалось бы, очевидным кодом будет:
- <dl>
- <dt>42</dt>
- <dd>
- <strong>Ответ на Вопрос</strong>
- <a href="#">Купить</a>
- </dd>
- </dl>
Добавим такой CSS:
- dl,dt,dd{
- float:left;/*флоатим каждый из блоков DL, и оба подблока DT DD*/
- }
- dd strong{
- display:block;/*чтобы название товара и кнопка «купить» были на разных строках*/
- }
Добавив еще шрифтов и цветов получим это:
Ничто не предвещало беды
Oh my… not again =(
Однако, вот что происходит при ресайзе окна:
Так выглядит в ИЕ
Как видите, блоки в панике, и не могут найти себе места. Не хватает только знаменитого крика «А-а-а-а-а».
Признаюсь, после получаса тщетных усилий чувство паники овладело и мной. Я решил обратиться к умным ребятам в WSG.
WSG to the rescue!
Одно из замечательнейших онлайн сообществ на этой планетке. Веселые австралийцы там спорят о том «как делать сайты для слепых», «каким HTML лучше размечать логотип», и «что такое эти веб-стандарты в честь которых назвали наше сообщество». Но там всегда помогают умным CSS-советом.
Калифорнийский француз, многодетный отец (2!) и вообще положительный человек Thierry, как настоящий воин, не смог пройти мимо моей трудной задачи, и придумал своё решение. Все оказалось до постыдного простым, блоки нужно сделать inline, и задать white-space:nowrap;
Вот такой код нужно было добавить к первоначальному, чтобы все заработало:
- /*Стили только для IE*/
- dt,dd{float:none;} /*убираем флоаты*/
- dt,dd{display:inline;zoom:1;} /*делаем DT и DD инлайновыми, но zoom наделяет их возможностью padding и другими блочными свойствами*/
- dl{white-space:nowrap;}/*заставляем DT и DD быть на одной строке*/
Попутно, Тьерри поделился забавным ИЕ хаком (из разряда грязных):
- dt,dd,{float:none;}/*лишняя запятая*/
Вся строка будет понята только IE6-7.
Всегда полезно общаться с иностранными коллегами.
Спасибо Thierry! Вот подправленный и теперь уже рабочий пример.
Идея и код очень простые, но именно потому могут кому-то пригодиться.
Еще об этом
Изначально я пытался решить проблему CSS-таблицами, но к сожалению мне не удавалось сэмулировать это поведение для ИЕ:
- dl{display:table}
- dt, dd{display:table-cell}
Это чтобы они вообще ни при каких обстоятельствах не переносились. При сильном сжатии окна, во всех предыдущих примерах, DD таки соскакивал вниз. При таком CSS, не соскакивает. Пример.
И еще вариант!
Как круто и гениально посоветовал в комментариях Влад, все это можно было бы решить вообще одной строкой для ИЕ:
- dt,dd{clear:right}
Совершенно непонятно почему, что, впрочем, не редкость с ИЕ, но это работает =).
Великолепно иметь в запасе сразу две простых идеи решения такой задачи.
В конце
Хотя проблема специфична, она связана с «флоатами в одну строку». Что, вобщем, встречается нередко. Никогда не знаешь где может пригодиться inline или clear.
Интересной проблема мне показалась еще и из-за внешней простоты дизайна.
- Первый глючный пример
- Пример от Тьерри с display:inline
- Третий пример с table-cell
- Пример от vladfrandom c clear:right
Буду рад если поделитесь своими мыслями по теме! Или задачами =)
вместо всей этой красоты для IE хватило бы:
/*Стили только для IE*/
dt,dd{clear:right;}
Круто! Спасибо! И правда работает, не знаешь почему? =)
Или уже сталкивался с такой задачей и опытным путем..?
ну вы, ребята, и маньяки!!!
одним словом – изящно.
>Всегда полезно общаться с иностранными коллегами.
приятно также, что доносят знания и дополняют их наши коллеги :)
ещё раз спсб!
опыт… пригодилость для карусельного слайдшоу.
а вот почему… it’s IE, be ready, here begins the strange miracles
кстати Тьерри дал невалидный вариант.
Кое-как мне удалось найти в этом логику “уж если ты clear:right; то не смей сползать под float:left!”
Я так и написал “грязный”, я не фанат ЦСС-валидности, я практик работавший в стрессовых ситуациях =) Просто одна из альтернатив для _ и $
Немножко не в тему, но для IE ведь еще можно писать: *float:none; (если я не ошибаюсь, это “чудо” понимают и 6-ой, и 7-ой)
скорее такое поведение имеет общие корни с эффектом height:1%; для родителя флоаченых элементов или vertcal-align:top; для вертикального списка с блочніми линками. imho естественно
и, да, я маньяк валидности кода. хотя и работаю на верстальном конвейере =)
> “dt,dd,{float:none;}/*лишняя запятая*/”
а смысл хака, есть универсальный, можно просто добавить знак $ и это поймут только ИЕ, например: $dt,$dd {float:none;}
Олег, то что вы написали не работает. Это не поймет ни один броузер.
Правильно dt,dd{$float:none}.
Или я что-то пропустил, или пример Тиерри в опере 9.5 таки сползает. И не при минимальном размере окна. А вот пример Влада более стабилен
Юрий, а почему ты не выкладываеш свои кросс-посты на http://www.habrahabr.ru – я думаю людям будет очень приятно почитать твои статьи, сам читаю с удовольствием.
Мне не нравится идея дублирования контента, а выкладывать там только ссылку сюда это какой-то чуждый мне пиар.
Отличный пример — спасибо!
Впрочем как всегда… =)
Мне понравилось, классный пример, я уже и применить как придумал
Юра, простите, что не по теме.
Хочу узнать ваше мнение относительно данной верстки: http://oto-studio.com/lenta/
Любопытно.
Спасибо.
Очень интересный пост. Автор показался раскрыть со всех сторон тему. Мне кажется, что ему это удалось. Раньше зависал на других сайтах, но узнал об этом.
Кстати, проверь в Гуглохроме на всякий случай. Мне кажется, что эта компания энтузиастов придумала-таки, как подложить всем свиней ;)
@OTO: табличная верстка. Для пользователя, почти никакой разницы, кроме слегка дерганой загрузки, как всегда с таблицами.
С технической точки зрения — много необязательных таблиц, как следствие неоправданные усложнения читабельности и сложности кода.
Так же обязательно нужно начать использовать таг P.
В остальном все клево.
@Genn: да нет, таки нет, по крайней мере в этом случае, обычный webkit. Просто не последняя версия.
Думаю все-таки придумано очень даже интересно. Правда с другой стороны это искусство ради искусства.
Благодарю.
Ох ничего себе :) Подобных манимуляций с dd тегами еще не видел )
Интересная игра с тэгами…
СПАСИБО!
А по-моему, ничего особенного от ресайзинга и не произошло. Зря автор так сильно кричал Oh my god!
Интересно вот что: в вашем примере каждый блок является отдельным Definition list. Что не логично и “несемантично”. А логично было бы, мне кажется, заключить ВСЕ элементы в один DL. Правда в таком случае вам уже не удастся не использовать обтекание (float) для DT и DD.
@Роман: в спецификации вообще говорится что DT должен быть один внутри DL ;)
Вы не могли укать где именно так говорится? http://www.w3.org/TR/html401/struct/lists.html#h-10.3
Да, это я что-то сам придумал, прошу прощения =) Кажется где-то в WSG проскакивало, а контекст забыл. Наверное неверно отложилось. =(
В любом случае мне кажется логичным оборачивать так =) да и удобнее стилизовать, вы правы.
ЗЫ: кстати метод вполне сошел бы, только не удалось бы контролировать, чтобы дата и текст к ней относящийся был на одной строке =(
Отличный пост, много новичков спрашивают именно подобные вопросы про слои. Помню как сам искал ответы на вёрстку и похожие темы нигде особо не были раскрыты.
Ставлю ссылку на пост :)
[…] ? акие-то сложные игры c флоатами — по-другому и правда не скажешь. Необычный clear’инг […]
Оставить комментарий