January 18th, 2009

moose, transparent

немного о веб-дизайне

(может быть интересно разве что веб-разработчикам и веб-дизайнерам)

Полдня сегодня еб... простите, игрался с CSS и браузерами. Прочитал за последние два дня значительную часть CSS: The Definitive Guide - отличная, кстати, книга, хорошо объясняет, продуманная организация материала, не слишком лаконично, не слишком подробно, в самый раз.

Теперь я хотя бы могу уверенно читать селекторы, и разбираюсь в box model примерно в пять раз лучше, чем до вчерашнего дня, хотя все еще не очень хорошо.

Я пытался построить рядом несколько колонок внутри общего контейнера. В каждой из колонок должна быть своя сложная организация, а не просто текст, и ширина у каждой из них может быть разная. Как это сделать? Можно таблицу, но таблицу я заранее не хотел. Можно пустить колонки в плаванье, но я не очень хорошо понимаю механику плаванья, хотя тут это довольно просто, и наверное смог бы написать. Меж тем в книге я как раз дошел до главы, которая прочистила мне мозги насчет блочных и строчных элементов, фундаментальных различий между ними, и того, как их менять с помощью display: невзирая на природу исходного элемента в HTML. Я тут же наивно решил, что не может не быть простого способа расставить рядом колонки с помощью обычного потока, без плавающих блоков.

Довольно быстро я наткнулся на display: inline-block, который делает именно то, что надо: "наружу" элемент выглядит как часть строчного контекста, и поэтому укладывается с другими такими же в строку; а "внутрь" он - блочный элемент, так что ему можно задавать размеры и все как следует в нем расставлять. Collapse )