Pull to refresh

Comments 46

даже не верится, что все так просто. наболевшая проблема.
добавил в закладки, теперь будут всегда использовать.

только одно не понял: зачем в примере margin-left: -1px у helper?
Ой, это глюк, сейчас уберу
Это не глюк. Понятно, что вы тут пытались исправить: перенос div.helper на новую строку в случае длинного содержимого в контейнере child.
Решается проблема просто:
Текст, который заключён во внутренний блок.


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

<div class="parent">
     <div class="child" style="width: 100%; margin-left: -10px;">
         <div style="margin-left: 10px;">Текст, который заключён во внутренний блок. </div>
     </div>
     <div class="helper"></div>
 </div>
UFO landed and left these words here
Извините, а когда высота парента не указана, данная проблема вообще стоит? ;)
UFO landed and left these words here
Бывают случаи, когда самое время воспользоваться таблицами. Мне кажется, это один из них.
UFO landed and left these words here
Тогда уж display: table, так как таблицы 1) принуждают к определенному порядку данных в исходнике 2) нельзя сделать версию для печати/КПК 3) уродливы и устарели 4) несемантичны 5) непонятно, как разделить в css презентационные таблицы и используемые для верстки, т.е. задаешь например border и padding — и он применяется ко всем таблицам сразу :((

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

p.s Простой пример: у страницы есть шапка (допустим, фиксированный размер в em), а в нижней, пустой части страницы ровно посередине пустого пространства надо разместить блок (пусть даже фиксированной высоты для простоты). И как это сделаешь? Да никак, без извратов типа яваскрипта (таблицы не годятся, так как шапка должна в коде идти после контента). Ах да. когда используешь яваскрпт — должен ставить обработчик onresize, так как в процессе отображения страницы может измениться размер шрифта или ширина окна :((
UFO landed and left these words here
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 здорово обламывает.
UFO landed and left these words here
В основном флоатами, есть разные техники, напрример через padding-bottom: 32000px/margin-bottom; -32000, faux columns (не пользовался), и ниже в комментах ссылка на хороший способ: chikuyonok.ru/2009/06/float-columns/
А что мешает использовать абсолютное позиционирование в примере с шапкой?
UFO landed and left these words here
Вот, здравое решение, это правда старая задача (решал вроде яваскриптом :) ), но все же.
Тот факт, что центрированный таким способом контент выпадает из потока, и не расталкивает страницу (и футер, который я не упомянул, но который там очевидно есть, кстати прибитый к низу :) ) вниз, если он большой по высоте.
UFO landed and left these words here
> 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

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

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

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

Без #p3 — текст виден целиком.
UFO landed and left these words here
> Насчёт вашего примера: вы слышали про схлопывание отступов?

Да конечно, слышал, я обычно ставлю 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%.
UFO landed and left these words here
UFO landed and left these words here
Гм, inline-block не рассматривал, подумаю, хотя конечно извратище то еще :)

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

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

В любом случае, спасибо, теперь у меня намного больший выбор всяких вариантов :)
UFO landed and left these words here
Ну да, вообще это вариант, хотя конечно как-то странно стаивть паддинг, чтобы потом у детей его отменять назад. Надо будет подумать :)

И все это, лишь бы избежать необходимость делать вложенный див! Вот уж язык, изврат на изврате.
UFO landed and left these words here
UFO landed and left these words here
UFO landed and left these words here
Да, ваш пример имеет место. Но, имхо, он не совсем типичен и для него можно найти свой способ выровнять по вертикали.
Поздравляю. Даже не знаю, нужно ли что-то добавлять. Хотя добавлю, что во втором фф и в ие6 достигнутый вами результат не работает при переносе строк.
Да) Способы очень похожи, но всё-таки не совсем идеинтичны. Так что :-)
Ну да, не идентичны, там стили в другом порядке, здесь другой способ придания inline-block эксплореру. Совсем разные.
Вы бы ещё про расово верный векторный фидонет написали :)
Подскажите, как можно выровнять div по центру страницы вертикально и горизонтально?
Пока решил эту проблему с указанием отрицательных отступов в половину длины и высоты в пикселях, но хочу найти универсальное решение.
а чем предложенный вариант не подходит? ;)
Как задать высоту и длину резиновой странице?
Не помогает, думаете я не пробовал?)
Вобщем, надо смотреть макет и по ситуации верстать. Так универсально не скажешь
Сегодня попробовал (встала такая же задача) — всё ок!
Лучше поздно, чем никогда! :)
Данный способ показался оптимальным, однако столкнулся с проблемой при размещении блока яндекс директа. Проблема в google chrome

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

Понимаю, что связано скорее всего с мусором, который передаёт сам яндекс для своего блока, но поскольку от мусора избавиться нельзя (или можно?), хотелось бы найти решение
Only those users with full accounts are able to leave comments. Log in, please.