Pull to refresh

Comments 64

разве это главная проблема блочной верстки? =))
для меня...
пока я не решу эту проблему, блочная верстка для меня бесполезна.
Вы имеете 2/3-ех колоночный макет, где блоки обтекают друг друга?

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

Приличный опыт веб-разработки подсказывает мне (и моим коллегам, насколько я знаю их мнение), что блочная верстка в чистом виде пока неспособна удовлетворить повседневные потребности верстальщика. Во многом это происходит по вине ИЕ6.

Но не будем о грустном. Дам практический совет.
Желание использовать блочную верстку везде, где только можно - похвально. Но если находится какое-то место, которое вы не знаете как сделать с помощью блоков, и получасовой/часовой поиск хаков в гугле не приводит к нужному результату - воспользуйтесь таблицей.
Это сбережет нервы и время.
И код получится, как правило, изящнее, чем трехстраничный css-hack.
большое спасибо. я пришел к тому же выводу. вы прямо читаете мои мысли. +1
"Запакуйте всё в таблицу" - ответ для тех, кто не хочет разобраться.
Решаемо всё. И уж точно без трёхстраничных хаков.
Уж поверьте мне, я люблю разбираться :)

Хотите поговорить предметно, со скучными примерами?
да, и я же написал "если ... получасовой/часовой поиск хаков в гугле не приводит к нужному результату - воспользуйтесь таблицей"

Наверное, вы дальше первой строчки ничего не прочитали.
1. Хаки, в основе своей, нужны для IE.
2. Полчаса искать их надо только при небольшом практическом навыке верстки блоками. При достаточном навыке большинство проблем решается на полуавтомате. И, конечно, есть http://www.positioniseverything.net/
3. Я всегда читаю до конца.
Ваш пункт 1 уже отвечает на все вопросы...
Если бы я мог верстать только для Firefox, я был бы счастливым человеком. :) Но необходимость учитывать, причем учитывать в большей степени, поведение браузера ИЕ сводит на нет все попытки адептов блочной верстки уничтожить таблицы как класс. :)

Давайте не будем спорить, holy war получится.

Спасибо.
Хаков необходимо не так много. Плюс, есть conditional comments.

Не с теми адептами, по всей видимости, вы сталкивались. Скорее вы чаще встречаете фанатиков. Я к таковым отношусь едва ли. И уж точно не собираюсь уничтожать табличную вёрстку - а то хвастать тем, что я "умею и блоками" не смогу ;)

Пожалуйста.
Надо просто учиться. Таблицей вы гробите отображение на PDA. Блочная вёрстка даёт вам несколько возможностей, которых нет у таблицы:
1. при сильном сужении окна перевёрстывать блоки из горизонтального в вертикальное положение. Понимаю, у вашего дизайнера такая возможность может пока не укладываться в голове, но те же пользователи PDA поблагодарят вас от всей души.
2. использовать min-width, который ПОЛНОСТЬЮ выполняет запрошенное вами поведение и вместо CSS-хака под IE можно использовать специальную библиотеку.
3. вы можете этот код напрямую транслировать в RSS, и предоставлять очень логичный текст поисковикам, что в наше время ой-как важно.

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

PS Нормальный CSS-хак не получается длиннее, чем код таблицы, так что тут вы перегнули палку.

PPS я против CSS-хаков, поскольку это позволяет выжить некачественным браузерам. Но я и против вёрстки на таблицах — это мешает сделать код доступным для машинного чтения и расширения сферы применения браузеров в мобильных устройствах.
1. Я так и сказал. Переверстывать блоки при сужении окна - это вполне в духе блочной верстки. Только вот задача автора поста состояла как раз в обратном. Почему, я вас спрашиваю, блочная верстка не позволяет мне сверстать страницу так, как я хочу?

2. Ваша специальная библиотека, очевидно, очень порадует пользователей КПК без поддержки JavaScript. А также пользователей со строгими корпоративными правилами безопасности, запрещающими JavaScript. И вообще, верстать с помощью JavaScript - это же так элегантно!

