Comments 46
даже не верится, что все так просто. наболевшая проблема.
добавил в закладки, теперь будут всегда использовать.
только одно не понял: зачем в примере margin-left: -1px у helper?
добавил в закладки, теперь будут всегда использовать.
только одно не понял: зачем в примере margin-left: -1px у helper?
UFO just landed and posted this here
Извините, а когда высота парента не указана, данная проблема вообще стоит? ;)
UFO just landed and posted this here
Бывают случаи, когда самое время воспользоваться таблицами. Мне кажется, это один из них.
UFO just landed and posted this here
Тогда уж display: table, так как таблицы 1) принуждают к определенному порядку данных в исходнике 2) нельзя сделать версию для печати/КПК 3) уродливы и устарели 4) несемантичны 5) непонятно, как разделить в css презентационные таблицы и используемые для верстки, т.е. задаешь например border и padding — и он применяется ко всем таблицам сразу :((
Правда, с display: table-cell тоже есть подвох: не работает свойтво margin. Я вообще не понимаю, как на сегодняшних убогих и плохо поддерживаемых стандартах типа css вообще можно что-то верстать, кроме простого текста из нескольких абзацев. HTML — по прежнему язык для верстки научных отчетов CERN, ничего не поделаешь ((
p.s Простой пример: у страницы есть шапка (допустим, фиксированный размер в em), а в нижней, пустой части страницы ровно посередине пустого пространства надо разместить блок (пусть даже фиксированной высоты для простоты). И как это сделаешь? Да никак, без извратов типа яваскрипта (таблицы не годятся, так как шапка должна в коде идти после контента). Ах да. когда используешь яваскрпт — должен ставить обработчик onresize, так как в процессе отображения страницы может измениться размер шрифта или ширина окна :((
Правда, с display: table-cell тоже есть подвох: не работает свойтво margin. Я вообще не понимаю, как на сегодняшних убогих и плохо поддерживаемых стандартах типа css вообще можно что-то верстать, кроме простого текста из нескольких абзацев. HTML — по прежнему язык для верстки научных отчетов CERN, ничего не поделаешь ((
p.s Простой пример: у страницы есть шапка (допустим, фиксированный размер в em), а в нижней, пустой части страницы ровно посередине пустого пространства надо разместить блок (пусть даже фиксированной высоты для простоты). И как это сделаешь? Да никак, без извратов типа яваскрипта (таблицы не годятся, так как шапка должна в коде идти после контента). Ах да. когда используешь яваскрпт — должен ставить обработчик onresize, так как в процессе отображения страницы может измениться размер шрифта или ширина окна :((
UFO just landed and posted this 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 здорово обламывает.
4) Нет, не семантичнее. table — это таблица в контенте, и никак иначе. Для layout я использую div.
5) Тем, что эти классы надо прописать руками у каждого (!) элемента table, tr, td, более того, у layout таблицы надо в css сбросить те стили (border, padding), что прописаны для обычных таблиц — это же вообще плохо.
> Кстати, насчет margin слышу впервые. Это действительно так? Это во всех браузерах? Что на этот счет говорят стандарты?
Что у ячеек, рядов, колонок и их групп (и соотв-но элементов с display:table*) нет margin (зато есть padding). В принципе это логично, нельзя выдрать куда-то ячейку из таблицы, но при попытке вставить в существующую верстку display:table здорово обламывает.
UFO just landed and posted this here
В основном флоатами, есть разные техники, напрример через padding-bottom: 32000px/margin-bottom; -32000, faux columns (не пользовался), и ниже в комментах ссылка на хороший способ: chikuyonok.ru/2009/06/float-columns/
А что мешает использовать абсолютное позиционирование в примере с шапкой?
UFO just landed and posted this 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
Вот такие дела( Опять без яваскрипта не обойтись.
Вообще-то сложно, представьте, что у вас контент, а сбоку разные блоки. На печати или айфоне должен идти сначала контент, а под ним часть этих блоков (остальные скрыты). С таблицей — не сделаешь, с дивами — легко.
И вообще, я привык к схеме, когда в начале в коде идет контент, потом меню, потом всякая ерунда типа хедеров и футеров (как правило, просто несколько дивов). Когда страница без стилей выглядит вменяемо. Макет выглядит просто и логично. С таблицами такое невозможно.
Эх, еще бы поддержку :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 just landed and posted this here
Да в моем примере проще, там одна колонка, просто надо внутренний див растянуть на 100% высоты родительского (точнее, чтобы фон и border left/right внутреннего элемента тянулись на всю страницу по высоте), и тут городить схему с флоатами — имхо больше проблем несет, чем тупо добавить яваскрипт из 2 строчек (или вообще, плюнуть на все и нарисовать бордеры внутреннего элемента фоновой картинкой на внешнем элементе).
Ах да, display:table-cell не катит, т к не действуют маргины, а они там используются и на внешнем, и на внутреннем элементах (как и border, и паддинг), и паддингом не заменяются.
В общем, вот пример: egor.000space.com/hate-opera/test.html#p3
Без #p3 — текст виден целиком.
Ах да, display:table-cell не катит, т к не действуют маргины, а они там используются и на внешнем, и на внутреннем элементах (как и border, и паддинг), и паддингом не заменяются.
В общем, вот пример: egor.000space.com/hate-opera/test.html#p3
Без #p3 — текст виден целиком.
UFO just landed and posted this 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%.
Да конечно, слышал, я обычно ставлю 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 just landed and posted this here
UFO just landed and posted this here
Гм, inline-block не рассматривал, подумаю, хотя конечно извратище то еще :)
>> Ставить паддинги/маргины на body/html нельзя, т к в исходной верстке (пример упрощен) есть элементы с шириной 100%.
> Не понял. На 100% body? А как же тогда футер прибивается? Если нет, то что мешает? Доктайп стоит.
Гм, я про ширину а не высоту. Контент —ограничен по ширине, а вот например футер или шапка (котрых в примере нет) наследуют 100% ширины body, я про это. Футер прибивается установкой отрицательной margin-top, он идет после #outer (у которого 100% min-height).
В любом случае, спасибо, теперь у меня намного больший выбор всяких вариантов :)
>> Ставить паддинги/маргины на body/html нельзя, т к в исходной верстке (пример упрощен) есть элементы с шириной 100%.
> Не понял. На 100% body? А как же тогда футер прибивается? Если нет, то что мешает? Доктайп стоит.
Гм, я про ширину а не высоту. Контент —ограничен по ширине, а вот например футер или шапка (котрых в примере нет) наследуют 100% ширины body, я про это. Футер прибивается установкой отрицательной margin-top, он идет после #outer (у которого 100% min-height).
В любом случае, спасибо, теперь у меня намного больший выбор всяких вариантов :)
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
Поздравляю. Даже не знаю, нужно ли что-то добавлять. Хотя добавлю, что во втором фф и в ие6 достигнутый вами результат не работает при переносе строк.
UFO just landed and posted this here
Подскажите, как можно выровнять div по центру страницы вертикально и горизонтально?
Пока решил эту проблему с указанием отрицательных отступов в половину длины и высоты в пикселях, но хочу найти универсальное решение.
Пока решил эту проблему с указанием отрицательных отступов в половину длины и высоты в пикселях, но хочу найти универсальное решение.
Данный способ показался оптимальным, однако столкнулся с проблемой при размещении блока яндекс директа. Проблема в google chrome
Посмотреть живьём можно тут: bruneta.ru (на шапке справа)
Понимаю, что связано скорее всего с мусором, который передаёт сам яндекс для своего блока, но поскольку от мусора избавиться нельзя (или можно?), хотелось бы найти решение
Посмотреть живьём можно тут: bruneta.ru (на шапке справа)
Понимаю, что связано скорее всего с мусором, который передаёт сам яндекс для своего блока, но поскольку от мусора избавиться нельзя (или можно?), хотелось бы найти решение
Only those users with full accounts are able to leave comments. Log in, please.
1001-ый способ вертикального выравнивания