С появлением великого множества экранов разных размеров и разрешений, стало невероятно непрактично создавать дизайны с фиксированными блоками текста, которые занимают всю ширину экрана. Традиционный подход заключается в разделении текста на две колонки, и часто это реализуется вручную, и требует существенных временных затрат. Либо текст разделяется при помощи javascript, который подходит не для всех ситуаций. Кроме того, у нас ведь должна быть возможность реализовать это при помощи CSS, не прибегая к использованию сеточных систем или плавающих элементов, разве нет?

CSS3, на самом деле, предоставляет вам возможность разделить текст на несколько колонок, а также выставить размер канавок (расстояние между колонками), и таким образом, вы можете получить полный контроль над колонками, вместо того, чтобы использовать фреймворк или сеточную систему.

Кроме того, CSS3 предоставляет отличные запасные варианты на случай, когда пользователь использует, к примеру, Netscape Navigator – верстка вашего сайта по-прежнему будет выглядеть замечательно.

Браузерная поддержка

Важно отметить, что, несмотря на то, что практически все современные браузеры поддерживают множественные колонки на CSS3 (да-да, даже IE10), многие предыдущие браузеры вроде IE9 не предоставляют такой поддержки. Хотя поддержка довольно хорошая, вам, возможно, придется использовать браузерные префиксы для webkit (-webkit-) и mozilla (-moz-). Тем не менее, вам не придется использовать -ms- или -o- для IE и Opera, так как они оснащены либо полной поддержкой, либо частичной.

Данное CSS-свойство дает вам довольно много параметров контроля над тем, как ваш контент выводится в окне браузера, и давайте познакомимся с этими параметрами:

* column-count : здесь вы можете указать количество колонок, которое должно быть отображено в элементе.
* column-width : ширина отдельной колонки. Будьте готовы к тому, что иногда браузеры самостоятельно изменяют это значение.
* column-gap : ширина бороздки между колонками.
* column-rule-width : это нечто вроде границ ваших колонок, и здесь вам нужно указать ширину именно границы.
* column-rule-style : тоже что-то вроде границы, если вам потребуется выставить стиль.
* column-rule-color : этот параметр нужен для указания цвета.
* column-span : это значение сообщает браузеру о том, сколько колонок вы хотите объединить – его хорошо использовать для заголовков, и работает оно как colspan и rowspan в таблицах.

Имея все эти опции, нам не кажется, что понадобится что-то еще для управления колонками. Конечно же, для нормальной работы нескольких колонок нам не обязательно нужны все эти параметры. Более того, в основном, нам нужен лишь параметр column-count, но вы наверняка всегда будете использовать также column-gap, чтобы текст колонки не сливался с ее границами.

Чтобы реализовать это на практике, нам понадобится всего пара строк кода:

/* This will produce a 3 column layout with a gap of 20px between each column */
.cols3 {
column-count: 3;
column-gap: 20px;
}
Если вы также хотите применить к колонкам правило, то вам нужно будет добавить эти параметры:

/* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */
.cols3 {
column-count: 3;
column-gap: 20px;
column-rule-width: 1px;
column-rule-style: solid;
column-rule-color: #000;
}
Как и в широко известном параметре border, вы можете применять цвет, стиль и ширину следующим образом:

Cols3 {
column-count: 3;
column-gap: 20px;
column-rule: 1px solid #000;
}
Если у вас есть заголовок, и вам нужно, чтобы этот заголовок простирался на всю ширину всех колонок, то вам нужно добавить следующую строку кода:

/*This h1 will take up the space of the 3 columns*/
.cols3 h1{
column-span: all;
}
Вы можете применить этот метод практически к любому HTML-коду, от отдельного абзаца до нескольких "div"-элементов. Давайте рассмотрим демо:

А сейчас хотим предложить вам завершенный код данного эффекта:

CSS3 column demo

Cols3 {
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #000;

Moz-column-count: 3;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #000;

Column-count: 3;
column-gap: 20px;
column-rule: 1px solid #000;
}

Cols3 h1 {
-webkit-column-span:all;
-moz-column-span:all;
column-span:all;
}

Integer posuere erat a ante

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur.

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

Curabitur blandit tempus porttitor. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor.

Завершение

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

Стилизуете ли вы колонки при помощи CSS3, или до сих пор используете плавающие элементы и позиционирование? Какие методы вы используете, чтобы обойти проблемы, возникающие в старых браузерах? Поделитесь с нами в комментариях.

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

С помощью плавающих блоков. Сегодня это самый популярный способ сделать колонки, хотя потихоньку его начинает теснить флексбокс. По умолчанию два блока в нормальном потоке не могут стоять на одной строке, но это поведение можно легко изменить, прописав обоим свойство float: left | right. Они начнут прижиматься к левому или правому краю. Чтобы идущий за ними блок воспринял плавающие блоки и разместился правильно, ему нужно прописать clear: both.