3. RSS я предпочитаю генерировать отдельно на стороне сервера с помощью встроенных в framework средств. Верстка для браузера тут вообще ни при чем.

Я пишу вот так вот:
<table id="wrapper"><tr><td>
....
</td></tr></table>

А вы (в широком смысле, "вы" - любители хаков, джаваскрипта и кондишенал комментс) пишете вот так:
#root{width:expression(document.body.clientWidth1280?"1280px":"100%"))}

И это мой код создаст кому-то проблемы? Сомневаюсь.
Скорее, на ваш хак будут смотреть широко открытыми глазами и спрашивать "ЧТО ЭТО?!" :-/
1. Может потому, что вы привыкли хотеть чего-то не вяжущегося со средствами получения этого? Семантический веб это как первые млекопитающие в эпоху динозавров, когда казалось, что "размер имеет значение". Время показало, что значение имеет эффективность и слабые беззащитные твари с развитым интеллектом способны превозмочь любого тупого монстра с мощными мышцами и бронёй.

2. Эта библиотека не потребуется пользователям КПК. Она будет загружена лишь пользователями IE. Жаль, что вы не ознакомились с ней ПЕРЕД тем, как писать мне ответ. Вся её работа в том, чтобы сделать IE совместимым со стандартами и давать писать нормальный код для всех. Это не попытка верстать на javascript, как вы подумали — в коде страницы вам не потребуется вызывать ничего из неё. Просто IE станет меньше "глючить".

3. Вы правы насчёт RSS. Тут я ошибся. А вот тот факт, что CSS-хак будет загружен один раз для всего сайта, вместо таблицы, которая необходима на каждой странице вам ничего не говорит? Думаете никому ваш код проблем не создаст? Похоже вы пока не поняли ОСНОВНОГО ПРЕИМУЩЕСТВА блочной вёрстки — код страницы не зависит от дизайна. Посмотрите как легко менять дизайн, если никакой привязки нет в коде — Поклацайте по ссылкам на боковой панели

Скорее, на ваш хак будут смотреть широко открытыми глазами и спрашивать "ЧТО ЭТО?!" :-/

Ну эта петензия к Майкрософту. Так они задумали.
Полностью солидарен с вами.
1. Я привык удовлетворять потребности заказчика. И если заказчик хочет так, а не иначе, я могу биться головой об стенку, плакать, громко кричать и делать другие неадекватные вещи. Но я буду вынужден сделать так, как хочет заказчик, иначе я потеряю свою работу. А вы либо живете в Идеальном Мире, где все делается как вы считаете правильным, либо работаете в студии Лебедева, которой просто на всех насрать (простите).

2. Зря вы меня недооцениваете - я ознакомился. И зря вы думаете, что на КПК нет IE. И еще зря вы думаете, что нет таких машин, на которых в IE отключен JavaScript - их очень много. А кое-где он не отключен, а просто глючит. У нас даже в офисе есть одна машина, где JavaScript в ИЕ никак не хочет работать, хоть плачь. Мы будем ваши сайты на ней смотреть.

Это верстка, полагающаяся на работу javascript, не больше и не меньше. Я считаю это неправильным, но не заставляю вас соглашаться с моим мнением.

3. Про "загружен один раз" - хороший аргумент. Ценю. Если бы делал Яндекс, я бы обязательно учел эту значительную экономию трафика и процессорного времени. Но к сожалению, в Яндексе я не работаю, а мое рабочее время значительно дороже трафика, порождаемого одной таблицей с двумя ячейками. Кстати, в Яндексе вообще используют встроенные в страницу CSS, которые каждый раз заново грузятся. Вы, наверное, в ужасе будете, когда увидите.

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

Я основное преимущество блочной верстки давно понял, иначе бы я ее не использовал. Но у нее есть объективные недостатки, например, неполная поддержка в ИЕ6. Есть ваш способ обойти эти недостатки, ортодоксальный. Есть мой - чисто практический. Давайте не будем спорить, у нас обоих есть веские аргументы в пользу своего способа.

А посылать меня на зенгарден - это вообще оскорбительно. :)

