Колоночный дизайн с помощью CSS

Ha A list Apart новая статья – как стилевым позиционированием исполнить колоночный дизайн. http://www.alistapart.com/articles/fauxcolumns/
Автор – http://www.alistapart.com/authors/dancederholm/ [Dan Cederholm]

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

Фон задается блоку как всегда в css – типа такого:
background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

А вообще вся эта имитация – печалит безмерно. Лично сталкивалась с ситуацией, когда была необходимость в реальных колонках. Т.е. чтобы текст после “наполнения” первой (левой) колонки перетекал (сам) в следующую (правую). Публика пишет, что в css3 будет реализована эта фича, однако когда она в полной мере начнет поддерживаться браузерами….

Был такой тэг <multicol>     </multicol>
http://devedge.netscape.com/library/manuals/1998/htmlguide/tags15.html#1077197
теперь нет, но он позволял раскладывать текст на заданное число столбцов одинаковой ширины. Высота колонок была примерно одинаковой, и за раскладкой текста следил браузер. Поведение текста при изменении размера окна примерно такое же, что и в Winword’е у Формат/Колонки.

По поводу этого тега (малтикола) публика в ньюзах написала:
Профи старается использовать элементы языка по назначению. Хотя не всегда это получается ввиду некорректной интерпретации языка отдельными особораспространенными броузерами.
Это точно :) :)

Эта запись была опубликована в рубрике дизайн и отмечена метками , , . Добавить в закладки ссылку.

1 в ответ на Колоночный дизайн с помощью CSS:

  1. Григорий пишет:

    Вот здесь перевод fauxcolumns с alisapart Искусственные столбцы

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>