Начинающие веб-мастеры довольно часто встречаются с проблемой расположения информации в один ряд. Будь то картинка слева и текст, расположенный справа, или два текстовых блока, представленных в виде колонок.
Существует ряд способов, позволяющих выполнить поставленную задачу, но не каждый способ может решить проблему совместимости разных браузеров. Всё дело в том, что язык HTML интерпретируется многими браузерами неодинаково, т. е один браузер может отобразить информацию как мы и предполагали, а другой - совсем иначе. Вот тут и возникает знакомая многим сайтостроителям проблема. В погоне за кроссбраузерностью сайта, веб-дизайнеры ищут способы, позволяющие разработать страницу сайта так, чтобы она отображалась во всех браузерах одинаково.
Наиболее удачным способом разметки дизайна страницы в языке html является таблица. Помимо своей основной функции таблица позволяет очень удачно служить "каркасом" дизайна сайта.
В нашем случае, мы будем использовать таблицу для создания колонок с текстом.
Расположение двух таблиц в одной строке.
Для начала, давайте создадим таблицу, состоящую из двух столбцов со значением ширины рамки, равной 0 пикселов (border="0"
). Для тега
(тег столбца таблицы) указываем атрибут valign со значением "top", отвечающий за то, чтобы информация располагалась с верхнего края таблицы.
Вот, примерно, какой html-код вы должны были получить:
В каждой ячейке (между тегами
) нашей таблицы создаем ещё одну таблицу, но c шириной рамки, равной 1 пиксель, и с одним столбцом. Посмотрите, какая таблица должна получиться у вас:
Атрибут "cellspace" в основной таблице равен 2.
Привожу весь html-код, разработанный нами в данный момент:
Видите, ничего сложного. А главное - код читается во всех браузерах.
Колонки с текстом.
На основе этого мы можем с Вами создать колонки с текстом.
Для этого в полученных нами таблицах меняем параметр "border" тега
. Во всех таблицах поменяем значение атрибута border с 0 на 1, и в ячейках вложенных таблиц напишем произвольный текст.
Вот, что в результате должно у вас получиться:
Довольно привлекательно, не правда ли?
В продолжение своего топика Новое в CSS3: многоколоночность, flexbox, сеточная разметка предлагаю вам перевод статьи с более глубоким погружением в свойство многоколоночности с простыми и наглядными примерами.
Еще газетами и журналами на практике доказано, что разбитый на несколько колонок текст воспринимается намного проще. На веб-страницах до недавнего времени отобразить контент таким образом было проблемой, доходило до того, что верстальщик разделял текст на несколько div"ов. Но все может стать намного проще с CSS3 Multi Column Module.
Создание контента, разбитого на несколько колонок
Используем HTML5-тег article
:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,
rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.
Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit
amet tincidunt orci placerat in. Integer vitae consequat augue.
//и т.д.
Благодаря CSS3 Multi Column Module можно очень просто и быстро разбивать тексты на удобочитаемые колонки. Список поддерживаемых браузеров уже достаточен, чтобы примерять мультиколоночность на рабочих проектах. Для устаревших браузеров можно применять специальную
Текст в несколько колонок давно уже применяется в издательском деле при вёрстке газет, журналов и книг. Человеку комфортнее читать текст определённой ширины, колонки как раз и обеспечивают разбиение большого текста на столбцы заданного размера. На сайтах это не всегда имеет смысл делать из-за ограниченности высоты окна браузера. Читателю вначале придётся прокрутить одну колонку вниз до конца, а затем вернуться наверх к началу следующей колонки, что довольно неудобно. Тем не менее, для некоторых текстов имеет смысл использовать именно многоколоночный текст из-за эффекивного использования свободного пространства по ширине.
CSS3 предлагает сразу четыре свойства для создания и управления колонками: column-count
, column-gap
, column-width
и column-rule
. Для наглядности значения некоторых свойств показаны на рис. 1.
Рис. 1. Стилевые свойства для колонок
column-count
— устанавливает оптимальное число колонок.
column-gap
— расстояние между колонками.
column-width
— оптимальная ширина колонок.
column-rule
— разделительная линия между колонками.
Следует пояснить, что такое «оптимальное число» и «оптимальная ширина». Свойство column-count
задаёт не точное количество колонок, а скорее желаемое. Браузер постарается разбить текст именно на столько колонок, но при уменьшении размеров окна будет сокращать число колонок, чтобы сохранить комфортность чтения. Аналогично обстоит и с шириной. Свойство column-width
указывает минимальную ширину колонки, при этом браузер это значение может проигнорировать, если размер окна недостаточен для обеспечения заданной ширины колонок.
Браузер Chrome и Safari понимают эти свойства только с префиксом -webkit, а Firefox только с префиксом -moz. Комбинируем свойства для разных браузеров и получаем код, который создаёт трёхколоночный текст (пример 1).
Пример 1. Три колонки
HTML5
CSS 3
IE 9
IE 10
Cr
Op
Sa
Fx
Колонки
Дистинкция дискредитирует непредвиденный интеллект, учитывая опасность,
которую представляли собой писания Дюринга для не окрепшего еще немецкого
рабочего движения. Аподейктика порождена временем. Платоновская академия
методологически преобразует трансцендентальный предмет деятельности, хотя в
официозе принято обратное. Отношение к современности реально создает позитивизм,
однако Зигварт считал критерием истинности необходимость и общезначимость,
для которых нет никакой опоры в объективном мире. Культ джайнизма включает
в себя поклонение Махавире и другим тиртханкарам, поэтому гетерономная этика
преобразует типичный принцип восприятия, при этом буквы А, В, I, О символизируют
соответственно общеутвердительное, общеотрицательное, частноутвердительное и
частноотрицательное суждения. Катарсис, по определению, непредвзято оспособляет
онтологический даосизм, при этом буквы А, В, I, О символизируют соответственно
общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное
суждения.
Культ джайнизма включает в себя поклонение Махавире и другим тиртханкарам, поэтому
принцип восприятия неоднозначен. Платоновская академия раскладывает на элементы
смысл жизни, учитывая опасность, которую представляли собой писания Дюринга для
не окрепшего еще немецкого рабочего движения. Ощущение мира, как следует из
вышесказанного, подчеркивает язык образов, учитывая опасность, которую представляли
собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Освобождение,
следовательно, философски оспособляет закон исключённого третьего, изменяя привычную
реальность.
Результат данного примера в браузере Chrome показан на рис. 2. Вместо трёх колонок мы наблюдаем две из-за малой ширины окна браузера. При увеличении размеров окна число колонок вырастет до заданного, при дальнейшем уменьшении ширины окна, наоборот, количество колонок сократится до одной.
Рис. 2. Многоколоночный текст
Чтобы урезать набор применяемых стилевых свойств, можно воспользоваться универсальным свойством columns
, оно одновременно устанавливает ширину колонок и их число (пример 2).
Опять же, для работы некоторых браузеров требуется добавить свои префиксы. Расстояние между колонок и параметры разделительной линии, если это требуется, приходится задавать дополнительными свойствами. Если column-gap
и column-rule
не указаны, линия между колонок не отображается, но некоторое минимальное расстояние между колонок в любом случае сохраняется.
Одним из наиболее популярных вариантов верстки веб-страниц выступает двухколонный
макет, где в левой колонке располагаются ссылки, а в правой колонке —
основной контент. Такая схема достаточно традиционна и привычна для пользователей,
поэтому также пользуется признанием среди разработчиков (рис. 1).
Рис. 1. Двухколонный макет с навигацией слева
Создание двух колонок происходит с помощью стилевого свойства float
со значением
left
, которое применяется для левой колонки. При этом одновременно следует
установить отступ слева для правой колонки, значение которого равно ширине
левой колонки плюс расстояние между ними (пример 1).
Приведенный способ создания колонок хорош тем, что ширину первого слоя можно
задавать как в пикселах, так и процентах. При этом поменяются только значения
свойств width
и margin-left
(пример 2).
Окончательный вариант создания макета приведен в примере 3.
Пример 3. Полный листинг
Байки из склепа
Байки из склепа
Все байки
Байки по автору
Байки по теме
Популярные разделы
Последние байки
Алтарь демона
Утром, при ярком солнечном свете, всё выглядело совсем не так и мрачно,
как планировалось, а даже наоборот. От свечей остались одни потёки, «кровь»
смотрелась как краска, а перья почти целиком разлетелись от ветра. Хорошо
сохранились только рисунки мелом, но и они были скорее прикольные, чем злые
и загадочные. Дети с неподдельным интересом разглядывали изображения, но
без тени тех чувств, которые испытали взрослые ночью при луне.
Тем не менее, оказался один человек, на которого работа произвела
большое впечатление, - сторож лагеря. Днём он подошёл к автору «алтаря».
Ваша работа? - начал сторож, кивая в сторону площади.
- А что такое?
- Ну, как же... Тут кровь..., перья птицы мёртвой..., знаки какие-то страшные
нарисованы..., а у вас всё же дети маленькие, они испугаться могут...
Copyright Влад Мержевич
При использовании отступов и полей помним, что браузер устанавливает
ширину слоя с учетом свойств width
, border
, padding
и margin
.
Влад Мержевич
Двухколонная модульная сетка достаточно часто применяется на сайтах, при этом,
как правило, в одной колонке располагается основной материал (текст статьи,
например), а во второй — ссылки на разделы сайта и другая информация. Для создания
подобного макета таблицы достаточно удобны — каждая ячейка выступает в качестве
отдельной колонки, что позволяет легко регулировать различные параметры отображения
документа.
Ширина колонок
Для начала рассмотрим самый простой вариант, когда ширина левой колонки жестко
задана в пикселах, а ширина правой колонки варьируется в зависимости от размеров
окна браузера. Для этого требуется задать общую ширину всей таблицы в процентах
через атрибут width
тега
и для первой ячейки установить ее ширину в пикселах или процентах также с помощью
атрибута width
, но уже для тега
(пример 1).
Пример 1. Ширина колонки в пикселах
Две колонки
Левая колонка
Правая колонка
В данном примере граница у таблицы не отображается, а вертикальное выравнивание
содержимого ячеек по верхнему краю определяется атрибутом valign
со значением top
. Это требуется для того, чтобы
при разном объеме содержимого ячеек, они не сдвигались бы относительно друг
друга, а начинались одинаково от верхнего края.
Атрибуты width
и valign
можно заменить стилевыми свойствами width
и vertical-align
с теми же значениями. Тогда данный код будет иметь следующий вид (пример 2).
Пример 2. Использование стилей
Две колонки
Левая колонка
Правая колонка
Поля внутри колонок
Расстояние между колонками регулируется атрибутом cellpadding
тега
. Поскольку cellpadding
определяет расстояние от границы ячейки до края ее содержимого, то пространство
между содержимым разных колонок будет равно удвоенному значению этого параметра.
Используя стили, в частности, свойство padding
,
можно легко регулировать значение отступа для каждой колонки (пример 3).
Пример 3. Использование полей
Две колонки
Левая колонка
Правая колонка
В данном примере значения атрибутов cellspacing
и cellpadding
равны нулю, а расстояние между содержимым
колонок определяется свойством padding-right
,
который добавляется к левой ячейке через идентификатор с именем leftcol
.
Аналогично отступы можно регулировать не только справа, но и с других сторон
каждой ячейки. В примере 4 показано, как устанавливать поля для всех ячеек
через стили.
Пример 4. Поля в ячейках
Две колонки
Левая колонка
Правая колонка
Цвет фона колонок
Чтобы визуально отделить одну колонку от другой используют разные приемы, самым
распространенным из них, пожалуй, является использование фонового цвета. Лучше
указывать цвет через стили, это позволяет вынести оформление страницы в отдельный
файл. Для этого создаем новый стилевой класс, устанавливаем для него свойство
background
и применяем его к требуемой ячейке (пример 5).
Пример 5. Цвет фона
Две колонки
Левая колонка
Правая колонка
В данном примере разный цвет фона добавляется для правой и левой колонки (рис. 1).
Рис. 1. Колонки разного цвета
Разделитель колонок
Использование полей не всегда подходит для установки нужного расстояния между
колонок. Например, в случае, когда поля вокруг текста нельзя включать в силу
разных соображений. Тогда поможет добавление еще одной ячейки, которая выступает
в качестве разделителя между колонками (пример 6).
Пример 6. Использование трех ячеек
Две колонки
Левая колонка
Правая колонка
В данном примере вводится еще одна колонка со стилевым идентификатором spacer
,
это позволяет легко менять ширину между колонками. Внутрь этой ячейки можно
ничего не вкладывать, браузеры достаточно корректно работают с подобными ячейками.
На рис. 2 показан результат примера. Для наглядности и «красоты» вокруг колонок
добавлена граница.
Линия между колонками
Разделять колонки можно не только с помощью цвета фона и пустого пространства,
но и добавлением линии между колонок. Опять же, здесь пригодятся стили, с помощью
которых создание линий значительно упрощается. Следует только установить свойство
border-left
для правой колонки или border-right
для левой (пример 7).
Пример 7. Добавление линии
Две колонки
Левая колонка
Правая колонка
Результат данного примера показан ниже.
Резюме
Создание колонок с помощью таблиц процесс достаточно простой и быстрый, следует
только добавить таблицу с двумя ячейками и определить ее визуальные атрибуты.
К тому же большинство параметров, определяющих вид таблицы, можно вынести в
стили и таким образом ускорить процесс добавления однотипных таблиц и документов
на их основе.
При двухколонном макете применяются разные средства по оформлению колонок.
Например, используется фоновая заливка, добавляется рамка вокруг колонок, изменяется
расстояние между ними или устанавливается вертикальная разделительная линия.
Все эти вещи управляются с помощью стилей, что ведет к сокращению кода, расширяет
варианты модификаций таблиц и удобству разработки сайта.