Спасибо за дискуссию.
Скорее всего, вам поможет min-width и простой хак для IE: http://www.dustindiaz.com/min-height-fas…

Вообще, если опишете проблему поподробнее, может быть чем-то еще смогу помочь.
проблема такая: есть layout примерно как на хабре - слева блок с кучей текста, ширина автоматом, справа - фиксированной ширины. В тексте картинка. в 800 на 600 все съезжает, либо блоки один под одним либо право наезжает на лево или наоборот. как сделать чтобы было как в таблицах. min-height пробовал, все равно наезжает:(
я бы это реализовал так:
<div>
   <div style="float: right; width: 200px;">правый блок фикс. ширины</div>
   <div style="margin-right: 200px">левый блок с кучей текста</div>
</div>
я так и сделал. float: right; грубо говоря приклеивает к правой границе окна а не документа,
то есть левый блок подныривает под правый в маленьком окне.
Кстати, это явление вполне в духе блочной верстки.

Считается, что если у тебя маленький экран, у тебя все равно не должно возникать никаких горизонтальных прокруток, все блоки просто должны выстраиваться по порядку вертикально. :)
да, но у меня возникает еще интереснее проблема - в правом блоке есть блоки float:right;, они когда наезжают на левый блок, в местах наезда творится беспредел:) буквы и блоки бегут от мест наезда:) короче, чехарда
Идеальное - min-width. Реально воплотить.
насколько я помню min-* в ИЕ не пашет. а ведь хаки под ИЕ и есть основная головная боль.
зато пашет _width (который есть только в IE), это как раз то же самое.
или хак http://www.dustindiaz.com/ выше, делает то же самое.
Это утверждение можно обобщить :)

ИЕ версии 6 и ниже не поддерживает CSS версии 2 и выше :))
Свойство min-width в ИЕ можно заменить через Conditional Commens и expression.
Т.е. всю страницу заключить в блок и указать ему минимальную ширину.
Примерно так:

<!--[if IE]>
<style media="screen" type="text/css">
#root{width:expression(document.body.clientWidth<750?"750px":(document.body.clientWidth>1280?"1280px":"100%"))}
</style>
<![endif]-->
Сапсибо, интересно. Только проблемы это не решает:(
Но это же некрасиво и невалидно. :(
Этот вариант полностью валиден т.к. валидатор пропускает комментарии.
С точки зрения красоты — это полностью соответствует стандартам, т.к. это не хак, а официальный способ добавления коментариев.
Ох, простите. Не валиден в данном случае только css, а раз вы его закомментировали, то кода тут вообще нет и обсуждать нечего. :)

Насчет красоты... Вы знаете, у меня несколько другой взгляд на эти вещи. У меня при виде тега <!--[if IE]> сразу возникает ассоциация с костылями. Потому что ИЕ6 - инвалид, и без вот таких вот костылей не может. Какая уж тут красота...
По-моему, в таком случае смысл блочной верстки несколько теряется. Она призвана сделать html простым, понятным, семантически логичным и перенести весь дизайн в css. Когда одна таблица-скелет заменяется конструкциями с Conditional Comments, яваскриптом и хаками, основанными на багах IE6, это сводит на нет большУю часть преимуществ блочной верстки.

Если верстка делается на дивах только ради того, чтобы сделать именно на дивах - тогда да, хаки спасут отца русской демократии. В противном случае лучше найти разумный компромисс.
>> Когда одна таблица-скелет заменяется конструкциями с Conditional Comments,
>> яваскриптом и хаками, основанными на багах IE6, это сводит на нет большУю
>> часть преимуществ блочной верстки.
Блин, а я-то думал.
А если серъёзно - вы не там ищете преимущества.
Ну объясните мне, непосвященному, где их искать нужно :) Стану умнее :)
Как минимум (достаточный для меня):
1. Разделение оформления и разметки
2. Избавление от негибкой и, уж точно, не особо читаемой "таблицы-скелета"
3. Легкая смена дизайна
4. Эстетическое удовольствие

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

