Колонки в произвольном порядке

[Phantom]

Для демонстрации задачи сделал html страницу, в которой можно редактировать css и сразу видеть изменения. Вот она.
Задача: средствами css заставить идти колонки в следующем порядке:
col_2 col_4 col_3 col_5 col_1. Без скриптов, без изменения вёрстки, только средствами css. Код css в редакторе можно изменять как угодно.

Возможно ли решить эту задачу?

[Randomize]

Только средствами CSS нет. Звено DOM можно перенсети только с помощью JS. Можно устроить "похожее" поведение отрицательными отступами и обтеканиями у :before/:after, но только с фиксированными размерами.

Ещё можно попытать удачу со встраиванием JS прямо в CSS.
1) Через behavior
2) Через expression
Но, сам понимаешь, это будет ужас

Лучший вариант - написать на JS простейший сортиоващик.

Кстати поле для извращений не пахано, можно ещё использовать XSLT с его xpath :D

[Phantom]

Перемещать элементы в DOM и не надо. Просто хочется, чтобы элементы "уплыли" куда надо или были позиционированы как надо. Задача более теоретическая, хотелось бы найти красивое решение.
Вот через позиционирование сделал в лоб:

.container {
position:relative;
}
.column {
position:absolute;
}
.col_1 { width:220px; top:30px; left:776px; }
.col_2 { width:200px; top:30px; left:8px; }
.col_3 { width:180px; top:30px; left:412px; }
.col_4 { width:160px; top:30px; left:230px; }
.col_5 { width:140px; top:30px; left:614px; }

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

[ABTOMAT]

Не получится. Придётся задать родителю размеры.

[Phantom]

Я таки нашёл решение!

.container {
overflow:hidden;
}
.column {
float:left;
margin-right:-100%;
}
.col_1 { width:220px; margin-left:768px; }
.col_2 { width:200px; margin-left:0px; }
.col_3 { width:180px; margin-left:404px; }
.col_4 { width:160px; margin-left:222px; }
.col_5 { width:140px; margin-left:606px; }

float:left; + margin-right:-100%; приводят к интересному эффекту, похожему на позиционирование. И контейнер теперь корректно оборачивает все колонки!

[Randomize]

А теперь марафон по IE7, Opera 10, FF14
Работает? Я когда баловался с отрицательными отступами так и не добился работы "пиксель в писель" на всех браузерах, правда тогда ещё ie6 жив был.

[Phantom]

Я забил на старые браузеры. Сейчас под рукой нет статистики посещаемости по браузерам, посмотрю вечером. Но на сколько я помню, доля ИЕ 6-7 там ничтожна. Насчёт Opera 10 и FF14 не уверен. Проверял в последних версиях Opera, FF, Chrome - работает.

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

UPD: ой, насчёт оперы соврал. Проверял ещё и в 9 версии. Почти работает. Неправильно отобразились только элементы header и footer, потому что девятая опера их не поддерживает и по умолчанию считает инлайновыми. Но скорее всего это лечится при помощи display:block;, да и к поставленной задаче отношения не имеет. Подозреваю, что с более старыми FF (не знаю какая версия текущая) ситуация такая же.

UPD2: проверил в IE 9, тоже работает. Было бы ещё чудно, чтобы в 8 работало, а на более старые насрать. Восьмого под рукой нет, не могу проверить.

[moka]

IE9 и FF никогда не были головной болью, а вот IE8 - проблемы большие с CSS. Также Опера тоже пляшет.
С Оперой всё просто - если нужна русская аудитория - придётся поддерживать, иначе ваще посрать.

Насчёт отрицательных маргинов, в IE8 всё тоже очень туго..

Ещё твой последний вариант не responsive, поэтому нужно указать концретную ширину для контейнера колонок, иначе они поплывут на узком экране.

Для отладки посмотри в новом Firefox есть прикольная dev туулза для responsive design, там можно не окно изменять в размере а внутри контейнер. Короче глянь.

Также советую посмотреть boilerplate и их reset'ер.

[Phantom]

Ещё твой последний вариант не responsive, поэтому нужно указать концретную ширину для контейнера колонок, иначе они поплывут на узком экране.

Это я в курсе, просто не стал ограничивать ширину, чтобы тестить было удобнее, видеть куда блоки уплывают.

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

[Phantom]

Глянул статистику. IE 7 всего 1%, в топку его поддержку. IE 6 в списке нет, но есть просто Explorer, видимо это и есть IE 6 и все более рание версии. Его 0.0%, тем более в топку. Вот IE 8 огорчает, да. Его 5.9% и почти не снижается. Ну а в остальном львиную долю занимают современные браузеры, последние версии Хрома, Оперы и Фаерфокса, а так же IE 9, с которым не так всё печально.

[ABTOMAT]

Отстой в том что под ХР нет Эксплорера новее 8.
M$, видимо, думали, что все пойдут ставить семёрку.
Ан нет, все сидят на ХР и на старом Осле.

[Phantom]

Было бы хорошо, чтобы какой-нибудь вконтакте сделал IE 9 минимальным браузером, требуемым для использования сайта, тогда хомячкам пришлось бы пересаживаться на другие браузеры. Подозреваю, что IE 6 выпилился в большей степени благодаря вконтакту (применительно к русскоговорящей аудитории).

[moka]

Сообщение от Phantom

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

HTML5 boilerplate это не фреймворк. Он не меняет твоей работы, не диктует практики. Это дополнение, всё что от туда советую использовать это изначально CSS. Почитай его, и изучи, что именно в Boilerplate HTML5 CSS такого, что его используют нынче почти все новые проекты (которые заинтересованы в хорошем мульти-броузерном продукте, например копипаст с оффа: Google, Microsoft, NASA, Nike, Barack Obama, Mercedes-Benz, ITV News, BAE Systems, Creative Commons, Australia Post, Entertainment Weekly, Racing Green, and many more.).
Вот видео, посмотри: https://www.youtube.com/watch?v=oDlsOyPKUTM
Очень познавательно даже не для пользователей boilerplate вообще.
И его можно качнуть тут: http://html5boilerplate.com/

Суть его в том, что например select элемент отображается по разному в разных броузерах, разных размеров и стили применяя на него тоже имеют разные результаты. Boilerplate имеет CSS стили чтобы это дело "обнулить" таким образом чтобы combobox выглядел максимально одинаково на всех броузерах, и таких "исправлений" там куча.
В общем посмотри, это познавательно.

[Phantom]

Я уже почитал про boilerplate и скачал его =)

[ABTOMAT]

Сообщение от Phantom

Было бы хорошо, чтобы какой-нибудь вконтакте сделал IE 9 минимальным браузером, требуемым для использования сайта, тогда хомячкам пришлось бы пересаживаться на другие браузеры. Подозреваю, что IE 6 выпилился в большей степени благодаря вконтакту (применительно к русскоговорящей аудитории).

Именно так выпилили IE6 (Ну Ютубе перестали поддерживать, как, ЕМНИП, и другие сервисы Гугла)