Колонки в произвольном порядке
Для демонстрации задачи сделал html страницу, в которой можно редактировать css и сразу видеть изменения. Вот она.
Задача: средствами css заставить идти колонки в следующем порядке: col_2 col_4 col_3 col_5 col_1. Без скриптов, без изменения вёрстки, только средствами css. Код css в редакторе можно изменять как угодно. Возможно ли решить эту задачу? |
Ответ: Колонки в произвольном порядке
Только средствами CSS нет. Звено DOM можно перенсети только с помощью JS. Можно устроить "похожее" поведение отрицательными отступами и обтеканиями у :before/:after, но только с фиксированными размерами.
Ещё можно попытать удачу со встраиванием JS прямо в CSS. 1) Через behavior 2) Через expression Но, сам понимаешь, это будет ужас Лучший вариант - написать на JS простейший сортиоващик. |
Ответ: Колонки в произвольном порядке
Перемещать элементы в DOM и не надо. Просто хочется, чтобы элементы "уплыли" куда надо или были позиционированы как надо. Задача более теоретическая, хотелось бы найти красивое решение.
Вот через позиционирование сделал в лоб: Цитата:
|
Ответ: Колонки в произвольном порядке
Не получится. Придётся задать родителю размеры.
|
Ответ: Колонки в произвольном порядке
Я таки нашёл решение!
Цитата:
|
Ответ: Колонки в произвольном порядке
А теперь марафон по IE7, Opera 10, FF14
Работает? Я когда баловался с отрицательными отступами так и не добился работы "пиксель в писель" на всех браузерах, правда тогда ещё ie6 жив был. |
Ответ: Колонки в произвольном порядке
Я забил на старые браузеры. Сейчас под рукой нет статистики посещаемости по браузерам, посмотрю вечером. Но на сколько я помню, доля ИЕ 6-7 там ничтожна. Насчёт Opera 10 и FF14 не уверен. Проверял в последних версиях Opera, FF, Chrome - работает.
Надоело программировать, потянуло на что-то другое, сейчас всякие HTML5, CSS3 модны, хочу поэкспериментировать с новыми технологиями. Но начал с чего-то попроще. UPD: ой, насчёт оперы соврал. Проверял ещё и в 9 версии. Почти работает. Неправильно отобразились только элементы header и footer, потому что девятая опера их не поддерживает и по умолчанию считает инлайновыми. Но скорее всего это лечится при помощи display:block;, да и к поставленной задаче отношения не имеет. Подозреваю, что с более старыми FF (не знаю какая версия текущая) ситуация такая же. UPD2: проверил в IE 9, тоже работает. Было бы ещё чудно, чтобы в 8 работало, а на более старые насрать. Восьмого под рукой нет, не могу проверить. |
Ответ: Колонки в произвольном порядке
IE9 и FF никогда не были головной болью, а вот IE8 - проблемы большие с CSS. Также Опера тоже пляшет.
С Оперой всё просто - если нужна русская аудитория - придётся поддерживать, иначе ваще посрать. Насчёт отрицательных маргинов, в IE8 всё тоже очень туго.. Ещё твой последний вариант не responsive, поэтому нужно указать концретную ширину для контейнера колонок, иначе они поплывут на узком экране. Для отладки посмотри в новом Firefox есть прикольная dev туулза для responsive design, там можно не окно изменять в размере а внутри контейнер. Короче глянь. Также советую посмотреть boilerplate и их reset'ер. |
Ответ: Колонки в произвольном порядке
Цитата:
Про boilerplate почитаю, но мне хотелось бы разобраться в предмете самому и ориентироваться на будущее и самые современные свойства того же css, а не в слепую использовать чужие фреймворки. |
Ответ: Колонки в произвольном порядке
Вложений: 1
Глянул статистику. IE 7 всего 1%, в топку его поддержку. IE 6 в списке нет, но есть просто Explorer, видимо это и есть IE 6 и все более рание версии. Его 0.0%, тем более в топку. Вот IE 8 огорчает, да. Его 5.9% и почти не снижается. Ну а в остальном львиную долю занимают современные браузеры, последние версии Хрома, Оперы и Фаерфокса, а так же IE 9, с которым не так всё печально.
|
Ответ: Колонки в произвольном порядке
Отстой в том что под ХР нет Эксплорера новее 8.
M$, видимо, думали, что все пойдут ставить семёрку. Ан нет, все сидят на ХР и на старом Осле. :( |
Ответ: Колонки в произвольном порядке
Было бы хорошо, чтобы какой-нибудь вконтакте сделал IE 9 минимальным браузером, требуемым для использования сайта, тогда хомячкам пришлось бы пересаживаться на другие браузеры. Подозреваю, что IE 6 выпилился в большей степени благодаря вконтакту (применительно к русскоговорящей аудитории).
|
Ответ: Колонки в произвольном порядке
Цитата:
Вот видео, посмотри: https://www.youtube.com/watch?v=oDlsOyPKUTM Очень познавательно даже не для пользователей boilerplate вообще. И его можно качнуть тут: http://html5boilerplate.com/ Суть его в том, что например select элемент отображается по разному в разных броузерах, разных размеров и стили применяя на него тоже имеют разные результаты. Boilerplate имеет CSS стили чтобы это дело "обнулить" таким образом чтобы combobox выглядел максимально одинаково на всех броузерах, и таких "исправлений" там куча. В общем посмотри, это познавательно. |
Ответ: Колонки в произвольном порядке
Я уже почитал про boilerplate и скачал его =)
|
Ответ: Колонки в произвольном порядке
Цитата:
|
Часовой пояс GMT +4, время: 07:58. |
vBulletin® Version 3.6.5.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Перевод: zCarot