Хабрахабр / Комментарии к посту «1001-ый способ вертикального выравнивания» в блоге «Каскадные Таблицы Стилей»

06.05.2011 08:01:01 scroll

scroll — Fri, 06 May 2011 08:01:01 GMT

извиняюсь, вот код:



     
         Текст, который заключён во внутренний блок.

06.05.2011 07:58:37 scroll

scroll — Fri, 06 May 2011 07:58:37 GMT

Это не глюк. Понятно, что вы тут пытались исправить: перенос div.helper на новую строку в случае длинного содержимого в контейнере child.
Решается проблема просто:

Текст, который заключён во внутренний блок.

28.10.2010 14:33:27 dobriykot

dobriykot — Thu, 28 Oct 2010 14:33:27 GMT

Лучше поздно, чем никогда! :)

28.10.2010 14:22:30 piumosso

piumosso — Thu, 28 Oct 2010 14:22:30 GMT

Сегодня попробовал (встала такая же задача) — всё ок!

18.03.2010 23:57:23 JustLike

JustLike — Thu, 18 Mar 2010 23:57:23 GMT

Данный способ показался оптимальным, однако столкнулся с проблемой при размещении блока яндекс директа. Проблема в google chrome

Посмотреть живьём можно тут: bruneta.ru (на шапке справа)

Понимаю, что связано скорее всего с мусором, который передаёт сам яндекс для своего блока, но поскольку от мусора избавиться нельзя (или можно?), хотелось бы найти решение

24.10.2009 17:15:43 egorinsk

egorinsk — Sat, 24 Oct 2009 17:15:43 GMT

В основном флоатами, есть разные техники, напрример через padding-bottom: 32000px/margin-bottom; -32000, faux columns (не пользовался), и ниже в комментах ссылка на хороший способ: chikuyonok.ru/2009/06/float-columns/

24.10.2009 09:17:32 moroz1999

moroz1999 — Sat, 24 Oct 2009 09:17:32 GMT

По четвертому пункту вопрос: как именно вы с помощью div делаете колонки? Позиционированием, через JS или float?

23.10.2009 18:36:28 egorinsk

egorinsk — Fri, 23 Oct 2009 18:36:28 GMT

Ну да, вообще это вариант, хотя конечно как-то странно стаивть паддинг, чтобы потом у детей его отменять назад. Надо будет подумать :)

И все это, лишь бы избежать необходимость делать вложенный див! Вот уж язык, изврат на изврате.

23.10.2009 17:37:23 GreLI

GreLI — Fri, 23 Oct 2009 17:37:23 GMT

«Контент —ограничен по ширине, а вот например футер или шапка (котрых в примере нет) наследуют 100% ширины body»
Про это и спрашивал. Но нельзя разве поставить падинг слева и справа у body, а у шапки с футером отрицательный маржин на тот же размер? А на outer тогда вешается и максимальная ширина и оформление.

23.10.2009 16:13:51 egorinsk

egorinsk — Fri, 23 Oct 2009 16:13:51 GMT

Гм, inline-block не рассматривал, подумаю, хотя конечно извратище то еще :)

>> Ставить паддинги/маргины на body/html нельзя, т к в исходной верстке (пример упрощен) есть элементы с шириной 100%.
> Не понял. На 100% body? А как же тогда футер прибивается? Если нет, то что мешает? Доктайп стоит.

Гм, я про ширину а не высоту. Контент —ограничен по ширине, а вот например футер или шапка (котрых в примере нет) наследуют 100% ширины body, я про это. Футер прибивается установкой отрицательной margin-top, он идет после #outer (у которого 100% min-height).

В любом случае, спасибо, теперь у меня намного больший выбор всяких вариантов :)

23.10.2009 15:45:37 GreLI

GreLI — Fri, 23 Oct 2009 15:45:37 GMT

Более того, кажется вы забыли что мы обсуждаем: можно сделать
body { text-align: center }
#outer {
display: inline-block;
height:100%;
max-width: 800px;
всякое оформление с краями, границами и отступами
text-align:left;
}
На Firefox 2 тоже в принципе можно уже забить developer.yahoo.com/yui/articles/gbs/

23.10.2009 15:31:34 GreLI

GreLI — Fri, 23 Oct 2009 15:31:34 GMT

> Ставить паддинги/маргины на body/html нельзя, т к в исходной верстке (пример упрощен) есть элементы с шириной 100%.
Не понял. На 100% body? А как же тогда футер прибивается? Если нет, то что мешает? Доктайп стоит.

23.10.2009 15:28:24 egorinsk

egorinsk — Fri, 23 Oct 2009 15:28:24 GMT

> Насчёт вашего примера: вы слышали про схлопывание отступов?