ps. Я года полтора верстал таблицами.
И ёрничать не надо.
Кто же ерничает? Я на полном серьезе надеюсь что-нибудь полезное почерпнуть из комментариев (в том числе ваших) и стать умнее :)

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

Между прочим, Хабр сверстан на таблицах :)
Эстетическое удовольствие от хаков я тоже не получаю. Но знаете, можно и потерпеть.

Хабр свёрстан, ага. Но это поправимо.

Я буду очень рад, если вы почерпнете из моих комментариев нечто полезное.
Вот именно это мне и не совсем понятно - зачем терпеть? Какой смысл в этом?

Когда мне очень не хочется вставлять большущий хак с тремя дополнительными дивами и кучей лишних правил цсс, я вставляю одну таблицу и она решает мои проблемы в две строки кода и 10 секунд времени. Не доставляя при этом никаких неудобств :)

Есть ли какие-то реальные причины все же верстать исключительно на дивах с хаками?
Реальные причины есть верстать семантично. Семантичность включает в себя такое правило, как "соответствие смысла элемента его содержанию", что легко транслируется в "таблица - для табличных данных". Дальше - больше. Дальше пойдут микроформаты, которые привносят в xhtml дополнительную семантику, причем не изменяя, собственно, структуры документа.
А зачем семантично верстать? Да чтобы своими действиями подгонять разработчиков браузеров к прогрессу. Чтобы сделать сеть удобней. Чтобы сделать сеть доступней. Чтобы сеть развивалась, а не топталась на месте на уровне 90х годов.

Макс уже публиковал переводы о микроформатах - читайте.

Хаки, повторяюсь, вынужденная мера.
Да, с этим сложно не согласиться. Спасибо за полезную информацию :)
Кстати, где можно доступно почитать, как можно перейти на блочную верстку?
переверстал колонки таблицей. остальное оставил div-ами. в качестве побочного эффекта страница стала влазить в 800х600. Очень рад:)
Победил здравый смысл. :)
я верстал одну страницу 8 часов. про лень я молчу. holy wars - не для меня. научусь делать так блоками - переделаю.
Нет никакого противоречия в лени заставившей работать 8 часов вместо 6и. Лень учиться ведёт к низкой эффективности оттуда оттого и времени уходит больше. А если подумать, что через год прийдётся делать это заново, то и вобще лень превращается в "способ сократить время сегодня за счёт работы завтра".
да, я знаю. спасибо.
Достаточно было у какого-нибудь другого элемента на страничке зафиксировать ширирину в допустиный минимум. Наверняка же есть "чердак" или "подвал".
Это не поможет.
почему же? - отлично эмулирует min-width
Чердак/подвал сжиматься не будет. А float-блоки будут съезжать.

Мы про IE говорим, конечно же.
точно!
и не только в IE :(
сам же сталкивался... в итоге сделал, чтобы в 800 по ширине влезало правильно, а на низкие разрешения, можно сказать, забил. Кто сказал, что страница должна во всех разрешениях выглядеть одиниково? - Главное, чтобы ей пользоваться было можно :)
+1 Busla
kost прав, все так и есть.
Я сделал ячейки из таблиц, теперь все влазит в 800на600 и нормально смотритсяс прокруткой в 640. так что можно сказать я победил:)
:))))
На самом деле, решается с помощью min-width + эмуляция min-width для IE.

Кто сказал, что страница должна во всех разрешениях выглядеть одиниково? - Главное, чтобы ей пользоваться было можно :)


У меня еще ни разу не получалось убедить в этом дизайнера/заказчика, которые мыслят таблицами, и, видимо, никогда не перестроятся.
у меня поджимаются пробелы мужду колонками, вот и влазит
Таблицы используй только для вывода табличных данных. Не слушай тех, кто говорит, что таблицами верстать быстрее и надежнее. Это говорят ленивые верстальщики, которые выучили 5 лет назад табличную верстку (тогда она была актуальной), а сейчас не хотят переучиваться. Грамотная блочная верстка справится с макетами любой сложности!
Only those users with full accounts are able to leave comments. Log in, please.