|
JavaScript / HTML Создание динамической разметки страниц |
15.10.2012, 21:43
|
#1
|
Элита
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,273
Написано 754 полезных сообщений (для 1,833 пользователей)
|
Колонки в произвольном порядке
Для демонстрации задачи сделал html страницу, в которой можно редактировать css и сразу видеть изменения. Вот она.
Задача: средствами css заставить идти колонки в следующем порядке:
col_2 col_4 col_3 col_5 col_1. Без скриптов, без изменения вёрстки, только средствами css. Код css в редакторе можно изменять как угодно.
Возможно ли решить эту задачу?
|
(Offline)
|
|
15.10.2012, 22:49
|
#2
|
[object Object]
Регистрация: 01.08.2008
Адрес: В России
Сообщений: 4,360
Написано 2,473 полезных сообщений (для 6,856 пользователей)
|
Ответ: Колонки в произвольном порядке
Только средствами CSS нет. Звено DOM можно перенсети только с помощью JS. Можно устроить "похожее" поведение отрицательными отступами и обтеканиями у :before/:after, но только с фиксированными размерами.
Ещё можно попытать удачу со встраиванием JS прямо в CSS.
1) Через behavior
2) Через expression
Но, сам понимаешь, это будет ужас
Лучший вариант - написать на JS простейший сортиоващик.
Кстати поле для извращений не пахано, можно ещё использовать XSLT с его xpath :D
__________________
Retry, Abort, Ignore? █
Intel Core i7-9700 4.70 Ghz; 64Gb; Nvidia RTX 3070
AMD Ryzen 7 3800X 4.3Ghz; 64Gb; Nvidia 1070Ti
AMD Ryzen 7 1700X 3.4Ghz; 8Gb; AMD RX 570
AMD Athlon II 2.6Ghz; 8Gb; Nvidia GTX 750 Ti
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
16.10.2012, 00:32
|
#3
|
Элита
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,273
Написано 754 полезных сообщений (для 1,833 пользователей)
|
Ответ: Колонки в произвольном порядке
Перемещать элементы в 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; }
|
Но теперь элементы вылезают за пределы родителя и насколько я знаю отменить такое поведение не получится.
|
(Offline)
|
|
16.10.2012, 00:34
|
#4
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,742
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: Колонки в произвольном порядке
Не получится. Придётся задать родителю размеры.
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
16.10.2012, 07:27
|
#5
|
Элита
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,273
Написано 754 полезных сообщений (для 1,833 пользователей)
|
Ответ: Колонки в произвольном порядке
Я таки нашёл решение!
.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%; приводят к интересному эффекту, похожему на позиционирование. И контейнер теперь корректно оборачивает все колонки!
|
(Offline)
|
|
16.10.2012, 08:27
|
#6
|
[object Object]
Регистрация: 01.08.2008
Адрес: В России
Сообщений: 4,360
Написано 2,473 полезных сообщений (для 6,856 пользователей)
|
Ответ: Колонки в произвольном порядке
А теперь марафон по IE7, Opera 10, FF14
Работает? Я когда баловался с отрицательными отступами так и не добился работы "пиксель в писель" на всех браузерах, правда тогда ещё ie6 жив был.
__________________
Retry, Abort, Ignore? █
Intel Core i7-9700 4.70 Ghz; 64Gb; Nvidia RTX 3070
AMD Ryzen 7 3800X 4.3Ghz; 64Gb; Nvidia 1070Ti
AMD Ryzen 7 1700X 3.4Ghz; 8Gb; AMD RX 570
AMD Athlon II 2.6Ghz; 8Gb; Nvidia GTX 750 Ti
|
(Offline)
|
|
16.10.2012, 10:02
|
#7
|
Элита
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,273
Написано 754 полезных сообщений (для 1,833 пользователей)
|
Ответ: Колонки в произвольном порядке
Я забил на старые браузеры. Сейчас под рукой нет статистики посещаемости по браузерам, посмотрю вечером. Но на сколько я помню, доля ИЕ 6-7 там ничтожна. Насчёт Opera 10 и FF14 не уверен. Проверял в последних версиях Opera, FF, Chrome - работает.
Надоело программировать, потянуло на что-то другое, сейчас всякие HTML5, CSS3 модны, хочу поэкспериментировать с новыми технологиями. Но начал с чего-то попроще.
UPD: ой, насчёт оперы соврал. Проверял ещё и в 9 версии. Почти работает. Неправильно отобразились только элементы header и footer, потому что девятая опера их не поддерживает и по умолчанию считает инлайновыми. Но скорее всего это лечится при помощи display:block;, да и к поставленной задаче отношения не имеет. Подозреваю, что с более старыми FF (не знаю какая версия текущая) ситуация такая же.
UPD2: проверил в IE 9, тоже работает. Было бы ещё чудно, чтобы в 8 работало, а на более старые насрать. Восьмого под рукой нет, не могу проверить.
|
(Offline)
|
|
16.10.2012, 14:10
|
#8
|
.
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений (для 6,863 пользователей)
|
Ответ: Колонки в произвольном порядке
IE9 и FF никогда не были головной болью, а вот IE8 - проблемы большие с CSS. Также Опера тоже пляшет.
С Оперой всё просто - если нужна русская аудитория - придётся поддерживать, иначе ваще посрать.
Насчёт отрицательных маргинов, в IE8 всё тоже очень туго..
Ещё твой последний вариант не responsive, поэтому нужно указать концретную ширину для контейнера колонок, иначе они поплывут на узком экране.
Для отладки посмотри в новом Firefox есть прикольная dev туулза для responsive design, там можно не окно изменять в размере а внутри контейнер. Короче глянь.
Также советую посмотреть boilerplate и их reset'ер.
|
(Offline)
|
|
Эти 2 пользователя(ей) сказали Спасибо moka за это полезное сообщение:
|
|
16.10.2012, 19:50
|
#9
|
Элита
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,273
Написано 754 полезных сообщений (для 1,833 пользователей)
|
Ответ: Колонки в произвольном порядке
Ещё твой последний вариант не responsive, поэтому нужно указать концретную ширину для контейнера колонок, иначе они поплывут на узком экране.
|
Это я в курсе, просто не стал ограничивать ширину, чтобы тестить было удобнее, видеть куда блоки уплывают.
Про boilerplate почитаю, но мне хотелось бы разобраться в предмете самому и ориентироваться на будущее и самые современные свойства того же css, а не в слепую использовать чужие фреймворки.
|
(Offline)
|
|
16.10.2012, 20:27
|
#10
|
Элита
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,273
Написано 754 полезных сообщений (для 1,833 пользователей)
|
Ответ: Колонки в произвольном порядке
Глянул статистику. IE 7 всего 1%, в топку его поддержку. IE 6 в списке нет, но есть просто Explorer, видимо это и есть IE 6 и все более рание версии. Его 0.0%, тем более в топку. Вот IE 8 огорчает, да. Его 5.9% и почти не снижается. Ну а в остальном львиную долю занимают современные браузеры, последние версии Хрома, Оперы и Фаерфокса, а так же IE 9, с которым не так всё печально.
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
16.10.2012, 21:02
|
#11
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,742
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: Колонки в произвольном порядке
Отстой в том что под ХР нет Эксплорера новее 8.
M$, видимо, думали, что все пойдут ставить семёрку.
Ан нет, все сидят на ХР и на старом Осле.
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
16.10.2012, 21:06
|
#12
|
Элита
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,273
Написано 754 полезных сообщений (для 1,833 пользователей)
|
Ответ: Колонки в произвольном порядке
Было бы хорошо, чтобы какой-нибудь вконтакте сделал IE 9 минимальным браузером, требуемым для использования сайта, тогда хомячкам пришлось бы пересаживаться на другие браузеры. Подозреваю, что IE 6 выпилился в большей степени благодаря вконтакту (применительно к русскоговорящей аудитории).
|
(Offline)
|
|
16.10.2012, 21:13
|
#13
|
.
Регистрация: 05.08.2006
Сообщений: 10,429
Написано 3,454 полезных сообщений (для 6,863 пользователей)
|
Ответ: Колонки в произвольном порядке
Сообщение от 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 выглядел максимально одинаково на всех броузерах, и таких "исправлений" там куча.
В общем посмотри, это познавательно.
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
16.10.2012, 21:15
|
#14
|
Элита
Регистрация: 14.06.2008
Адрес: Украина, Киев
Сообщений: 2,273
Написано 754 полезных сообщений (для 1,833 пользователей)
|
Ответ: Колонки в произвольном порядке
Я уже почитал про boilerplate и скачал его =)
|
(Offline)
|
|
16.10.2012, 21:19
|
#15
|
Ференька
Регистрация: 26.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,742
Написано 5,461 полезных сообщений (для 15,675 пользователей)
|
Ответ: Колонки в произвольном порядке
Сообщение от Phantom
Было бы хорошо, чтобы какой-нибудь вконтакте сделал IE 9 минимальным браузером, требуемым для использования сайта, тогда хомячкам пришлось бы пересаживаться на другие браузеры. Подозреваю, что IE 6 выпилился в большей степени благодаря вконтакту (применительно к русскоговорящей аудитории).
|
Именно так выпилили IE6 (Ну Ютубе перестали поддерживать, как, ЕМНИП, и другие сервисы Гугла)
|
(Offline)
|
|
Сообщение было полезно следующим пользователям:
|
|
Ваши права в разделе
|
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения
HTML код Выкл.
|
|
|
Часовой пояс GMT +4, время: 07:31.
|