Да конечно, слышал, я обычно ставлю padding-top: 1px/margin-top: -1px или что-нибудь вроде этого, в примере для упрощения решил забить на это.

> По поводу 100% высоты, почему не повесить оформление на #outer со min-height:100% или вообще даже на body?

Есть ограничение на max-width для контента, но кроме того, должен быть маргин минимум 57px, border, серый фон и padding 57px — вот для того тут и 2 дива, одним не обойтись. Соотвественно, внешний див (outer) нужен для ограничения ширины, задания минимальной высоты и прибитого футера (в примере нет для простоты), а внутренний — задает отступы и фон с бордером.

Без внутреннего дива, если ширина экрана < 800px, справа и слева от внешнего дива нет маргинов (т к там margin: 0 auto). Ставить паддинги/маргины на body/html нельзя, т к в исходной верстке (пример упрощен) есть элементы с шириной 100%.

Делать фон картинкой на #outer — не очень хочется имитировать border лишней картинкой, их и так в оригинальной верстке уже штук 10, даже с учетом спрайтов :((

Пока решение — тупо яваскриптом ставить на #outer scrollTop = 0 :(( Или же добавлять еще пару дивов и display:table-cell/height: 100%.

23.10.2009 15:16:13 egorinsk

egorinsk — Fri, 23 Oct 2009 15:16:13 GMT

Вот, здравое решение, это правда старая задача (решал вроде яваскриптом :) ), но все же.

23.10.2009 15:11:30 GreLI

GreLI — Fri, 23 Oct 2009 15:11:30 GMT

По поводу 100% высоты, почему не повесить оформление на #outer со min-height:100% или вообще даже на body? (На неподдержку IE5 уже можно забить.)

23.10.2009 14:57:24 GreLI

GreLI — Fri, 23 Oct 2009 14:57:24 GMT

Вы внимательно читали? Там главная идея именно во вложенных элементах, а флоаты — объект применения.

Насчёт вашего примера: вы слышали про схлопывание отступов? www.w3.org/TR/CSS21/box.html#collapsing-margins
Подсказка: #inner{overflow:hidden}, ну и body{margin:0;padding:0} не помешает.

23.10.2009 14:48:21 egorinsk

egorinsk — Fri, 23 Oct 2009 14:48:21 GMT

Да в моем примере проще, там одна колонка, просто надо внутренний див растянуть на 100% высоты родительского (точнее, чтобы фон и border left/right внутреннего элемента тянулись на всю страницу по высоте), и тут городить схему с флоатами — имхо больше проблем несет, чем тупо добавить яваскрипт из 2 строчек (или вообще, плюнуть на все и нарисовать бордеры внутреннего элемента фоновой картинкой на внешнем элементе).

Ах да, display:table-cell не катит, т к не действуют маргины, а они там используются и на внешнем, и на внутреннем элементах (как и border, и паддинг), и паддингом не заменяются.

В общем, вот пример: egor.000space.com/hate-opera/test.html#p3

Без #p3 — текст виден целиком.

23.10.2009 14:36:38 egorinsk

egorinsk — Fri, 23 Oct 2009 14:36:38 GMT

Тот факт, что центрированный таким способом контент выпадает из потока, и не расталкивает страницу (и футер, который я не упомянул, но который там очевидно есть, кстати прибитый к низу :) ) вниз, если он большой по высоте.

23.10.2009 14:27:44 GreLI

GreLI — Fri, 23 Oct 2009 14:27:44 GMT

Ну так таблицы не всегда нужны ;-), обычно я без них делаю, но иногда с ними проще и естественней чем городить реальные извращения. А иногда это единственный выход.

Про прокручивание верю, наблюдал неоднократно, но зачем городить padding-bottom: 1000px/margin-bottom: -1000px? chikuyonok.ru/2009/06/float-columns/

В вашем случае всё типично: ругаете CSS, не умея пользоваться, то есть по сути на своё неумение. Научитесь мыслить конструктивно.

23.10.2009 14:22:00 egorinsk

egorinsk — Fri, 23 Oct 2009 14:22:00 GMT

> 2) Вообще-то можно (display:block, voila!), хотя без таблиц, конечно, удобней;

Вообще-то сложно, представьте, что у вас контент, а сбоку разные блоки. На печати или айфоне должен идти сначала контент, а под ним часть этих блоков (остальные скрыты). С таблицей — не сделаешь, с дивами — легко.

И вообще, я привык к схеме, когда в начале в коде идет контент, потом меню, потом всякая ерунда типа хедеров и футеров (как правило, просто несколько дивов). Когда страница без стилей выглядит вменяемо. Макет выглядит просто и логично. С таблицами такое невозможно.

