How to become an author
Search
Write a publication
Pull to refresh

Comments 115

Вот самым востребованным в css3 было бы свойство display: column. Прсто и без вопросов Если несколько блоков с display: column встречаются внутри одного блока — выстраивать их столбиками одной высоты с возможностью добавлять маргины, паддинги, и бордеры. Столько бы проблем сразу решило.
Total votes 9: ↑9 and ↓0+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>
Total votes 6: ↑4 and ↓2+2
Да знаю я, как это делается. Кучу способов знаю. Только, например, ваш способ не даст колонки одинаковой высоты. А чтобы сделать колонки именно одинаковой высоты — нужно что-то посложнее inline-block. Кстати,
.column { display: inline-block; *display: inline; zoom: 1; width: 33%;} — вот теперь везде будет работать, ага.
Total votes 7: ↑6 and ↓1+5
У пэрента не забудьте сделать вертикал-алигн.
Total votes 4: ↑4 and ↓0+4
не на много сложнее ;) + margin-bottom: -32767px; padding-bottom: 32767px; background:#eee;
Total votes 1: ↑1 and ↓0+1
Я бы поставил просто 30000px, чтобы не нарваться на 215 болезненно.
Total votes 4: ↑2 and ↓20
Так можно бэкграунд забабахать. А нижний бордер? Я повторюсь, но я все эти методы знаю.

Кстати, раз уж все пытаются подсказать мне — самый лучший способ делать колонки — 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;
}

Не могу свой универсальный экспрешн найти, где-то был.

И всё, любые колоки одинаковой высоты и ни единого лишнего блока.
This comment wasn’t rated yet0
UFO just landed and posted this here
Это не у меня надо спрашивать а у vorbiz :)
Я отвечал на вопрос vorbiz'а, как сделать 3 дива (оказывается он знает лучше меня) ;-)

Про выравнивание колонок по высоте я способов не знаю — не вижу альтернативы CSS3, о которой говорилось в статье.

Тип «display: column» — считаю бессмысленным
Total votes 3: ↑3 and ↓0+3
UFO just landed and posted this here
UFO just landed and posted this here
я знаю для чего он нужен. весь интерфейс мозиллы на нём построен. его достаточно для большинства нужд. а распредление контента на колонки не нужно. у вэба своя специфика — нет ограничения на вертикальный размер страницы, но на неё смотрят через маленькое окошко. при многоколоночной вёрстке, любой достаточно объёмный текст, не влезающий в это окошко, будет вызывать неиллюзорный баттхёрт. так что невозможность в угоду дизайнерским изыскам а-ля полиграфия сделать неэргономичный интерфейс — несомненный плюс.
Total votes 5: ↑1 and ↓4-3
Не надо говорите «гоп»… В 95 году «достаточно» было текста, и GIF-анимация была верхом веб-мультимедиа…
Total votes 2: ↑2 and ↓0+2
вот когда будет не достаточно — тогда и поговорим. хорошо?
Total votes 1: ↑0 and ↓1-1
UFO just landed and posted this here
давно недостаточно отсутствия флексбоксов, которые необходимы для адаптивной табличной вёрстки — то что сейчас приходится релизовывать на флоатах или инлайн-блоках.

перенос контента по нижней границе, а не по правой — нарушает естественный порядок его восприятия ( слева-направо, потом сверху-вниз )
This comment wasn’t rated yet0
Ниже уже отписали, но дополню: если не надо Вам, то не значит что не надо всем, Вы не один. ))
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
1. ложь, пиздёжь и провокация. годится только для маленьких текстов, заведомо влезающих в экран и то с оговорками.
2. и чо?

ни одного примера использования во благо я так и не увидел. всё какие-то демки для макбуков.
Total votes 4: ↑1 and ↓3-2
UFO just landed and posted this here
лентой. у людей линейное мышление, так что даже если ты разбросаешь по экрану облако абстрактов, им придётся мысленно выстраивать их в одну последовательность, либо хаотично выцепить взглядом из это кучи несколько и забить на остальные, что ничем не лучше, чем если бы просто вначале ленты были выведены несколько случайных.
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
тот кто составлял такое тз профнепригоден. и если раньше можно было аргументировать к технической сложности реализации, то теперь остаётся только к здравому смыслу, который, как видно, у некоторых отсутствует.
Total votes 3: ↑0 and ↓3-3
UFO just landed and posted this here
как дизайнер ты тоже профнепригоден.
Total votes 5: ↑0 and ↓5-5
UFO just landed and posted this here
Профнепригоден тот, кто личный кабинет интернета Билайна делал.
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
если пользователь не прокручивает, значит информация его не очень интересует. значит в вываленной вами горе новостей слишком малый процент интересных. и именно эту проблему надо решать, а не как упихнуть на экран ещё больше всё также не интересной ему информации.

