Макет из 2-х колонок

Макет из 2-х колонок Сетка, состоящая из двух колонок, часто используется в сайтостроении, при этом в одной колонке размещается основная информация, а во второй – дополнительный контент (ссылки, реклама и т.д.).

Ширина колонок

Данный параметр можно указывать независимо от того в какой колонке будет размещен основной или дополнительный контент. Например, чтобы задать фиксированную ширину (в % или рх) для левой колонки и «плавующую» для правой колонки, зависящую от окна браузера, то для этого используют атрибут width в теге <table> (для всей таблице) и в теге <td> (для первой ячейки).

Содержимое ячеек лучше выравнивать по вертикали с помощью атрибута valign, в котором будет прописано значение top. Данный способ позволит сделать так, чтобы содержимое ячеек начинались от верхнего края и не сдвигались.

Цвет фона колонок

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

Макет из 2-х колонок Разделитель колонок

Расстояние между колонками можно создавать с помощью полей, но этот способ не совсем удобен, например, когда поля, находящиеся вокруг контента, нельзя включать из-за разных нюансов. Здесь помочь добавление дополнительной ячейки, которая будет сложить разделителем колонок. Или же можно добавлять еще одну колонку, задав ей имя spacer, и спокойно менять расстояния между колонок.

Линия между колонок

Колонки можно разделять не только пустым пространством и фоновым цветом, но и при добавлении линий. Для этого каждой колонке необходимо прописать свойство – для левой border-right, а для правой border-left.

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

Добавить комментарий:
Имя:
E-mail:
2018 © Обсуждение Joomla и других CMS-систем управления сайтами  Правила | О проекте | Обратная связь