Эх, еще бы поддержку :after и :before в ИЕ6/7 — так как из-за всеми любимого браузера постоянно приходится городить лишние элементы ((

> 3) Таблицы как были так и есть, без них таблицы толком не сверстаешь;

Я, что против табличных данных? Я против использования таблиц для layout :) Конечно, таблица выпадения осадков за месяц верстается через table :)

> «…таблицы не годятся, так как шапка должна в коде идти после контента» — почитали бы тот же хабр хотя бы: habrahabr.ru/blogs/css/67493/

О, вот это интересный пример, спасибо :)

p.s. А вот еще один пример дебильности современного css и поддержки в браузерах: представьте себе, что на странице есть див (min-height: 100%, overflow: hidden), в нем второй див с контентом и padding-bottom: 1000px/margin-bottom: -1000px (чтобы фон в этом диве тянулся до конца страницы). Представьте, что во втором диве в контенте есть анкор (элемент с определенным id). Что будет, если открыть страницу с ссылкой вида page#id?

Логичный ответ — страница (точнее, viewport) прокручивается до элемента id. А в реальности? Никогда не поверите. В Chrome и Firefox прокручивается первый (внешний) див с overflow:hidden, причем назад прокрутить его никак нельзя, и часть контента (над элементом id) становится невидима.

Победить средствами css —невозможно. Причина поведения — то ли подгон css 2.1 под поведение IE, то ли подгон браузеров под Acid 2, подробности тут: www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems#linking

Вот такие дела( Опять без яваскрипта не обойтись.

23.10.2009 14:02:40 egorinsk

egorinsk — Fri, 23 Oct 2009 14:02:40 GMT

3) Это еще какой аргумент. В шаблонах все эти table, tr, особенно, разнесенные по отдельным файлам, выглядят уродливо. Я не могу с таким кодом работать (( Я как-то столкнулся с шаблоном (Astra CMS, админка :) ), где было 4(!) вложенных таблицы для верстки. И да, кто-то убрал выравнивание в исходнике :) Представьте себе мое возмущение!

4) Нет, не семантичнее. table — это таблица в контенте, и никак иначе. Для layout я использую div.

5) Тем, что эти классы надо прописать руками у каждого (!) элемента table, tr, td, более того, у layout таблицы надо в css сбросить те стили (border, padding), что прописаны для обычных таблиц — это же вообще плохо.

> Кстати, насчет margin слышу впервые. Это действительно так? Это во всех браузерах? Что на этот счет говорят стандарты?

Что у ячеек, рядов, колонок и их групп (и соотв-но элементов с display:table*) нет margin (зато есть padding). В принципе это логично, нельзя выдрать куда-то ячейку из таблицы, но при попытке вставить в существующую верстку display:table здорово обламывает.

23.10.2009 12:27:19 piumosso

piumosso — Fri, 23 Oct 2009 12:27:19 GMT

Вобщем, надо смотреть макет и по ситуации верстать. Так универсально не скажешь

23.10.2009 12:24:01 dobriykot

dobriykot — Fri, 23 Oct 2009 12:24:01 GMT

Не помогает, думаете я не пробовал?)

23.10.2009 12:16:07 piumosso

piumosso — Fri, 23 Oct 2009 12:16:07 GMT

ну… 100%, например ;)

23.10.2009 11:59:46 dobriykot

dobriykot — Fri, 23 Oct 2009 11:59:46 GMT

Как задать высоту и длину резиновой странице?

23.10.2009 10:35:10 piumosso

piumosso — Fri, 23 Oct 2009 10:35:10 GMT

а чем предложенный вариант не подходит? ;)

23.10.2009 10:32:14 dobriykot

dobriykot — Fri, 23 Oct 2009 10:32:14 GMT

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

23.10.2009 10:08:21 GreLI

GreLI — Fri, 23 Oct 2009 10:08:21 GMT

«Правда, с display: table-cell тоже есть подвох: не работает свойство margin» — конечно не работает: у ячеек таблицы его просто не может быть. Если он «работает» где-то без флоата (у которого приоритет выше чем у любых display кроме none), то это баг.

23.10.2009 10:02:34 GreLI

GreLI — Fri, 23 Oct 2009 10:02:34 GMT

Сказали как отрезали!
1) display:table точно так же принуждает к определённому порядку как и таблицы;
2) Вообще-то можно (display:block, voila!), хотя без таблиц, конечно, удобней;
3) Таблицы как были так и есть, без них таблицы толком не сверстаешь;
4) Для таблиц семантичны. Дивы особой семантичностью тоже не страдают. Да и приведите пример, где это вам понадобилось.
5) Вы верстать умеете? Классы и id вас в помощь: www.w3.org/TR/CSS21/selector.html#class-html

А вот с display:table-cell есть подвох, что без display:table-row в файрфоксе всё поедет, что случается время от времени.

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

«…таблицы не годятся, так как шапка должна в коде идти после контента» — почитали бы тот же хабр хотя бы: habrahabr.ru/blogs/css/67493/