в пустоте нет ничего плохого. интерфейс должен быть простым и понятным. перегруженных интерфейсов пользователи пугаются. хаотичное расположение информации их также отпугивает.
Total votes 3: ↑2 and ↓1+1
UFO just landed and posted this here
у кого-то явные проблемы с чтением =_=" повторяю: ПОЛЬЗОВАТЕЛЬ НЕ БУДЕТ ДОЛГО ЛИСТАТЬ ЛЕНТУ, ДОЛГО ВЫИСКИВАТЬ В ГОРЕ МУСОРА ИЛИ ДЕЛАТЬ ЧТО УГОДНО ЕЩЁ ДОЛГО, НЕ ПОЛУЧАЯ ПОЛОЖИТЕЛЬНОГО ФИДБЕКА В ВИДЕ ИНТЕРЕСУЮЩЕЙ ЕГО ИНФОРМАЦИИ.

ты бы ещё в гугл послал. что я должен найти на сайте с вырвиглазными цветами?

ты действительно думаешь, что хаотичные скачки между колонками более комфортны, чем ритмичные в рамках одной? ты действительно веришь, что чем больше на него вывалишь информации, тем с большей он ознакомится?

неперегруженному интерфейсу колонки не нужны.

не может быть уродливым то, чего нет. наличие какой-то возможности вовсе не означает, что ею надо пренепременно воспользоваться. на рабочем столе у тебя всё свободное место завалено или ты всё-таки стараешься убирать не нужные постоянно вещи в ящики?
Total votes 4: ↑0 and ↓4-4
UFO just landed and posted this here
я знаю чей. по ссылке нет сравнения длинных и толстых страниц. могу поспорить, если в топе будет не 6 диванов, а 26, то внимательно будут рассмотрены не более 10. очень показательно, что на самолёт так и не посмотрели, хотя он находится и в топе страницы. впрочем, я не вчитывался.

да. колонки приводят к уплотнению информации и к её хаотичному расположению.

тэг blink — это ведь тоже всего-лишь инструмент, который надо использовать с умом и бла-бла-бла, только вот если бы его не было, то его бы никто и не хотел использовать. но его сделати и каждому второму дизигнеру пренепременно потребовалось заюзать его для привлечения внимания.

тем не менее на нём полно уродливого пустого места! :-о

да выбирай любого %-) поспорим втроём.
This comment wasn’t rated yet0
Иногда такие дискуссии радуют меня, как верстальщика полиграфии, тем, что полиграфия статична, а при смене контента надо полностью переразвёрстывать.
Меня интересует такая деталь — будет ли соблюдаться горизонтальный ритм в колонках, основанный на опорной сетке, в случае внедрения в поток элементов, не совпадающих по высоте с (икс строк на высоту строки да икс минус один межстрочников на интерльньяж)? Иначе всё применение ограничивается однокеглевым текстом (если дизайнер это понимает).
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
именно об автоматике и речь
This comment wasn’t rated yet0
Да, кстати, интересный вопрос. Мне кажется автоматическая поддержка такого ритма — это как минимум странно, и будет больше мешать, чем помогать. Но если у всех внедренных элементов высота будет кратна высоте строки+интерлиньяж, то проблема решиться сама собой, разве нет?
This comment wasn’t rated yet0
В программах вёрстки это выглядит так — задаём опорную сетку, указывая точку отсчёта и интервал между линиями на основании интерлиньяжа основного текста, далее выбираем абзацы, привязанные к сетке, свободные элементы полировочно подсдвигаем.
This comment wasn’t rated yet0
Я пораскинул мозгами: может явное задание line-height с наследованием этого атрибута всеми встроенными в колоночный блок элементами создаст опорную сетку?
This comment wasn’t rated yet0
И опять же… на некоторых мониторах уже есть выше 2.5 тыс пикселей разрешение… И, честно говоря, мне смешно смотреть как хваленная «резинка» растягивается на весь экран… Не за горами 3000 пикселей и выше… и что тогда делать? Мое лично предпочтение — фиксат до 1000 пикселов по ширине, остальное — нафиг…

