Отличительной особенностью полиграфического дизайна является повсеместное применение колоночной верстки. И тому есть веские основания.
Во-первых, глаз лучше воспринимает строки текста состоящие из 8 до 12 слов. Во-вторых, можно гораздо лучше организовать колонки и уменьшить количество пустого пространства на странице. Долгое время это являлось исключительным преимуществом полиграфии. В вебе же приходилось всячески извращаться. Но теперь CSS3 позволяет создавать колоночную верстку без использования JavaScript.
Колоночная модель
Спецификации W3C определяют несколько новых свойств, позволяющих задавать колонки в HTML-верстке. Теперь как и в полиграфии можно задать ширину колонок, их количество и даже некоторые правила поведения.Существенным в спецификации является то, что у колоночного элемента должны быть явно указано значение количества колонок и/или ширина колонок. Браузеры должны отображать колоночные элементы образом схожим с отображением таблиц, но содержимое будет распределяться по колонкам динамически.
На настоящий момент, нет возможности определять свойства отдельных колонок (например, цвет отдельной колонки). Будем надеяться, что после того, как все текущие предложенные в реализацию свойства будут реализованы, появятся и свойства управления колонками.
Количество и ширина колонок
Для создания колоночного элемента необходимо задать свойства сolumn-count и/или column-width .column-count
По-умолчанию, column-count имеет значение auto . Т.е. если задать column-width , браузер самостоятельно вычислит количество колонок необходимое для отображения многоколоночного элемента. Такое поведение не всегда удобно, потому зададим количество колонок, в которых находится контент..column
{
-webkit-column-count :2 ;
-moz-column-count :2 ;
}
column-width
Как сказано выше, можно задать ширину колонок не указывая количество колонок, а браузер вычислит его динамически. Ширину колонок можно указывать любыми единицами измерения доступными в CSS: em, px, %..column
{
-webkit-column-width :15em ;
-moz-column-count :15em ;
}
Конечно же можно комбинировать column-width и column-height :
.column
{
-webkit-column-count :2 ;
-moz-column-count :2 ;Webkit-column-width :15em ;
-moz-column-width :15em ;
}
Интервалы и линейки
Если полиграфические дизайнеры привыкли думать в терминах колонок и интервалов, то веб-дизайнеры были вынуждены работать с границами и отступами.Интервал колонки – это именно то, что написано, размер пустого свободного пространства между колонками, указанный в единицах CSS.
colomn-gap
Спецификация W3C определяет значение интервала по-умолчанию в 1em, в примере мы и будем его использовать:.column
{
-webkit-column-gap :1em ;
-moz-column-gap :1em ;
}
column-rule
Линейка тоже пришла из полиграфии. Изначально, линейки – это тонки линии между колонками, облегчающие чтение или разделяющие отдельные рассказы. CSS3 предоставляет три различных свойства настройки линейки: column-rule-size , column-rule-style и column-rule-color , а можно использовать column-rule для указания всех трёх свойств.Как вы уже наверно догадались, могут использоваться все обычные единицы измерения, стили и цвета:
.column
{
-webkit-column-rule :1em solid #000 ;
-moz-column-rule :1em solid Black ;
}
Приколы использования
На текущий момент семейство свойств column поддерживаются браузерами на основе WebKit или Mozilla.Как вы уже заметили, в коде используются модификаторы движков. Если не указать модификатор, то даже поддерживающие браузеры проигнорируют свойства column-xxx.
Что будет если колонки ограничить по высоте
Браузер добавит колонок, чтобы уместить текст.Спасает overflow :hidden .
Отображение линейки в одной колонке
Если текст умещается в одной колонке, Mozilla не рисует линейку, а WebKit рисует.WebKit:
Mozilla:
Свойства, которые есть в спецификации, но не поддерживаются
Это свойства column-break и column-span .Первое задумано как указатель того, что необходимо начать следующую колонку. Например перед тегами h2.
.column h2
{
column-break-before :always ;
}
Второй позволяет отобразить элемент через все колонки, наподобие газетной врезки.
.column h1
{
column-span :all ;
}
Заключение
Спектр применения свойств column пока еще очень узок. Даже не из-за того, что не все браузеры их поддерживают (Mozilla + WebKit дают уже более половины рынка), а по причине неполной реализации функций. Хотя функционал вполне интересный и заслуживает внимания.Исходя из этих требований я однажды нашел для себя очень хороший способ, немного доработал его и добавил ему несколько параметров, чтобы добиться гибкости при верстке адаптивных страниц. Использую его долго, и сегодня я поделюсь ним с Вами, возможно кому-то он пригодится. И так приступим к верстке трехколоночного сайта!
Первым делом нам надо разобрать структуру, как все будет на нашем сайте. Для начала я покажу сам код, а уже после разберем, что и как. Ниже пример, также попробуйте менять размер окна, чтобы увидеть как себя ведет структура.
Сам HTML код структуры:
По коду видно, что шапка и подвал не зависимы. То есть они не заключены в какие-то контейнеры, то-есть если у вас сайт будет иметь определенную ширину, то шапку и подвал нужно отдельно центрировать, дабы они не съехали. Забегу наперед, в моем примере контент будет шириной 1170пикселей и поэтому я в стилях подвалу и шапке задам эту же ширину и выровняю по центру.
Сам контент вместе с сайдбарами, заключен в общий контейнер, который имеет айди - wrapper . Далее контент, который располагается по центру и имеет айди - content , заключается в еще один контейнер с айди - main . Это обязательно, чтобы в будущем получилась адаптивность.
После контента рядом располагаются два сайдбара - левый с айди - left_side и правый с айди - right_side .
Чтобы все правильно отображалось, нужно добавить стили CSS:
Header{ max-width:1170px; margin:0 auto; } footer{ max-width:1170px; margin:10px auto 0; clear:both; } #wrapper{ max-width:1170px; margin: 0 auto; position:relative; height:100%; } #main{ float:left; width:100%; } #left_side{ width:240px; margin-left:-100%; float:left; } #content{ margin:0 440px 0 250px; } #right_side{ float:left; width:430px; margin-left:-430px; }
Как и говорил, подвал и шапка отдельно и у них своя центрация. Основная ширина всего сайта будет 1170 пикселей, но вы конечно же можете поменять ее, в зависимости от нужд.
Так же сайдбары имеют фиксированную ширину, а при уменьшении размера окна браузера, уменьшается средняя колонка - контент. Если будете менять ширину сайдбаров, меняйте свойство margin у контента, чтобы задать правильные отступы.
Важным моментом является свойство у подвала - clear:both; . Если его убрать, то подвал подпрыгнет вверх к шапке, а это нам не нужно вообще. Если Вам нужно будет сделать отступ между контентом и подвалом, то можете между ними добавить еще один div-блок и ему прописать свойство clear:both; , а у подвала убрать его и задать отступ. Например:
//Блок
//Стили.clear{clear:both;}Теперь добавим стилей CSS уже для правильного отображения сайдбаров и контента на мобильных устройствах, то есть добавим адаптивности нашей версте.
@media (max-width: 950px){ #left_side{ position:relative; margin:0; width:48%; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease; } #content{ width:98%; margin:0 auto; position:relative; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease; } #right_side{ position:relative; float:right; margin:0; width:48%; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -ms-transition: all 0.8s ease; transition: all 0.8s ease;} } @media(max-width: 500px){ #left_side{width:99%;} #right_side{width:99%;} }У меня указаны параметры для ширины сначала - 950px, потом - 500px.Если Вы будете менять ширину контента или всего контейнера, то можете поменять значения на свои, не забывайте про это и просчитывайте правильно, чтобы потом не возникло проблем.
В принципе тут все просто, а основной объем занимает свойство transition. Сделано это для плавной анимации при смене размера окна. Если Вам это не нужно то можете удалить его полностью со всех айди.
Поняв суть того, как это работает, Вы с легкостью будете верстать адаптивные страницы с тремя колонками, которые имеют два сайдбара с контентом посредине.
На этом все, спасибо за внимание. 🙂
19.07.16 2.9KВ этой статье мы поэтапно рассмотрим правила верстки сайта с двумя колонками. Код, приведенный нами, позволит вам добавить шапку и подвал, охватывающие эти две колонки.
Вступление
Для выполнения заданий этой статьи вы должны иметь навыки написания кода как на HTML , так и на CSS . Если это не так, тогда вам лучше использовать визуальный редактор.
Обратите внимание, что вы вовсе не должны быть экспертом в HTML или CSS . Вам просто нужно иметь базовые знания этих технологий, иначе эта статья будет вам непонятна.
Использование свойства float для создания двух колонок
Существует много методов использования CSS для создания сайта с двумя колонками. В данном руководстве мы применим свойство float , чтобы разместить один столбец сбоку от другого. Во многих отношениях этот метод более простой и гибкий, чем метод абсолютного позиционирования элементов. Он также позволяет добавить по желанию шапку и подвал, охватывающие эти две колонки.
Я сам не использовал этот метод, потому что макет моего ресурса создавался тогда, когда я еще только делал первые шаги в разработке на CSS и ничего не знал об основных правилах верстки. Но не волнуйтесь. Я создал несколько демо-страниц, использующих этот формат, их вы сможете увидеть позже.
Базовый HTML код для сайта с двумя колонками
HTML часть кода довольно проста. Нам нужно только два блока 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 :
К написанным ранее стилям CSS добавьте следующие свойства для «#innercontent » и «#innernavbar «:
#innercontent { padding-left: 10px ; padding-right: 10px ; } #innernavbar { padding-left: 5px ; padding-right: 5px ; }
CSS для «#content » и «#navbar » остаются такими же, как описано в первой половине этой статьи.
Так как отступ применяется к внутреннему блоку DIV , размеры наружных блоков остаются неизменными, и у нас сохраняется макет с двумя колонками.
Как добавить шапку и подвал сайта, растягивающиеся на обе колонки
Некоторые сайты содержат шапку, охватывающую по ширине обе колонки. Согласно существующим правилам верстки сайта, в ней можно разместить логотип, заголовок сайта или даже рекламные баннеры. Некоторые ресурсы также содержат подвал, который охватывают обе колонки. Кроме этого подвал может быть использован для таких элементов, как уведомления об авторских правах.
Пропустим ту часть, где я говорю, что меня зовут Рималь и то, что я увлекаюсь версткой дизайна для сайтов, а именно HTML & CSS.
Также пропустим ту часть, где я рассказываю, что у меня была мечта создать идеальный шаблон с 100 % адаптацией и кроссбраузерностью.
На просторах интернета я не нашел нормального объяснения о создании N-колоночных блоков сайта, всегда и везде был кривой и некрасивый код.
Наша цель - сделать трехколоночный сайт, блоки которого будут:
- Уменьшаться в зависимости от размера экрана (т.е. не будут уходить вниз);
- Растягиваться по всей ширине экрана (обычно это 2-х колоночный сайт);
- Адаптироваться при уменьшении заданных размеров.
Итак, приступим. Для того, чтобы сделать горизонтальные 3 колонки, мы будем использовать свойство display: inline-block . Да-да, свойство float уже не так актуально, но оно нам все же понадобится.
Прежде чем задать им свойства, создадим 3 блока, обернув их в классы main и inline :
Результат:
Размер окна больше 900px
Размер окна меньше 900px
Иногда нужно, чтобы дизайн сайта не сразу адаптировался под конкретные размеры, т.е. не исчезали какие-либо части сайта, а сохранялся весь функционал, просто с уменьшением их размера.
Для того, чтобы растянуть дизайн на всю ширину экрана, достаточно удалить свойство max-width:700px в классе main.
Чтобы дизайн полностью не уменьшался при малых размерах окна, а адаптировался, добавляем в стили @media запрос:
/* Простой пример @media запроса*/ @media (max-width:600px) { .inline div { display:block; /* Делаем блоки “Блочными”, т.е. друг под другом */ width:100%; /* Задаем на всю ширину экрана */ height:100px; } }
Более подробно можно посмотреть на JS Fiddle - приветствуется любое изменение кода в лучшую его сторону.
За материал выражаем благодарность нашему подписчику,
В продолжение своего топика предлагаю вам перевод статьи с более глубоким погружением в свойство многоколоночности с простыми и наглядными примерами.
Еще газетами и журналами на практике доказано, что разбитый на несколько колонок текст воспринимается намного проще. На веб-страницах до недавнего времени отобразить контент таким образом было проблемой, доходило до того, что верстальщик разделял текст на несколько div"ов. Но все может стать намного проще с CSS3 Multi Column Module.
Создание контента, разбитого на несколько колонок
Используем HTML5-тег article :
Разбиваем текст на две колонки:
Article { -webkit-column-count:2; -moz-column-count:2; column-count:2; }
При помощи свойства column-width можно задать колонкам необходимую ширину:
Article { -moz-column-width: 150px; -webkit-column-width: 150px; column-width: 150px; }
Интервал между колонками
Интервал задается свойством column-gap в px или em, и не может быть отрицательным:
Article { -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; }
Разделитель колонок
Свойство column-rule позволяет добавлять разделитель между колонками, принцип работы схож с border .
Article { -moz-column-rule: 1px dotted #ccc; -webkit-column-rule: 1px dotted #ccc; column-rule: 1px dotted #ccc; }
Объединение колонок
Свойство column-span работает аналогично с colspan в table , объединяя нужные колонки.
Article h1 { -webkit-column-span: all; column-span:all; }
