Простая верстка адаптивного чата

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

Сделано на CSS3. HTML элементарный, стили чуть позаморочастее. Сделал адаптацию под небольшие экраны.
На верстку ушло несколько часов, с кроссбраузерностью я не заморачивался, протестировав заметил, что в Опере блоки едут, IE меньше 10 версии естественно печалят. Возможно как-нибудь уделю еще немного времени, чтобы в Опере поправить и для старых ИЕ сделать читабельно.
Прошу прощения за jQuery, я не программист, написал как умею )

Результат (кликабельно):

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

Ссылки:
Demo: http://css3.techmeat.net/adapchat/
Github: https://github.com/TecHMeaT/adapchat (а вдруг кому понадобится)
Ссылку на Dribbble потерял, сори…

P.S.: Дарю черепаху тому, кто пофиксит под Оперу )

Размещено в CSS.

В этом блоке кнопочки для кликания на случай, если пост оказался полезным :)
  • Сергей

    min-width надо бы в итоге

    • Да, пожалуй надо добавить. Спасибо.

  • vlad

    инлайн-блоки сломали мне мозг 🙁 вот почему у adapchat-text справа 260 маржин, а не 130, как по идее бы? (ширина аватарки с бордюрами) ?

  • vlad

    inline-block сломал мне мозг 🙁 ну вот почему у adapchat-text справа 260px маржин а не 130, как должно бы быть? (тк 130 это примерн оава с бордюрами)? понятно, что сначала он уезжает за пределы блока (тк inline+nowrap), но чего именно после 260 потом вдруг начинается сжиматься??

  • vlad

    в общем, если выкинуть часть инлайн-блоков, можно вот так: http://jsfiddle.net/nzHNx/

    правда я там код упростил, убрал ряд элементов, чтобы не замусоривали картину.

  • Критик

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

    Этого мне хватило, чтобы больше никогда не заходить на ваш сайт. Спасибо.

    • Канат

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