Колонки однакової висоти за допомогою CSS3
Існує кілька методів створення рівних за висотою колонок. Один з найпопулярніших і простих полягає в імітації колонок за допомогою фонового малюнка. HTML-код залишається незмінним, а до стилів додається лише властивість background. Завдяки цьому малюнку створюється ілюзія колонок однакової висоти.
Простіше працювати з фіксованим макетом, коли відома заздалегідь ширина всіх колонок. Наприклад, для макета шириною 900 пікселів готуємо картинку розміром 900х50 пікселів. Висота малюнка не має особливого значення і починається від 20-30 пікселів. Приклад такої картинки показано на малюнку 1. Права частина не показана повністю, її ширина дорівнює ширині колонки.
Малюнок додається до контейнера, всередині якого розташовані колонки і повторюється по вертикалі (приклад 1).
Приклад 1. Використання малюнка
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Колонки</title>
<style>
.layer {
background: url(images/faux-cols.png) repeat-y; /* Параметри фону */
width: 600px; /* Ширина макета */
margin: auto; /* Вирівнюємо по центру */
min-height: 200px; /* Мінімальна висота */
color: #fff; /* Колір тексту */
}
.left_col {
width: 160px; /* Ширина лівої колонки */
float: left;
}
.right_col {
margin-left: 160px; /* Відступ на ширину колонки */
}
</style>
</head>
<body>
<div class="layer">
<div class="left_col">Ліва колонка</div>
<div class="right_col">Права колонка</div>
</div>
</body>
</html>Для резинового макету, де ширина лівої колонки має фіксований розмір, а ширина правої змінюється в залежності від розширення монітора, трохи модифікуємо малюнок. Збільшуємо його ширину до 2000 пікселів або більше, щоб охопити всі розширення моніторів, і закрашуємо всю праву частину кольором правої колонки.
Тепер, коли зрозумілі теоретичні основи цього методу імітації колонок, перерахую його недоліки.
- Складно швидко змінити колір колонок, оскільки це робиться не через код, а в графічному редакторі.
- Малюнок створює додатковий запит до сервера і збільшує час завантаження сторінки.
- Метод має складності в макетах з резиновими колонками, особливо, коли їх більше двох.
В цілому, мінуси не дуже суттєві і багато розробників готові з ними миритися. Проте існує більш елегантне рішення — використання CSS3, зокрема, градієнтів. Хоча в нашому прикладі немає жодних градієнтів, вони досить добре підходять через можливість робити не лише плавні, але й різкі переходи кольорів.
У прикладі 2 показано той самий макет, але фоновий малюнок доповнюється градієнтами для різних браузерів. В іншому відношенні, все залишається тим же.
Приклад 2. Градієнти
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Колонки</title>
<style>
.layer {
background: url(images/faux-cols.png) repeat-y; /* Для старих браузерів */
background: -moz-linear-gradient(left, #ffc836, #ffc836 160px, #a1429d 160px, #a1429d);
background: -webkit-linear-gradient(left, #ffc836, #ffc836 160px, #a1429d 160px, #a1429d);
background: -o-linear-gradient(left, #ffc836, #ffc836 160px, #a1429d 160px, #a1429d);
background: linear-gradient(to right, #ffc836, #ffc836 160px, #a1429d 160px, #a1429d);
width: 600px; margin: auto;
min-height: 200px; color: #fff;
}
.left_col { width: 160px; float: left; }
.right_col { margin-left: 160px;}
</style>
</head>
<body>
<div class="layer">
<div class="left_col">Ліва колонка</div>
<div class="right_col">Права колонка</div>
</div>
</body>
</html>Рядок з малюнком залишено для коректного відображення макета в старих браузерах. Сучасні браузери його проігнорують і не будуть завантажувати зображення.
Щоб отримати різкий перехід кольорів для імітації колонок, у градієнті наступний колір слід починати з тієї самої позиції, де закінчується попередній. Наприклад, для трьох колонок шириною 200px кожна кольори будуть такими.
червоний 0, червоний 200px, зелений 200px, зелений 400px, синій 400px, синій 100%
Або у скороченому вигляді.
червоний 200px, зелений 200px, зелений 400px, синій 400px, синій
Кожна колонка описується декількома параметрами — колір, початкова координата, кінцева координата, відлік ведеться від лівого краю макета. Це дозволяє поєднувати будь-які одиниці, так, ми можемо легко задати ширину окремих колонок в процентах.
червоний 0, червоний 200px, зелений 200px, зелений 75%, синій 75%, синій 100%
Невеликі недоліки у методу з градієнтами також існують — це зайвий код для підтримки різних версій браузерів. Проте на сьогоднішній день це один із найсучасніших і зручних способів створення фіктивних колонок однакової висоти.