Comments 95
А можно использовать box-sizing: border-box; и не париться на счёт отступов и border.
Кстати, неплохо бы демку приложить.
Кстати, неплохо бы демку приложить.
box-sizing вроде бы как только в CSS 3 и в IE8+ только работает.
Я бы сказал наоборот: не работает только в IE7−.
UFO just landed and posted this here
Всё тот же баг с
min-height? Его, таки, собираются устранить в Fx17?!UFO just landed and posted this here
А, ну да.
А можно внимательно читать ТЗ.
А можно внимательно читать ТЗ.
Извините. Интернеты тупят.
Я и не говорил что это будет в IE6 работать, я предложил вариант решения.
А в ТЗ написано IE6++. Зачем создавать лишние костыли?
Зачем использовать ие6-7?
Использовать незачем. Но заказчику бывает все-равно. Как то например: специфика товаров, которые продаются в интернет-магазине, предполагает то, что определенная часть людей достаточно «отсталая» в плане компьютерной образованности, а значит сомнительно что они обновляли браузер. Следовательно такие пользователи увидят кривой сайт. А из этого следует упущенная выгода. А зачем это заказчику?
Что ж, я попытался это объяснить маразмом клиента, но судя по вашему комментарию, дело в вас а не в заказчике. 1 (а то и меньше) процентом пользователей ie6 можно и нужно пренебречь, при этом сэкономив время и деньги, и получив чистый сайт. Пользователями ие7 можно пренебречь, так как последний браузер из ие которой обновляется в XP есть 8. Вот его придётся ещё некоторое время поддерживать, пока не закончиться поддержка windows xp в целом. Следуя этим простым правилам, можно сэкономить нервы, все остальные случае должны оплачиваться сверху. И вместе этих ваших догадок, лучше бы объяснили клиенту цену вопроса, а для юзеров вешали уведомление о устаревшем браузере и ссылками на скачку нового.
Порой мне кажется, что проблема с поддержкой браузеров появилась не из-за клиентов, а из-за разработчиков с такой идеологией, который хотят угодить всему миру. Почему вы тогда и линкс не поддерживаете, пару десятков юзеров в день с него тоже в инет выходят?
Порой мне кажется, что проблема с поддержкой браузеров появилась не из-за клиентов, а из-за разработчиков с такой идеологией, который хотят угодить всему миру. Почему вы тогда и линкс не поддерживаете, пару десятков юзеров в день с него тоже в инет выходят?
Поверьте, я вообще никогда не верстаю под IE6 если в этом нет надобности. Но Вы считаете в общем 1% пользователей на IE6. В целом картина такова. Но есть сайты на которых посетители с IE6 переваливают за 9%. А это значительная цифра с точки зрения бизнеса. Не смотрите на статистику, а посмотрите на это с точки зрения потерянных денег.
Вас, как разработчика не должно волновать сколько клиент потеряет денег. У вас есть, грубо говоря, прайс. В разработка по ie6 должна оплачиваться отдельно. Клиент дважды подумает, а стоит ли ему собственно эти 9%. И сколько из этих 9% боты и собственно сами разработчики. И то это всё применимо для сайтов интернет магазинов или платных сервисов, хотя если юзеры уже как-то осведомлены, странно, что они до сих пор используют ие6.
Так оно и оплачивается отдельно. Никто не говорит про бесплатно. И да, меня как разработчика интересует лояльность клиента, т. к. в след раз он обратиться ко мне, а не к тому, кто скажет: «Я под IE6 верстать не буду».
Более того, дабы не быть голословным, приведу цифры:
Специально открыл метрику и посмотрел один из сайтов. На 29 тыс. посетителей, приходится почти 1 тыс посетителей с IE6. Сайт кулинарной тематики.
Более того, дабы не быть голословным, приведу цифры:
Специально открыл метрику и посмотрел один из сайтов. На 29 тыс. посетителей, приходится почти 1 тыс посетителей с IE6. Сайт кулинарной тематики.
Заказчик больше денег потеряет на разработке под IE6, т.к. это весьма серьёзные траты (вплоть до утраивания бюджета проекта), если конечно вы не верстаете под IE за бесплатно.
А с самих же юзеров IE6 вы ничего не получите, т.к. у этих людей нет денег чтобы купить новый компьютер или банально нанять человека который им переустановит windows.
А с самих же юзеров IE6 вы ничего не получите, т.к. у этих людей нет денег чтобы купить новый компьютер или банально нанять человека который им переустановит windows.
В моей прошлой конторе около 70 000 сотрудников по всему миру. До прошлого года, использование IE6 составляло 100%, в этом году свершилось чудо — перешли на IE7.
Корпоративный сектор. Он не так мал, и с ним, иногда, необходимо считаться.
Корпоративный сектор. Он не так мал, и с ним, иногда, необходимо считаться.
Костыли это разработка под IE, а box-sizing это весьма удобное решение.
А разве при box-sizing не придется ставить статическую высоту? Мое решение предоставляет динамическое изменение высоты блоков в зависимости от размера контента, тогда как в вашем случае необходимо намертво ограничить высоту.
Не придётся.
В таком случае, можно мне ссылку на описание применения данного способа без ограничения высоты блоков, либо описать здесь в нескольких словах?
Вы понимаете как работает box-sizing? Он лишь отменит прибавку padding и border к вашей абсолютной или точно заданной ширине\высоте.
В методе, описанном в данной статье, высота блоков не задается ни в каком виде, они увеличиваются одинаково вслед за увеличением контента. А при использовании box-sizing, мне необходимо указать высоту блоков, чтобы они были одинаковы, но когда контент превысит заданную высоту, то блоки опять станут разной высоты, либо контент обрежется/выйдет за границы блоков.
UFO just landed and posted this here
А вообще, по-моему это очевидное решение. Сколько ещё можно таких статей собственно писать на хабре? Давайте ещё начнём писать о 100% line-height и центрировании по вертикали, о min-height: 100% и прикреплённом футере.
Я понимаю, что для начинающих это будет интересно. Но не по одной же статье, причём с плохо форматированным текстом и без демо. Стоит собрать подобные трюки в одну статью, и хорошо это дело оформить.
Я понимаю, что для начинающих это будет интересно. Но не по одной же статье, причём с плохо форматированным текстом и без демо. Стоит собрать подобные трюки в одну статью, и хорошо это дело оформить.
HTML не помешало бы отформатировать с отступами, без форматирования с первого раза картинка не сложилась.
В данном случае колонки .text_l и .text_r имеют разную высоту, поэтому в названии не помешало бы слово визуально.
UFO just landed and posted this here
В Вилларибо и Виллабаджо опять дедлайн. Пока ребята из Вилларибо верстают сайт дивами, ребята из Виллабаджо уже всё сверстали на таблицах и ебошат друг друга в квейк.
(c) neatkariga at lj
bash.im/quote/100001
<td> не умеет кроссбраузерный position: relative, а это может оказаться шилом в заднице.
а разве display:block не решает эту проблему?
Нет. <td> должен иметь display: table-cell.
Если отойти от тривиальной вёрстки, то с таблицами в этом случае проблем будет гораздо больше и хаков придётся писать ещё больше чем с div'ами.
Если отойти от тривиальной вёрстки, то с таблицами в этом случае проблем будет гораздо больше и хаков придётся писать ещё больше чем с div'ами.
то есть если поставить для td display:block, то это может в каком-то месте вылезти боком?
UFO just landed and posted this here
Понял. Спасибо
Вот в этой статье есть материал по этому делу.
Илюх, а мне показалось или костыль для Firefox снова пашет?
UFO just landed and posted this here
Тогда можно заюзать колонки через таблицы, использовав этот костыль и забив на IE6-7) Либо + костыль на js для динозавров. Как считаешь?
UFO just landed and posted this here
Ну да, для Firefox выходит нужен отдельный костыль в виде злого хака), чтобы позиционирование в нём было от вложенного контейнера) Немного геморно, согласен :)
флексбоксы вообще чудо, но увыы, поддержка швах(
флексбоксы вообще чудо, но увыы, поддержка швах(
Просто на самом деле обидно, что из-за Firefox-а (заметь, не IE) обламывается CSS-таблица) Реально хоть и не для колонок (а что для колонок по сути?)), но способ был бы вполне рабочим и нормальным и без лишней разметки :)
Не могу точно сказать где, но в некоторых браузерах по счастливой случайности это срабатывало «нормально», и, в конечном итоге, придётся писать для ff, webkit и ie разный css.
Пожалуй это можно назвать «вылезти боком».
Пожалуй это можно назвать «вылезти боком».
Да уж, способ конечно костыльный. Жаль что не пока «чистого» кроссбраузерного способа сделать данный функционал, хотя конечно есть таблицы, но у них есть свои минусы (например, задние высоты блока на всю ячейку).
Во Flexible box layout module, свойство box-align: stretch; (align-items: stretch;) призвано решить данную проблему, но оно пока ещё в ранней стадии поддержки, разве что firefox поддерживает с префиксами.
Во Flexible box layout module, свойство box-align: stretch; (align-items: stretch;) призвано решить данную проблему, но оно пока ещё в ранней стадии поддержки, разве что firefox поддерживает с префиксами.
Жаль, но можно просто сверстать таблицей, правда это считается черновым способом, так как таблицы предназначены для вывода табличных данных. Просто условием этой задачки является не использовать таблиц ни в каком виде.
Даже если для вас habrahabr.ru/post/148327/#comment_5080729 не аргумент, то можем пойти дальше:
Теперь нам нужно позиционировать абсолютно блок скажем снизу справа от одной ячейки.
Решение на таблицах:
добавляем ещё одну строку после нужной ячейки высотой в 0px, добавляем ещё один столбец после ячейки шириной в 0px, в ячейке с шириной и высотой в 0px размещаем <div> с position: relative и от него уже делаем position: absolute.
Окей, разобрались.
Теперь нужно позиционировать на расстоянии 30% от низа ячейки какой-то блок.
Мы в заднице, поздравляю, т.е. решение на таблицах не даст возможности постепенно вносить минорные изменения — для каждого «чиха» придётся перефигачивать таблицу.
Есть одно главное условие — нивелировать side-effect. Его обычно принимают по-умолчанию.
Теперь нам нужно позиционировать абсолютно блок скажем снизу справа от одной ячейки.
Решение на таблицах:
добавляем ещё одну строку после нужной ячейки высотой в 0px, добавляем ещё один столбец после ячейки шириной в 0px, в ячейке с шириной и высотой в 0px размещаем <div> с position: relative и от него уже делаем position: absolute.
Окей, разобрались.
Теперь нужно позиционировать на расстоянии 30% от низа ячейки какой-то блок.
Мы в заднице, поздравляю, т.е. решение на таблицах не даст возможности постепенно вносить минорные изменения — для каждого «чиха» придётся перефигачивать таблицу.
Есть одно главное условие — нивелировать side-effect. Его обычно принимают по-умолчанию.
Интересно, что об этих text_container_ вложенных друг в друга подумает поисковик, который придет индексировать сайт или верстальщик, который будет поддерживать такую верстку после автора, или сам автор через год, особенно, в случае с 4+ колонками.
Имхо, лучше на js сделать, он уже едва ли не на всех телефонах есть, не говоря о десктопах. С отключенным js, думаю, разная высота колонок будет не самым большим разочарованием пользователя :)
Имхо, лучше на js сделать, он уже едва ли не на всех телефонах есть, не говоря о десктопах. С отключенным js, думаю, разная высота колонок будет не самым большим разочарованием пользователя :)
В IE7 блоки разбегаются — чтобы не ползло, правильней будет использовать в следующем виде классы:
.text_container_l {
width: 50%;
float:left;
}
.text_container_r {
width: 100%;
float:left;
margin:0 0 0 100%;
*margin:0 0 0 50%; — по странным обстоятельствам при указании margin-left 100% блок уезжает вправо за родительский блок
}
.text_l {
float:left;
width:100%;
margin:0 0 0 -100%;
zoom: 1; — для отрицательных маргинов в IE7
position: relative; — для отрицательных маргинов в IE7
}
.text_r {
float:left;
}
.text_container_l {
width: 50%;
float:left;
}
.text_container_r {
width: 100%;
float:left;
margin:0 0 0 100%;
*margin:0 0 0 50%; — по странным обстоятельствам при указании margin-left 100% блок уезжает вправо за родительский блок
}
.text_l {
float:left;
width:100%;
margin:0 0 0 -100%;
zoom: 1; — для отрицательных маргинов в IE7
position: relative; — для отрицательных маргинов в IE7
}
.text_r {
float:left;
}
Sign up to leave a comment.
«Див» блоки одинаковой высоты