С помощью флоатов чаще всего делают 2 или 3 колонки. Верстка сайта с плавающими блоками не очень сложна, нужно знать всего лишь некоторые нюансы их поведения. Например, если вам нужно сделать область для вывода статей, а справа – боковую колонку с меню, то плавающие блоки очень легко реализуют такое расположение.

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

Поскольку ячейкам в таблице можно задавать любые размеры, раньше с их помощью верстали почти все сайты. Например, для реализации простейшего макета (шапка, контент, сайдбар, футер), в таблице делали три строки (строка таблицы формируется тегом tr). Каждая строка содержит две ячейки, потому что контент и сайдбар должны располагаться отдельно друг от друга. А в шапке и футере эти ячейки просто соединяли с помощью атрибута colspan у тега td, если это было необходимо.

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

С помощью флексбокса. Это современная технология, которая начала распространяться в 2014 году, хотя существовала и до этого. Ее суть заключается в следующем: создается один общий блок контейнер, в который помещаются другие блоки, которые нужно будет сделать в виде колонок, потом этому контейнеру нужно прописать display: flex.

Далее обычно задается свойство flex-direction, которое определяет направление главной оси, по которой будут расположены блоки. В качестве значений можно задать: row и column. Первое значение направит блоки по горизонтали справа налево, второе – вниз. Также можно задать реверс: flex-direction: row-reverse. Блоки расположатся справа налево.

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

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

Тем не менее, я до сих пор не затронул самую главную тему. CSS сегодня предлагает возможность разбить текст в основном блоке без помощи плавающих блоков, таблиц или флексбоксов. То есть в html остается один обычный блок, а текст делится на колонки исключительно благодаря css.

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

Column-count – свойство задает количество колонок, на которое нужно разбить текст. Рекомендуется выставлять значение от 2 до 4, в зависимости от того, как вам больше нравится.

Column-width – задает количество символов текста в одной колонке. Я подчеркиваю, ширина колонки в данном случае задается не пикселами, а количеством символов. Оптимально: 30-50 символов в одной колонке. Также это свойство никак нельзя назвать кроссбраузерным, потому что вы выставляете только желаемое количество символов, но поступит ли браузер в согласии с вашими пожеланиями, это еще неизвестно.

Column-gap – определяет промежуток между колонками. Можно задавать в пикселях.

Column-rule – рисует линию, разделяющую колонки. Синтаксис свойства полностью повторяет свойство border. Сначала записывается толщина линии, потом ее тип, а потом цвет.

Также я хотел бы упомянуть, что все эти css-свойства являются относительно новыми. Например, Internet Explorer поддерживает их только с десятой версии. Это свойства из стандарта CSS3, поэтому если вы их собираетесь применять на своем сайте, то нужно позаботиться о кроссбраузерности, иначе в старых версиях оперы и IE никаких колонок не будет.

Плавающие блоки. Верстка сайта в две колонки чаще всего делается очень просто с помощью плавающих блоков. В css это реализуется примерно так:

Float-block1{ float: left } .float-block2{ float: left } блок, который должен стоять ниже плавающих{ clear: left | both }

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

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

Пропустим ту часть, где я говорю, что меня зовут Рималь и то, что я увлекаюсь версткой дизайна для сайтов, а именно HTML & CSS.

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

На просторах интернета я не нашел нормального объяснения о создании N-колоночных блоков сайта, всегда и везде был кривой и некрасивый код.

Наша цель - сделать трехколоночный сайт, блоки которого будут:

Итак, приступим. Для того, чтобы сделать горизонтальные 3 колонки, мы будем использовать свойство display: inline-block . Да-да, свойство float уже не так актуально, но оно нам все же понадобится.

Прежде чем задать им свойства, создадим 3 блока, обернув их в классы main и inline :

left content right

html, body {margin:0;padding:0;} .main { margin:0 auto; /* Центрируем блоки */ width:100%; /* Задаем ширину 100%, чтобы сделать ее резиновой */ max-width:700px; /* Устанавливаем максимальную ширину */ } .inline div { display:inline-block; /* Делаем блоки по горизонтали */ display: -moz-inline-stack; /* Для FireFox 2, тот же самый, что и inline-block */ vertical-align:top; /* Выравниваем их сверху */ font-size:16px; /* Ставим дочкам размер шрифта, иначе примет значение родителя */ /* Для IE 6 и IE 7, чтобы блоки были по горизонтали zoom: 1; *display: inline; */ } div.inline {font-size:0;} /* Ставим родителю значение 0, чтобы убрать отступы у блоков*/ .left-block { background:red; width:20%; /*Задаем ширину в процентах чтобы сделать ее резиновой*/ height:300px; /* Высота блока */ } .content { background:green; width:60%; height:300px; } .right-block { background:blue; width:20%; height:300px; }

Результат:

Размер окна больше 900px

Размер окна меньше 900px

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