23.10.2009 07:56:40 moroz1999

moroz1999 — Fri, 23 Oct 2009 07:56:40 GMT

Вероятнее всего, проблема там именно в том, чтобы расположить по центру оставшегося пространства блок с контентом (даже фиксированной высоты). Потребуется какой-то контейнер, автоматом растягивающися от нижней границы шапки (фиксированной высоты) до нижней кромки экрана. Как вариант — позиционировать блок с контентом просто по центру экрана, а уже после этого сдвигать его содержимое вниз относительным позиционированием на величину равной высоте шапки, чтобы в результате блок отображался именно по центру оставшегося пространства.
В целом, я частично соглашусь с egorinsk — CSS нередко не в состоянии предложить простой и интуитивный способ решения некоторых естественных задач.

23.10.2009 07:05:02 piumosso

piumosso — Fri, 23 Oct 2009 07:05:02 GMT

А что мешает использовать абсолютное позиционирование в примере с шапкой?

23.10.2009 04:43:41 moroz1999

moroz1999 — Fri, 23 Oct 2009 04:43:41 GMT

Я бы поспорил с Вами насчет display: table.
1) Это — реальный минус таблиц. Порядок данных в исходнике действительно становится сложнее менять.
2) С этой частью не совсем соглашусь. Как минимум версию для печати можно сделать без особенных проблем. В самом худшем и редком случае часть данных придется дублировать.
3) Это не аргумент
4) Тэг, выделенный специально под табличные элементы на порядок семантичнее, чем слой с табличными CSS свойствами. Особенно не стоит забывать, что другого (предусмотренного стандартом!) способа сделать колонки равной высоты попросту нет.
5) Чем вас не устраивает разделение элементов классами? Пусть у layout-таблицы будет соответствующие классы на table и td элементах.

Кстати, насчет margin слышу впервые. Это действительно так? Это во всех браузерах? Что на этот счет говорят стандарты?

22.10.2009 23:59:05 egorinsk

egorinsk — Thu, 22 Oct 2009 23:59:05 GMT

Тогда уж display: table, так как таблицы 1) принуждают к определенному порядку данных в исходнике 2) нельзя сделать версию для печати/КПК 3) уродливы и устарели 4) несемантичны 5) непонятно, как разделить в css презентационные таблицы и используемые для верстки, т.е. задаешь например border и padding — и он применяется ко всем таблицам сразу :((

Правда, с display: table-cell тоже есть подвох: не работает свойтво margin. Я вообще не понимаю, как на сегодняшних убогих и плохо поддерживаемых стандартах типа css вообще можно что-то верстать, кроме простого текста из нескольких абзацев. HTML — по прежнему язык для верстки научных отчетов CERN, ничего не поделаешь ((

p.s Простой пример: у страницы есть шапка (допустим, фиксированный размер в em), а в нижней, пустой части страницы ровно посередине пустого пространства надо разместить блок (пусть даже фиксированной высоты для простоты). И как это сделаешь? Да никак, без извратов типа яваскрипта (таблицы не годятся, так как шапка должна в коде идти после контента). Ах да. когда используешь яваскрпт — должен ставить обработчик onresize, так как в процессе отображения страницы может измениться размер шрифта или ширина окна :((

22.10.2009 21:33:07 gvsmirnov

gvsmirnov — Thu, 22 Oct 2009 21:33:07 GMT

Вы бы ещё про расово верный векторный фидонет написали :)

22.10.2009 19:08:51 piumosso

piumosso — Thu, 22 Oct 2009 19:08:51 GMT

Да, ваш пример имеет место. Но, имхо, он не совсем типичен и для него можно найти свой способ выровнять по вертикали.

22.10.2009 19:01:48 moroz1999

moroz1999 — Thu, 22 Oct 2009 19:01:48 GMT

помимо уже приведенных примеров, у parent может быть position: absolute; top: 0; bottom: 0;

22.10.2009 15:36:51 GreLI

GreLI — Thu, 22 Oct 2009 15:36:51 GMT

А бывает, флоаты влияют на высоту. И таблица не удовлетворяет требованиям.

22.10.2009 14:53:23 homm

homm — Thu, 22 Oct 2009 14:53:23 GMT

Ну да, не идентичны, там стили в другом порядке, здесь другой способ придания inline-block эксплореру. Совсем разные.

22.10.2009 14:50:34 homm

homm — Thu, 22 Oct 2009 14:50:34 GMT

Бывают случаи, когда самое время воспользоваться таблицами. Мне кажется, это один из них.

22.10.2009 14:50:09 piumosso

piumosso — Thu, 22 Oct 2009 14:50:09 GMT

Да) Способы очень похожи, но всё-таки не совсем идеинтичны. Так что :-)