PS: И опять же это я говорю о применении к стандартным сайтам (компаний там и т.д.), ибо всегда найдется задача для которой и 100500 пикселей будет мало… вот для них и придуман горизонтальный троллинг )
This comment wasn’t rated yet0
UFO just landed and posted this here
мультиколонки хорошо, а вот если бы закрыли подразделение IE жить стало бы значительно легче… и как по мне еще и Оперу тоже, но это моя личная непрязнь к ней… )
Total votes 1: ↑1 and ↓0+1
Я не сильно посвященный в данном вопросе, и мой взгляд вообще никак нельзя сравнивать с дизайнерским, а может то, что я предполагаю уже используется… Так что сугубо imho.
Но приведу пример, как я вижу использование размеров таких мониторов
Нормальный монитор
Широкоформатный монитор
This comment wasn’t rated yet0
Простите, но то что я вижу это полный п#%&&ц. Разорвана страница и не дай бог человек с хай-резом уменьшит размер экрана.
Total votes 1: ↑0 and ↓1-1
Да, я осознал всю глупость своей затеи
This comment wasn’t rated yet0
Для меня лично большое разрешение экрана, это просто как возможность разместить в однйо плоскости 3-4 приложения… т.е. к примеру при разработке вебсайта на мониторе 27" 2560x1440px открыты: браузер на пикселей 800-850 (понимаю часто бывает горизонтальный скроллинг, но мне же для личного тестирования) + VLC плейер в небольшом экране (где-то 450х300) с любимым сериалом каким-то или фильмом который я уже пересматриваю в сотый раз (ну не прет меня музыку слушать, хоть застрелите, мне надо чтобы зрение на что-то отвлекалось и разгружался мозк) + Eclipse на всем остальном экране… Eclipse переключается с фотожопом (для дорисовки, докраски, color picking'a), а VLC подменяется при необходимости textmate…

Но это для программиста, а для обычного пользователя:
Браузер на 1280 пксл + почтовый клиент + сиськи в VLC плеере + пасьянс… И все это без отрыва от Word'a… Т.е. большой экран позволяет работать с большим удобством одновременно с разными программами, а не издеваться над веб-дизайнерами и заставлять их придумывать а как разместить базу данных из 10 полей на экране в 3000px и с ужасом смотреть в будущее…
Total votes 1: ↑1 and ↓0+1
Согласен, почти также организую пространство на 1920, а вот на буковских 1280 активно использую рабочие столы
This comment wasn’t rated yet0
Если не совсем ясно выразился — рабочие столы Gnome
This comment wasn’t rated yet0
Привет им передавайте от Mac OS X Spaces… )
This comment wasn’t rated yet0
UFO just landed and posted this here
конечно не будет. пользователь двигаясь сверху вниз будет скакать между колонками, а дочитав каждый абстракт подниматься глазами/скроллингом к его началу и искать начало ближайшего непрочитанного. тому кто собирается прочитать все вы создаёте дополнительные раздражающие неудобства. а тому кто собирается выхватить только часть — ничем не помогли.
This comment wasn’t rated yet0
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
точно также он будет действовать и в случае ленты с той лишь разницей, что ему не придется каждый раз искать что он ещё не окинул взглядом, отсекая то, что уже окинул.
This comment wasn’t rated yet0
UFO just landed and posted this here
а в исследовании якоба сказано, что будет :-Р
This comment wasn’t rated yet0
не соглашусь… Вот возьмем примеру хабр… есть до утра людей которые читают «простыню» комментариев… я не буду предполагать даже как бы это выглядело в колонках… Главное — это контент…
This comment wasn’t rated yet0
кстати, наличие пейджера сильно раздражает %-) особенно когда переходишь на следующую страницу и получаешь половину только что прочитанных топиков…
This comment wasn’t rated yet0
UFO just landed and posted this here
Нарисовал иллюстрацию к вашему спору, пример где многоколоночность может пригодится хотя бы как инструмент. Вот такая брошюра/схема/книга, скролл мыши допустим прикручен к навигации — следующая/предыдущая страница:



Но, если высота многоколоночного текста превышает высоту экрана и нужно скролить вверх-вниз, то это конечно ужас.
Total votes 1: ↑1 and ↓0+1
вертикальная лента удобнее. её также можно скроллить постранично, а можно и любыми другими способами
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
Ну вот почему меня харит сейчас в ответ на этот комментарий нарисовать extension для firefox и crome который бы преобразовывал любой текст на странице исключительно в Comic Sans Serif… :)
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
Если пользоваться здравым смыслом то можно чекнуться… Именно когда не здравый, ну или не совсем здравый смысл, в голову приходят совершенно здравые идеи… парадокс… )
This comment wasn’t rated yet0
UFO just landed and posted this here
Начнешь реализовывать здравые мысли → сойдешь с ума…
This comment wasn’t rated yet0
Точно, я совсем забыл про них, спасибо. Я их встречал давно уже, но они так и остались у меня периферии сознания. Кстати, я про них периодически вспоминаю, начинаю искать, не нахожу и снова успешно забываю )
This comment wasn’t rated yet0
Это уже почти таблицы :)
This comment wasn’t rated yet0
Спасибо большое!
Только такие статьи лучше не в выходные, а в будни с утра постить, чтобы не прошли незамеченными, а то утонут в массе других обзоров.
Total votes 2: ↑2 and ↓0+2
статьи надо постить по мере изготовления :)
если, конечно не планируешь какую-то связанную акцию
Total votes 3: ↑3 and ↓0+3
чувак респект, как я долго искал подобное. спасибо
Total votes 3: ↑2 and ↓1+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;
}