Для того, чтобы растянуть дизайн на всю ширину экрана, достаточно удалить свойство max-width:700px в классе main.

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

/* Простой пример @media запроса*/ @media (max-width:600px) { .inline div { display:block; /* Делаем блоки “Блочными”, т.е. друг под другом */ width:100%; /* Задаем на всю ширину экрана */ height:100px; } }

Более подробно можно посмотреть на JS Fiddle -  приветствуется любое изменение кода в лучшую его сторону.

За материал выражаем благодарность нашему подписчику,

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

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

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

Так как в Internet Explorer 6 возникают проблемы с этим способом создания колонок одинаковой высоты, то для него было использовано несколько хаков :

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

сайт - колонки одинаковой высоты, фоновое изображение html, body { height: 100%; margin: 0; padding: 0; } body { font-size: 2em; color: #000; background: #fff; } #wrapper { width: 1000px; min-height: 100%; height: auto !important; height: 100%; background: url("images/back_column.png") repeat-y; /* фоновое изображение для обертки */ position: relative; margin: 0 auto; } #header { background: #fc0; } #menu { width: 250px; background: #0fc; float: left; padding-bottom: 100px; } #sidebar { width: 200px; float: right; background: #c0f; padding-bottom: 100px; } #content { background: #eee; margin: 0 200px 0 250px; padding-bottom: 100px; } .clear { clear: both; } #footer { width: 100%; height: 100px; position: absolute; bottom: 0; color: #fff; background: #000; } Шапка Меню Сайдбар Контент Футер

Фоновое изображение, которое использовалось в примере можно увидеть . Именно с помощью него была создана видимость колонок одинаковой высоты.

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

сайт - колонки одинаковой высоты, поля и отступы html, body { height: 100%; margin: 0; padding: 0; } body { font-size: 2em; color: #000; background: #fff; } #wrapper { width: 1000px; min-height: 100%; position: relative; overflow: hidden; /* обрезаем все ненужное */ margin: 0 auto; } #header { background: #fc0; } #menu { width: 250px; background: #0fc; float: left; padding-bottom: 30000px; /* нижний отступ для меню */ margin-bottom: -29900px; /* нижнее поле для меню */ } #content { width: 550px; background: #eee; float: left; padding-bottom: 30000px; /* отступ */ margin-bottom: -29900px; /* поле */ } #sidebar { width: 200px; background: #c0f; float: left; padding-bottom: 30000px; /* отступ */ margin-bottom: -29900px; /* поле */ } .clear { clear: both; } #footer { width: 100%; height: 100px; position: absolute; bottom: 0; color: #fff; background: #000; } Шапка Меню Контент Сайдбар Футер

Этот метод кроссбраузерный и его понимают все, включая Internet Explorer 6. А вот совместно со способом, которым прижимался футер, он отказывается корректно работать. Я не стал придумывать очередные «костыли» для этого старичка, а наоборот убрал пару свойств, помогающих ему прижать футер. Поэтому при добавлении в колонки содержимого - в IE6 все тянется, как положено.

Вы конечно же видели на некоторых сайтах запрет на использование правой кнопки мыши. Эта функция прежде всего борется с теми, кто хочет украсть ваш контент. Полностью от воровства вас не защитит эта мера, но от ручного копирования вполне. Другие варианты .
Не рекомендую отключать правую кнопку мыши, если вы выкладываете в своем блоге материалы, предназначенные для копирования. Это могут быть коды, скрипты, кулинарные рецепты, справочные материалы и другое. Запрет на копирование в данном случае отвернет от вас посетителей, и ваш блог станет менее полезным для посетителей. Если вам важна защита от плагиата, то тогда лучше используйте добавление вашего url в конце копии. Тогда вы будете уверены, что если кто-то захочет опубликовать в другом месте в интернете, скопированное у вас, то копипастер с большей вероятностью поделится ссылкой на ваш блог.
Этот рецепт подходит для любого веб-сайта. Вам нужно лишь вставить код на все страницы вашего блога:

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

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

Я надеюсь, что воспользовавшись одним из этих генераторов, вы сможете достойно поздравить своих дам с 8 марта!

Содержание статьи:

Подтвердите переход на и задайте свое имя или никнейм.

Не забудьте загрузить аватар в вашем профиле Blogger.

Сегодня расскажу что такоеCSS3, с чем его едят, где его искать, как правильно его прописывать. Предупреждаю, буду рассказывать от себя, упрощенно для широкой публики, как я это вижу + примеры. Итак, начнем издалека.
CSS – это стили, в которых прописываются свойства объекта. Значит, они есть во всех существующих движках, если вы их не можете найти, значит либо не там смотрите, либо их действительно нет (кривой сайт ). Где же они обычно найти? Обычно это корень сайта, название файла style.css, хотя, в принципе, название не так важно, как расширение.css, если файл с таким расширением – это файл стилей.
Смотрите также на моём блоге.