Гугл – строка "Весь день" (вторая строка после строкой с наименованиями дней недели) свёрнута –
эта же строка свёрнута – смотрим мероприятия из неё, не разворачивая "весь день"
эта же строка развёрнута –
как работает гугл при изменении размера окна (резина):
Мэйл – строка "Весь день" свёрнута –
эта же строка свёрнута – смотрим мероприятия из неё, не разворачивая "весь день" –
эта же строка развёрнута –
как работает гугл при изменении размера окна (полурезина – сжимание ширины до определённой ширины):
Задача – сверстать (ТОЛЬКО html + css) недельный календарь (Только ту область, которую показываю в скриншотах), резиновый или полурезиновый. Мне бы хотелось, чтобы выглядел как mail.ru, но был резиновый как гугл. Требования: семантичная вёрстка без излишеств...
Для свёртывания и развёртывания строки сделать так: псевдокласс css для развёрнутой строки "Весь день" – .rolledDown, псевдокласс свёрнутой строки – нет класса .rolledDown.
Для просмотра мероприятий, не разворачивая весь день, заводим псевдокласс css .rolledDown уже для UL, в котором перечислены события данного дня.
В ОБЩЕМ-ТО ПРИМЕР ВЁРСТКИ (html + css + js) И ПОВЕДЕНИЯ ЗДЕСЬ :
Только тут цвета,размеры и отступы не такие, как у гугл или мэйл календаря....(СДЕЛАЙТЕ КАК ТАМ) + Вот какая проблема, КОТОРУЮ НУЖНО РЕШИТЬ:
- при развёрнутой строке "Весь день" #tabbodyDiv вылезает из #week;
- при развёрнутой строке "Весь день" границы столбцов в этой строке не отображаются или отображаются не во всю ширину этой строки...
Обе проблемы мне понятно как решить...
Однако в принципе БЫЛ БЫ РАД СОТРУДНИЧАТЬ С НОРМАЛЬНЫМ ВЕРСТАЛЬЩИКОМ для периодических таких мелких заказов. И оставляю это для Вас, чтобы посмотреть, кто может решать такие и аналогичные задачи...
ПС А вообще – вдруг я чего намудрил с вёрсткой и можно ещё чего проще и красивее сделать (например, меня смущает мелкое несовпадение ширины столбцов в шапке и в теле таблицы)?