CSS верстка. Розфарбовуємо колонки на сторінці.
У цій статті я покажу, як задати кольору фону для сторінки з декількома колонками. Припустимо, у нас є web сторінка, зображена на скріншоті. Як бачите, вона складається з заголовка, основної частини, яка включає три колонки, і хвостовика.
Нам потрібно щоб центральна колонка мала один колір фону, а права і ліва - інший.
Вирішити завдання «в лоб», тобто скористатися властивістю background-color кожної з колонок, не вийде. Так як колонки неоднакової висоти, яка може змінюватися, і заздалегідь невідома. А фон, природно, повинен поширюватися на всю висоту колонки, від заголовка до хвостовика.
Тому ми використовуємо інший метод. Задамо фоновий колір тільки для центральної колонки, а дві інші залишимо прозорими. В цьому випадку їх фон буде визначатися фоном контейнера (в даному випадку це тег <body>), який ми спокійно можемо змінювати.
Цей прийом спрацює, тільки якщо центральна колонка буде найдовшою. Подивимося, як це забезпечити.
Перш за все, погляньте на розмітку сторінки.
<Body> <div id = "header"> Заголовок </ div> <div id = "rightbar"> Права колонка <br /> Права колонка <br /> </ div> <div id = "leftbar"> Ліва колонка </ div> <div id = "middlebar"> Центральна колонка <div id = "mfooter"> </ div> </ div> <div id = "footer"> Хвостовик </ div> </ 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; }
І все. Колонки розфарбовані в потрібні кольори.
Ви можете завантажити архів з цим прикладом .
Наступного разу ми розглянемо, як задати для кожної колонки свій власний колір фону.
цікаво почитати
Кулінарні рецепти , Заробіток для домогосподарок