Опечатка?
Total votes 1: ↑1 and ↓0+1
А вы мне замечательную мысль подали, спасибо. Уже с неделю думаю.
This comment wasn’t rated yet0
у них есть хоть один полезный юзкейс?
Total votes 1: ↑0 and ↓1-1
UFO just landed and posted this here
вертикальная полоса прокрутки — это фича?
This comment wasn’t rated yet0
UFO just landed and posted this here
UFO just landed and posted this here
вбей в свой пример эту статью и поймёшь
This comment wasn’t rated yet0
UFO just landed and posted this here
UFO just landed and posted this here
мне бы на прошлой работе для одного сайта колонки пригодились… ну да и прошлой она (работа) стала в том числе из-за того, что пригодились бы.
This comment wasn’t rated yet0
да дизы нарисовали контент в две колонки с пейджингом, чтоб красивше было. после аргумента «газету видел? вот должно быть как в газете» я от неожиданности временно лишился дара речи :) я тогда был помесью контертера с верстаком, так что смог оценить задумку, благо проект не только мной делался.
This comment wasn’t rated yet0
UFO just landed and posted this here
UFO just landed and posted this here
// я видел слово «если», но замечу:
«деградация в одну колонку» очень плохо звучит для картинок без align'а с шириной, подогнанной под ширину колонки в пикселях (а среди контентных картинок таких очень много)
This comment wasn’t rated yet0
UFO just landed and posted this here
я про column-count без ширины. а если и с шириной, то уж очень мало кому захочется видеть в фф+вебкитах нормальную страницу, а в остальных полоску с жуткой высотой. но технически согласен — можно и ширину тоже задать.
This comment wasn’t rated yet0
UFO just landed and posted this here
max-width может где-нибудь выше стоять. и вместо блока с тремя колонками 1400*400, получим блок 1400*1200, состоящий из 400px колонки и 800px пустоты — не айс.
This comment wasn’t rated yet0
UFO just landed and posted this here
угу недавно игрался с колонками, нормальная поддержка только у chrome пока, хотя вещь реально полезная. Очень странно, что другие броузеро разработчики забивают на эту полезную спецификацию.
This comment wasn’t rated yet0
а chrome — это разве не webkit?
академический вопрос, мож я чего не понимаю
This comment wasn’t rated yet0
UFO just landed and posted this here
UFO just landed and posted this here
«состоящие из 8 до 12 слов. „
либо “длиной от 8 до 12 слов», да хоть «состоящие из слов в количестве от 8 до 12 штук», но уж никак не «из 8 до 12».
Sincerely yours, Grammar Nazi.
Total votes 1: ↑1 and ↓0+1
Про мульти-колонки: крутая штука с т.з. основного своего механизма по перераспределению текста, но газетный или книжный текст отличается от веб-страниц гораздо сильнее, чем это кажется.

И всё же никто не отменяет случаев, когда мульти-колонки действительно нужны: имитация газеты (электронная версия какой-нибудь Times) или книги (веб-приложение для чтения книг, например). В общем, было бы чудесно иметь в арсенале такую чудесную, уникальную в своём роде, фичу.

Говорите, что это неюзабельно? Так и карандашом можно убить, при желании. Это же не повод запрещать карандаши.
Total votes 5: ↑5 and ↓0+5
Ужас. При каждом ресайзе окна перебрасывает на первую страницу.
Total votes 1: ↑1 and ↓0+1
шутейный ужас. Ресайзы редки, они меняют размер экрана и, как следствие, компоновку и количество страниц. Хотя это не оправдание — надо исправлять.

Большей проблемой (непреодолимой) является невозможность в некоторых браузерах отображать большие тексты. Приходится бить на куски до 100 кБ текста в каждом.
Total votes 1: ↑1 and ↓0+1
Исторический офтоп: в древних Netscape'ах (версий 3-4.х) поддерживался тэг multicol, который служил для того же самого, к сожалению тогдашние ИЕ этот тэг не поддерживали.
Total votes 4: ↑4 and ↓0+4
Sign up to leave a comment.

Articles

Show the best of all time

Your account

Sections

Information

Services

Support
© 2006–2024, Habr