CSS верстка. Раскрашиваем колонки на странице.
В этой статье я покажу, как задать цвета фона для страницы с несколькими колонками. Допустим, у нас есть web страница, изображенная на скриншоте. Как видите, она состоит из заголовка, основной части, которая включает три колонки, и хвостовика.
Нам нужно чтобы центральная колонка имела один цвет фона, а правая и левая – другой.
Решить задачу «в лоб», т.е. воспользоваться свойством background-color каждой из колонок, не получится. Так как колонки неодинаковой высоты, которая может изменяться, и заранее неизвестна. А фон, естественно, должен распространяться на всю высоту колонки, от заголовка до хвостовика.
Поэтому мы используем другой метод. Зададим фоновый цвет только для центральной колонки, а две другие оставим прозрачными. В этом случае их фон будет определяться фоном контейнера (в данном случае это тег <body>), который мы спокойно можем изменять.
Этот прием сработает, только если центральная колонка будет самой длинной. Посмотрим, как это обеспечить.
Прежде всего, взгляните на разметку страницы.
Заметьте, что внутри блока middlebar (центральная колонка) находится еще один блок – mfooter.
Установим для правой и левой колонок правила float: right и float: left. Это «вырвет» их из потока документа, и центральная колонка будет начинаться сразу после заголовка. Теперь для блока mfooter установим правило clear: both, т.е. браузер расположит его ниже правой и левой колонок. Т.к. mfooter находится внутри middlebar, то центральная колонка тоже будет заканчиваться ниже любой из других колонок.
Примечание: подробнее прием растягивания центральной колонки описан в статье «Верстка в две колонки с разделителем».
-
#rightbar {
-
margin: 0;
-
float: right;
-
width: 30%;
-
}
-
-
#leftbar {
-
margin: 0;
-
float: left;
-
width: 20%;
-
}
-
-
#middlebar {
-
margin: 0px 35% 0px 25%;
-
background-color: #d6d279;
-
}
-
-
#mfooter {
-
clear: both;
-
}
В таблице стилей мы задали ширину левой и правой колонок. А также отступы и цвет фона центральной колонки.
Теперь осталось задать цвет фона тега <body>
-
body {
-
margin: 0;
-
background-color: #b8a928;
-
}
И все. Колонки раскрашены в нужные цвета.
Вы можете скачать архив с этим примером.
В следующий раз мы рассмотрим, как задать для каждой колонки свой собственный цвет фона.
Понравилась статья? Подпишитесь на продолжение 
!
Добавьте эту страницу в 
Комментариев нет
Вы можете отслеживать обсуждение записи с помощью RSS 2.0
Вы также можете оставить комментарий, или трекбек с Вашего сайта.
Оставить комментарий
