Все частіше в дизайні нових web сайтів зустрічається верстка в кілька колонок. Застосувань для такої верстки безліч. Наприклад, дублювання навігаційного меню в нижній частині сторінки. У цій статті я покажу один з варіантів такої верстки. При цьому html таблиці ми використовувати не будемо, а розставимо колонки за допомогою каскадних таблиць стилів (CSS).
В першу чергу сформулюємо завдання. Припустимо, нам потрібно по всій ширині сторінки розмістити 5 колонок (кількість в даному випадку принципової ролі не грає). Весь блок з колонками повинен мати загальний фон, який буде відділяти його від іншої частини сторінки. Колонки можуть містити текст, малюнки, посилання, таблиці, в загальному, будь-яку html розмітку, при цьому розташування і ширина колонок повинні залишатися постійними. Обсяг вмісту ролі не грає (в межах розумного, звичайно, 🙂).
Наприклад, розмістимо в кожному стовпчику списки з посиланнями, кожна з яких матиме зліва маркер. Вид маркера повинен змінюватися при наведенні на нього курсора.
Загалом, у мене вийшла ось така картинка:
Тепер перейдемо до верстки. Вміст наших колонок буде перебувати між тегами <div class = "column»> і </ div>. А самі колонки всередині блоку container (<div id = "container»>).
Тобто всі разом буде виглядати приблизно так:
<Div id = "container"> <! - Початок container -> <div class = "column"> <p> Розділ 1 </ p> <ul> <li> <a href="#"> Пункт 1.1 </a> </ li> <li> <a href="#"> Пункт 1.2 </a> </ li> <li> <a href="#"> Пункт 1.3 </a> </ li> <li> <a href="#"> Пункт 1.4 </a> </ li> <li> <a href="#"> Пункт 1.5 </a> </ li> <li> <a href = " # "> Пункт 1.6 </a> </ li> <li> <a href="#"> Пункт 1.7 </a> </ li> </ ul> </ div> <div class =" column "> <p> Розділ 2 </ p> <ul> <li> <a href="#"> Пункт 2.1 </a> </ li> <li> <a href="#"> Пункт 2.2 </a> </ li> <li> <a href="#"> Пункт 2.3 </a> </ li> <li> <a href="#"> Пункт 2.4 </a> </ li> </ ul> </ div> <div class = "column"> <p> Розділ 3 </ p> <ul> <li> <a href="#"> Пункт 3.1 </a> </ li> <li> <a href = "#"> Пункт 3.2 </a> </ li> <li> <a href="#"> Пункт 3.3 </a> </ li> <li> <a href="#"> Пункт 3.4 </a> </ li> <li> <a href="#"> Пункт 3.5 </a> </ li> <li> <a href="#"> Пункт 3.6 </a> </ li> <li> <a href="#"> Пункт 3.7 </a> </ li> </ ul> </ div> <div class = "column"> <p> Розділ 1 </ p> <ul > <Li> <a href="#"> Пункт 4.1 </a> </ li> <li> <a href="#"> Пункт 4.2 </a> </ li> <li> <a href = "#"> Пункт 4.3 </a> </ li> <li> <a href="#"> Пункт 4.4 </a> </ li> <li> <a href="#"> Пункт 4.5 </ a> </ li> <li> <a href="#"> Пункт 4.6 </a> </ li> <li> <a href="#"> Пункт 4.7 </a> </ li> </ ul> </ div> <div class = "column"> <p> Розділ 5 </ p> <ul> <li> <a href="#"> Пункт 5.1 </a> </ li> <li> <a href="#"> Пункт 5.2 </a> </ li> <li> <a href="#"> Пункт 5.3 </a> </ li> <li> <a href="#"> пункт 5.4 </a> </ li> <li> <a href="#"> пункт 5.5 </a> </ li> <li> <a href="#"> пункт 5.6 </a> </ li> <li> <a href="#"> Пункт 5.7 </a> </ li> </ ul> </ div> <div class = "bottom"> </ div> </ div> <! - -Завершення container ->Зверніть увагу на те, що в кінці container'а доданий ще один порожній блок bottom (рядок ...). Для цього блоку в таблиці стилів ми встановимо властивість clear: both. Це гарантує розміщення блоку bottom нижче будь-якої з наших колонок, що автоматично розтягне container до висоти найбільшою з колонок. Таким чином, ми зможемо поставити загальне тло для всіх наших колонок.
Перейдемо до таблиці стилів.
@CHARSET "UTF-8"; body {margin: 0; padding: 0; } P {margin: 0; } #Container {background-color: # 695E77; margin: 0; padding: 0; border-bottom: solid 4px # 99CC66; } #Container .column {float: left; width: 19.9%; } #Container .column p {padding: 0.5em 0.5em 0.1em 0.5em; font-weight: bold; font-family: Verdana, sans-serif; color: # EAF5FC; } #Container .column ul {list-style-type: none; margin: 0 0 0.5em 0; padding: 0.5em 0.5em 0.1em 0.1em; } #Container .column ul li a {background-image: url ( 'arrow.gif'); background-repeat: no-repeat; padding: 0.1em 0.1em 0.1em 30px; font-family: Verdana, sans-serif; background-position: 0 -20; color: # EAF5FC; text-decoration: none; } #Container .column ul li a: hover {background-position: 0px -20px; color: # FFFF00; } #Container .column ul li a: active {background-position: 0px -40px; color: # FFFF00; } #Container .bottom {clear: both; }В першу чергу ми ставимо ширину колонок і їх розташування. Робиться це за допомогою властивостей float: left; і width: 19.9%; (Рядки ...). Ви можете задати питання: «Чому ширина дорівнює 19.9%, а не 20%?». Відповідь дуже проста: «Тому що існує Internet Explorer у якого 5 колонок з шириною 20% кожна на сторінці не поміщаються 🙂 (в Firefox все нормально відображається)».
Тепер зверніть увагу на те, як задані маркери біля пунктів меню. Для кожного маркера використовується один і той же малюнок. Ось цей:
Висота малюнка 60px, а ширина - 20px. Оскільки малюнок використовується в якості фону, то відображається він не весь, а лише та його частина, яка поміщається в блоці посилання. Тобто квадрат зі сторонами 20 на 20px. Коли курсор не наведений на посилання, застосовуються стилі, зазначені в рядках ... і ми бачимо зелений маркер. При наведенні курсора на посилання будуть застосовані стилі псевдокласу hover (рядки ...), і ми побачимо жовтий маркер. Врахуйте, що цей прийом має недолік, який, в общем-то, стосується будь-якого дизайну з малюнками. При значній зміні розміру тексту (як у велику, так і в меншу сторону) маркери перестають збігатися з текстом посилання. Ми побачимо або частина наступного маркера, або обрізаний маркер. Тому користуйтеся цим прийомом акуратно.
Інші стилі я описувати не буду. Вони задають параметри шрифтів, відступи, границі й т.д.
На завершення, хочу сказати, що такий варіант верстки має кілька обмежень. Наприклад, якщо ви захочете встановити роздільники між колонками і розтягнути їх на всю висоту контейнера, то, швидше за все вам доведеться використовувати html таблицю. Тому що інакше кожен роздільник матиме висоту тієї колонки, до якої він належить.
Ви можете завантажити архів з файлами цього прикладу .
Вдалих вам проектів.
постовий
Комп'ютери - Товари в Запоріжжі
А не 20%?
