Как с помощью CSS создать макет сайта из двух колонок

В данной статье мы поэтапно рассмотрим правила верстки веб-сайта с двумя колонками. Код, приведенный нами, сможет вам добавить шапку и подвал, охватывающие данные две колонки.

Вступление

Для выполнения заданий данной статьи вы должны иметь навыки написания кода как на HTML, так и на CSS. Если это не так, тогда вам лучше использовать визуальный редактор.

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

Использование свойства float для создания двух колонок

Существует много способов использования CSS для создания веб-сайта с двумя колонками. В данном руководстве мы применим свойство float, чтобы разместить один столбец сбоку от иного. Во многих отношениях этот способ более простой и гибкий, чем способ абсолютного позиционирования элементов. Он также может добавить по желанию шапку и подвал, охватывающие данные две колонки.

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

Базовый HTML код для веб-сайта с двумя колонками

HTML часть кода довольно проста. Нам необходимо только два блока div, по одному для каждого столбца:

<div id="container"> <div id="content">Контент</div> <div id="navbar">Меню навигации</div></div>

Слова «Меню навигации» и «Контент» являются лишь указателями для боковой панели навигации и основного контента. Позже вы удалите данные слова, когда расположите в блоках реальный контент. div «container» — это блок, содержащий два столбца. Его можно без проблем использовать, если необходимо применить определенные стили к обоим столбцам.

CSS-код для веб-сайта с двумя колонками

Приведенный ниже CSS программный код использует проценты( «%») для определения ширины обеих колонок. Поскольку они измеряются в относительных единицах, то будут расширяться или сжиматься, чтобы заполнить все окно браузера независимо от того, какую ширину оно имеет в себя. Например, если вы измените размер окна браузера, шаблон перестроит столбец так, чтобы он максимально соответствовал границам окна.

Код CSS прост:

#content { float: right; width: 80%;}#navbar { float: right; width: 20%;}

Согласно правилам верстки веб-сайта, код CSS должен размещаться в разделе стилей веб-страницы или во внешнем файле.

Как приведенный выше программный код работает на практике, можно увидеть здесь.

Как это работает: пояснения к CSS-коду

Правило « float: right » определяет, как блок DIV отображается из общего потока документа, а также размещается справа от всех иных элементов, обтекающих его слева. Первый блок DIV, который встречается на HTML-странице, смещается в первую очередь.

В приведенном выше примере « #content » первым сдвигается вправо и для него задается ширина в 80% от ширины окна браузера. Наше следующее правило также отображает « #navbar » из потока документа и смещает его вправо.

Поскольку у нас есть плавающий элемент в таком положении. Согласно заданным правилам адаптивной верстки, второй блок помещается слева от существующего элемента, если для него есть достаточно пространства. Иначе он будет размещен под первым элементом. С учетом этого сумма сторон обоих блоков должна быть равна 100% или менее, иначе у нас не будет достаточно места, чтобы разместить их рядом.

Как разместить колонку навигации справа

Приведенный ранее код размещает меню навигации в левой колонке. Если необходимо, чтобы меню навигации размещалось справа, измените код следующим образом:

#content { float: left; width: 80%;}#navbar { float: left; width: 20%;}

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

Как корректно настроить ширину

Согласно установленным техническим правилам верстки, приведенные выше стили, задают для боковой колонки ширину в 20% от ширины окна браузера, а для колонки содержимого — 80%, что в сумме дает 100%.

Если вы хотите настроить данные значения, убедитесь, что их общая сумма равна или меньше 100%, иначе браузер поместит одну колонку ниже другой.

Если одна из колонок смещается ниже другой: как это исправить

Если вы обнаружили, что одна из колонок помещается под другой вместо того, чтобы располагаться бок о бок, это означает, что общая ширина обеих колонок составляет более 100% от ширины окна браузера.

Это может произойти, даже если вы используете мои значения « 20% » и « 80% «. К примеру, если добавить поля ввода, рамки и отступы для одной или обеих колонок. Ширина данных столбцов также увеличится, что приведет к тому, что общая сумма будет превышать 100%.

Кроссбраузерность и правила верстки подразумевают два метода решения данной проблемы:

  • Уменьшить значение ширины колонок, пока браузер не выведет их так, как вы планируете. Но помните, что проценты являются относительной единицей измерения. Она привязана к ширине окна браузера посетителя. Так что, если вы тестировали макет на вашей системе, и обнаружили, что при добавлении к padding-left 10 px к одной из колонок и уменьшении ширины на 1%, все работает прекрасно, то нельзя делать отображение, что 1% = 10 пикселей. Другими словами, 1% от 1024 пикселей отличается от 1% от 1920 пикселей, и так далее. Убедитесь, что вы учитываете различия ширины окна в иных браузерах и диагоналях экрана;
  • Решение, которое предпочитаю я, заключается в том, чтобы создать внутри блоков « #navbar » и « #content » вложенный DIV, и поместить в него все отступы, поля ввода, рамки и фактический содержимое. Таким образом, для внешних блоков можно легко оставить старые 20% и 80%, не заботясь о поправках на поля ввода, отступы и т.д.

К примеру, в демо-сайте с двумя колонками используется следующий HTML-код для создания вложенного блока DIV:

<div id="container"><div id="content"> <div id="innercontent"> Содержимое </div></div><div id="navbar"> <div id="innernavbar"> Меню навигации </div></div></div>

К написанным ранее стилям CSS добавьте следующие свойства для « #innercontent » и « #innernavbar «:

#innercontent { padding-left: 10px; padding-right: 10px;}#innernavbar { padding-left: 5px; padding-right: 5px;}

CSS для « #content » и « #navbar » остаются такими же, как описано в первой половине данной статьи.

Поскольку отступ применяется к внутреннему блоку DIV, размеры наружных блоков остаются неизменными, и у нас сохраняется макет с двумя колонками.

Как добавить шапку и подвал веб-сайта, растягивающиеся на обе колонки

Некоторые веб-сайты содержат шапку, охватывающую по ширине обе колонки. Согласно существующим правилам верстки веб-сайта, в ней можно без проблем разместить логотип, заголовок веб-сайта или даже рекламные баннеры. Некоторые ресурсы также содержат подвал, который охватывают обе колонки. Кроме этого подвал может быть использован для таких элементов, как уведомления об авторских правах.

Чтобы создать шапку и подвал, используя макет с двумя колонками, измените HTML-код и добавьте два дополнительных блока DIV:

<div id="container"> <div id="header">Шапка</div> <div id="content">Содержимое</div> <div id="navbar">Меню навигации</div> <div id="footer">Подвал</div></div>

Добавьте следующий код CSS в существующую таблицу стилей. Поместите его после стилей, которые были заданы ранее:

#footer { clear: both;}

Если вы хотели бы, чтобы текст в шапке выравнивался по центру, добавьте следующий код. Иначе отдельно задавать стиль шапки нет необходимости:

#header {  text-align: center;}

То же свойство можно добавить к подвалу, чтобы текст в нем выравнивался по центру.

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

Заключение

При помощи приведенного выше кода CSS вы сможете самостоятельно создавать веб-сайты с двумя колонками.

Добавить комментарий

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