Комментарии 115
Вот самым востребованным в css3 было бы свойство display: column. Прсто и без вопросов Если несколько блоков с display: column встречаются внутри одного блока — выстраивать их столбиками одной высоты с возможностью добавлять маргины, паддинги, и бордеры. Столько бы проблем сразу решило.
+9
Это можно делать уже сейчас, и работает «почти» везде, однако надо заранее знать количество колонок:
<html>
<head>
<style>
.column { display: inline-block; width: 33%;}
</style>
</head>
<body>
<div>
<div class="column">
<h3>Заключение</h3>
<p>Спектр применения свойств column пока еще очень узок. Даже не из-за того, что не все браузеры их поддерживают (Mozilla + WebKit дают уже более половины рынка), а по причине неполной реализации функций. Хотя функционал вполне интересный и заслуживает внимания.</p>
</div>
<div class="column">
<h3>Заключение</h3>
<p>Спектр применения свойств column пока еще очень узок. Даже не из-за того, что не все браузеры их поддерживают (Mozilla + WebKit дают уже более половины рынка), а по причине неполной реализации функций. Хотя функционал вполне интересный и заслуживает внимания.</p>
</div>
<div class="column">
<h3>Заключение</h3>
<p>Спектр применения свойств column пока еще очень узок. Даже не из-за того, что не все браузеры их поддерживают (Mozilla + WebKit дают уже более половины рынка), а по причине неполной реализации функций. Хотя функционал вполне интересный и заслуживает внимания.</p>
</div>
</div>
</body>
</html>
+2
Да знаю я, как это делается. Кучу способов знаю. Только, например, ваш способ не даст колонки одинаковой высоты. А чтобы сделать колонки именно одинаковой высоты — нужно что-то посложнее inline-block. Кстати,
.column { display: inline-block; *display: inline; zoom: 1; width: 33%;} — вот теперь везде будет работать, ага.
.column { display: inline-block; *display: inline; zoom: 1; width: 33%;} — вот теперь везде будет работать, ага.
+5
У пэрента не забудьте сделать вертикал-алигн.
+4
не на много сложнее ;) + margin-bottom: -32767px; padding-bottom: 32767px; background:#eee;
+1
Я бы поставил просто 30000px, чтобы не нарваться на 215 болезненно.
0
Так можно бэкграунд забабахать. А нижний бордер? Я повторюсь, но я все эти методы знаю.
Кстати, раз уж все пытаются подсказать мне — самый лучший способ делать колонки — display: table в комбинации с inline + zoom в ie. Для ие, правда, придётся заюзать expression, но у меня есть универсальный. А для одинаковой высоты в ие я написал column.htc Примерно такой стиль получается:
.table
{
width: 100%;
display: table;
}
.column
{
display: table-cell;
vertical-align: top;
}
.column,
{
behavior: url(/stylesheets/column.htc);
display: inline;
width: expression(function(t){
var sum = 0;
for (var i = 0; i < t.parentNode.childNodes.length; i++) {
if (t.parentNode.childNodes[i] != t) {
sum += t.parentNode.childNodes[i].offsetWidth;
}
}
return t.parentNode.clientWidth — sum + 'px';
}(this));
zoom: 1;
}
Не могу свой универсальный экспрешн найти, где-то был.
И всё, любые колоки одинаковой высоты и ни единого лишнего блока.
Кстати, раз уж все пытаются подсказать мне — самый лучший способ делать колонки — display: table в комбинации с inline + zoom в ie. Для ие, правда, придётся заюзать expression, но у меня есть универсальный. А для одинаковой высоты в ие я написал column.htc Примерно такой стиль получается:
.table
{
width: 100%;
display: table;
}
.column
{
display: table-cell;
vertical-align: top;
}
.column,
{
behavior: url(/stylesheets/column.htc);
display: inline;
width: expression(function(t){
var sum = 0;
for (var i = 0; i < t.parentNode.childNodes.length; i++) {
if (t.parentNode.childNodes[i] != t) {
sum += t.parentNode.childNodes[i].offsetWidth;
}
}
return t.parentNode.clientWidth — sum + 'px';
}(this));
zoom: 1;
}
Не могу свой универсальный экспрешн найти, где-то был.
И всё, любые колоки одинаковой высоты и ни единого лишнего блока.
0
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
я знаю для чего он нужен. весь интерфейс мозиллы на нём построен. его достаточно для большинства нужд. а распредление контента на колонки не нужно. у вэба своя специфика — нет ограничения на вертикальный размер страницы, но на неё смотрят через маленькое окошко. при многоколоночной вёрстке, любой достаточно объёмный текст, не влезающий в это окошко, будет вызывать неиллюзорный баттхёрт. так что невозможность в угоду дизайнерским изыскам а-ля полиграфия сделать неэргономичный интерфейс — несомненный плюс.
-3
Не надо говорите «гоп»… В 95 году «достаточно» было текста, и GIF-анимация была верхом веб-мультимедиа…
+2
вот когда будет не достаточно — тогда и поговорим. хорошо?
-1
НЛО прилетело и опубликовало эту надпись здесь
давно недостаточно отсутствия флексбоксов, которые необходимы для адаптивной табличной вёрстки — то что сейчас приходится релизовывать на флоатах или инлайн-блоках.
перенос контента по нижней границе, а не по правой — нарушает естественный порядок его восприятия ( слева-направо, потом сверху-вниз )
перенос контента по нижней границе, а не по правой — нарушает естественный порядок его восприятия ( слева-направо, потом сверху-вниз )
0
Ниже уже отписали, но дополню: если не надо Вам, то не значит что не надо всем, Вы не один. ))
+1
НЛО прилетело и опубликовало эту надпись здесь
1. ложь, пиздёжь и провокация. годится только для маленьких текстов, заведомо влезающих в экран и то с оговорками.
2. и чо?
ни одного примера использования во благо я так и не увидел. всё какие-то демки для макбуков.
2. и чо?
ни одного примера использования во благо я так и не увидел. всё какие-то демки для макбуков.
-2
НЛО прилетело и опубликовало эту надпись здесь
лентой. у людей линейное мышление, так что даже если ты разбросаешь по экрану облако абстрактов, им придётся мысленно выстраивать их в одну последовательность, либо хаотично выцепить взглядом из это кучи несколько и забить на остальные, что ничем не лучше, чем если бы просто вначале ленты были выведены несколько случайных.
+1
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
если пользователь не прокручивает, значит информация его не очень интересует. значит в вываленной вами горе новостей слишком малый процент интересных. и именно эту проблему надо решать, а не как упихнуть на экран ещё больше всё также не интересной ему информации.
в пустоте нет ничего плохого. интерфейс должен быть простым и понятным. перегруженных интерфейсов пользователи пугаются. хаотичное расположение информации их также отпугивает.
в пустоте нет ничего плохого. интерфейс должен быть простым и понятным. перегруженных интерфейсов пользователи пугаются. хаотичное расположение информации их также отпугивает.
+1
НЛО прилетело и опубликовало эту надпись здесь
у кого-то явные проблемы с чтением =_=" повторяю: ПОЛЬЗОВАТЕЛЬ НЕ БУДЕТ ДОЛГО ЛИСТАТЬ ЛЕНТУ, ДОЛГО ВЫИСКИВАТЬ В ГОРЕ МУСОРА ИЛИ ДЕЛАТЬ ЧТО УГОДНО ЕЩЁ ДОЛГО, НЕ ПОЛУЧАЯ ПОЛОЖИТЕЛЬНОГО ФИДБЕКА В ВИДЕ ИНТЕРЕСУЮЩЕЙ ЕГО ИНФОРМАЦИИ.
ты бы ещё в гугл послал. что я должен найти на сайте с вырвиглазными цветами?
ты действительно думаешь, что хаотичные скачки между колонками более комфортны, чем ритмичные в рамках одной? ты действительно веришь, что чем больше на него вывалишь информации, тем с большей он ознакомится?
неперегруженному интерфейсу колонки не нужны.
не может быть уродливым то, чего нет. наличие какой-то возможности вовсе не означает, что ею надо пренепременно воспользоваться. на рабочем столе у тебя всё свободное место завалено или ты всё-таки стараешься убирать не нужные постоянно вещи в ящики?
ты бы ещё в гугл послал. что я должен найти на сайте с вырвиглазными цветами?
ты действительно думаешь, что хаотичные скачки между колонками более комфортны, чем ритмичные в рамках одной? ты действительно веришь, что чем больше на него вывалишь информации, тем с большей он ознакомится?
неперегруженному интерфейсу колонки не нужны.
не может быть уродливым то, чего нет. наличие какой-то возможности вовсе не означает, что ею надо пренепременно воспользоваться. на рабочем столе у тебя всё свободное место завалено или ты всё-таки стараешься убирать не нужные постоянно вещи в ящики?
-4
НЛО прилетело и опубликовало эту надпись здесь
я знаю чей. по ссылке нет сравнения длинных и толстых страниц. могу поспорить, если в топе будет не 6 диванов, а 26, то внимательно будут рассмотрены не более 10. очень показательно, что на самолёт так и не посмотрели, хотя он находится и в топе страницы. впрочем, я не вчитывался.
да. колонки приводят к уплотнению информации и к её хаотичному расположению.
тэг blink — это ведь тоже всего-лишь инструмент, который надо использовать с умом и бла-бла-бла, только вот если бы его не было, то его бы никто и не хотел использовать. но его сделати и каждому второму дизигнеру пренепременно потребовалось заюзать его для привлечения внимания.
тем не менее на нём полно уродливого пустого места! :-о
да выбирай любого %-) поспорим втроём.
да. колонки приводят к уплотнению информации и к её хаотичному расположению.
тэг blink — это ведь тоже всего-лишь инструмент, который надо использовать с умом и бла-бла-бла, только вот если бы его не было, то его бы никто и не хотел использовать. но его сделати и каждому второму дизигнеру пренепременно потребовалось заюзать его для привлечения внимания.
тем не менее на нём полно уродливого пустого места! :-о
да выбирай любого %-) поспорим втроём.
0
Иногда такие дискуссии радуют меня, как верстальщика полиграфии, тем, что полиграфия статична, а при смене контента надо полностью переразвёрстывать.
Меня интересует такая деталь — будет ли соблюдаться горизонтальный ритм в колонках, основанный на опорной сетке, в случае внедрения в поток элементов, не совпадающих по высоте с (икс строк на высоту строки да икс минус один межстрочников на интерльньяж)? Иначе всё применение ограничивается однокеглевым текстом (если дизайнер это понимает).
Меня интересует такая деталь — будет ли соблюдаться горизонтальный ритм в колонках, основанный на опорной сетке, в случае внедрения в поток элементов, не совпадающих по высоте с (икс строк на высоту строки да икс минус один межстрочников на интерльньяж)? Иначе всё применение ограничивается однокеглевым текстом (если дизайнер это понимает).
+1
НЛО прилетело и опубликовало эту надпись здесь
именно об автоматике и речь
0
Да, кстати, интересный вопрос. Мне кажется автоматическая поддержка такого ритма — это как минимум странно, и будет больше мешать, чем помогать. Но если у всех внедренных элементов высота будет кратна высоте строки+интерлиньяж, то проблема решиться сама собой, разве нет?
0
В программах вёрстки это выглядит так — задаём опорную сетку, указывая точку отсчёта и интервал между линиями на основании интерлиньяжа основного текста, далее выбираем абзацы, привязанные к сетке, свободные элементы полировочно подсдвигаем.
0
+2
И опять же… на некоторых мониторах уже есть выше 2.5 тыс пикселей разрешение… И, честно говоря, мне смешно смотреть как хваленная «резинка» растягивается на весь экран… Не за горами 3000 пикселей и выше… и что тогда делать? Мое лично предпочтение — фиксат до 1000 пикселов по ширине, остальное — нафиг…
PS: И опять же это я говорю о применении к стандартным сайтам (компаний там и т.д.), ибо всегда найдется задача для которой и 100500 пикселей будет мало… вот для них и придуман горизонтальный троллинг )
PS: И опять же это я говорю о применении к стандартным сайтам (компаний там и т.д.), ибо всегда найдется задача для которой и 100500 пикселей будет мало… вот для них и придуман горизонтальный троллинг )
0
НЛО прилетело и опубликовало эту надпись здесь
Я не сильно посвященный в данном вопросе, и мой взгляд вообще никак нельзя сравнивать с дизайнерским, а может то, что я предполагаю уже используется… Так что сугубо imho.
Но приведу пример, как я вижу использование размеров таких мониторов
Нормальный монитор
Широкоформатный монитор
Но приведу пример, как я вижу использование размеров таких мониторов
Нормальный монитор
Широкоформатный монитор
0
Простите, но то что я вижу это полный п#%&&ц. Разорвана страница и не дай бог человек с хай-резом уменьшит размер экрана.
-1
Да, я осознал всю глупость своей затеи
0
Для меня лично большое разрешение экрана, это просто как возможность разместить в однйо плоскости 3-4 приложения… т.е. к примеру при разработке вебсайта на мониторе 27" 2560x1440px открыты: браузер на пикселей 800-850 (понимаю часто бывает горизонтальный скроллинг, но мне же для личного тестирования) + VLC плейер в небольшом экране (где-то 450х300) с любимым сериалом каким-то или фильмом который я уже пересматриваю в сотый раз (ну не прет меня музыку слушать, хоть застрелите, мне надо чтобы зрение на что-то отвлекалось и разгружался мозк) + Eclipse на всем остальном экране… Eclipse переключается с фотожопом (для дорисовки, докраски, color picking'a), а VLC подменяется при необходимости textmate…
Но это для программиста, а для обычного пользователя:
Браузер на 1280 пксл + почтовый клиент + сиськи в VLC плеере + пасьянс… И все это без отрыва от Word'a… Т.е. большой экран позволяет работать с большим удобством одновременно с разными программами, а не издеваться над веб-дизайнерами и заставлять их придумывать а как разместить базу данных из 10 полей на экране в 3000px и с ужасом смотреть в будущее…
Но это для программиста, а для обычного пользователя:
Браузер на 1280 пксл + почтовый клиент + сиськи в VLC плеере + пасьянс… И все это без отрыва от Word'a… Т.е. большой экран позволяет работать с большим удобством одновременно с разными программами, а не издеваться над веб-дизайнерами и заставлять их придумывать а как разместить базу данных из 10 полей на экране в 3000px и с ужасом смотреть в будущее…
+1
НЛО прилетело и опубликовало эту надпись здесь
конечно не будет. пользователь двигаясь сверху вниз будет скакать между колонками, а дочитав каждый абстракт подниматься глазами/скроллингом к его началу и искать начало ближайшего непрочитанного. тому кто собирается прочитать все вы создаёте дополнительные раздражающие неудобства. а тому кто собирается выхватить только часть — ничем не помогли.
0
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
точно также он будет действовать и в случае ленты с той лишь разницей, что ему не придется каждый раз искать что он ещё не окинул взглядом, отсекая то, что уже окинул.
0
НЛО прилетело и опубликовало эту надпись здесь
а в исследовании якоба сказано, что будет :-Р
0
не соглашусь… Вот возьмем примеру хабр… есть до утра людей которые читают «простыню» комментариев… я не буду предполагать даже как бы это выглядело в колонках… Главное — это контент…
0
НЛО прилетело и опубликовало эту надпись здесь
Нарисовал иллюстрацию к вашему спору, пример где многоколоночность может пригодится хотя бы как инструмент. Вот такая брошюра/схема/книга, скролл мыши допустим прикручен к навигации — следующая/предыдущая страница:
Но, если высота многоколоночного текста превышает высоту экрана и нужно скролить вверх-вниз, то это конечно ужас.
Но, если высота многоколоночного текста превышает высоту экрана и нужно скролить вверх-вниз, то это конечно ужас.
+1
Ну вот почему меня харит сейчас в ответ на этот комментарий нарисовать extension для firefox и crome который бы преобразовывал любой текст на странице исключительно в Comic Sans Serif… :)
+1
Точно, я совсем забыл про них, спасибо. Я их встречал давно уже, но они так и остались у меня периферии сознания. Кстати, я про них периодически вспоминаю, начинаю искать, не нахожу и снова успешно забываю )
0
Это уже почти таблицы :)
0
Спасибо большое!
Только такие статьи лучше не в выходные, а в будни с утра постить, чтобы не прошли незамеченными, а то утонут в массе других обзоров.
Только такие статьи лучше не в выходные, а в будни с утра постить, чтобы не прошли незамеченными, а то утонут в массе других обзоров.
+2
чувак респект, как я долго искал подобное. спасибо
+1
Конечно же можно комбинировать column-width и column-height:
.column
{
-webkit-column-count:2;
-moz-column-count:2;
-webkit-column-width:15em;
-moz-column-count:15em; => -moz-column-width:15em;
}
Опечатка?
.column
{
-webkit-column-count:2;
-moz-column-count:2;
-webkit-column-width:15em;
-moz-column-count:15em; => -moz-column-width:15em;
}
Опечатка?
+1
Ох как этого не хватало.
0
А вы мне замечательную мысль подали, спасибо. Уже с неделю думаю.
0
у них есть хоть один полезный юзкейс?
-1
НЛО прилетело и опубликовало эту надпись здесь
мне бы на прошлой работе для одного сайта колонки пригодились… ну да и прошлой она (работа) стала в том числе из-за того, что пригодились бы.
0
а по подробней?
0
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
// я видел слово «если», но замечу:
«деградация в одну колонку» очень плохо звучит для картинок без align'а с шириной, подогнанной под ширину колонки в пикселях (а среди контентных картинок таких очень много)
«деградация в одну колонку» очень плохо звучит для картинок без align'а с шириной, подогнанной под ширину колонки в пикселях (а среди контентных картинок таких очень много)
0
НЛО прилетело и опубликовало эту надпись здесь
я про column-count без ширины. а если и с шириной, то уж очень мало кому захочется видеть в фф+вебкитах нормальную страницу, а в остальных полоску с жуткой высотой. но технически согласен — можно и ширину тоже задать.
0
угу недавно игрался с колонками, нормальная поддержка только у chrome пока, хотя вещь реально полезная. Очень странно, что другие броузеро разработчики забивают на эту полезную спецификацию.
0
«состоящие из 8 до 12 слов. „
либо “длиной от 8 до 12 слов», да хоть «состоящие из слов в количестве от 8 до 12 штук», но уж никак не «из 8 до 12».
Sincerely yours, Grammar Nazi.
либо “длиной от 8 до 12 слов», да хоть «состоящие из слов в количестве от 8 до 12 штук», но уж никак не «из 8 до 12».
Sincerely yours, Grammar Nazi.
+1
Про мульти-колонки: крутая штука с т.з. основного своего механизма по перераспределению текста, но газетный или книжный текст отличается от веб-страниц гораздо сильнее, чем это кажется.
И всё же никто не отменяет случаев, когда мульти-колонки действительно нужны: имитация газеты (электронная версия какой-нибудь Times) или книги (веб-приложение для чтения книг, например). В общем, было бы чудесно иметь в арсенале такую чудесную, уникальную в своём роде, фичу.
Говорите, что это неюзабельно? Так и карандашом можно убить, при желании. Это же не повод запрещать карандаши.
И всё же никто не отменяет случаев, когда мульти-колонки действительно нужны: имитация газеты (электронная версия какой-нибудь Times) или книги (веб-приложение для чтения книг, например). В общем, было бы чудесно иметь в арсенале такую чудесную, уникальную в своём роде, фичу.
Говорите, что это неюзабельно? Так и карандашом можно убить, при желании. Это же не повод запрещать карандаши.
+5
+3
Ещё лучше.
0
Ужас. При каждом ресайзе окна перебрасывает на первую страницу.
+1
шутейный ужас. Ресайзы редки, они меняют размер экрана и, как следствие, компоновку и количество страниц. Хотя это не оправдание — надо исправлять.
Большей проблемой (непреодолимой) является невозможность в некоторых браузерах отображать большие тексты. Приходится бить на куски до 100 кБ текста в каждом.
Большей проблемой (непреодолимой) является невозможность в некоторых браузерах отображать большие тексты. Приходится бить на куски до 100 кБ текста в каждом.
+1
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Вёрстка колонками средствами CSS3