Багатоколоночний макет, WebReference
У попередньому прикладі ми познайомилися з тегом.
Почнемо з контейнера, що містить ці три колонки. Як уже зазначалося раніше, ми хочемо, щоб всі вони займали простір не ширший за 960 пікселів. У HTML немає спеціальних тегів для такої умови, ми будемо використовувати старого знайомого, тег
Ми щойно дали
Тепер додамо місце для меню, воно буде в
Рухаємося далі і помістимо контейнер для основного вмісту в середню колонку:
А тепер права колонка, бічна панель чи «сайдбар».
Тепер проаналізуємо наш наступний крок, ґрунтуючись на зображенні. Що має утримуватися у лівій колонці? Як передбачає назву, це має бути наше меню з попередніх вправ:
Добре, наш HTML готовий. Тепер настав час для CSS. Перше завдання - встановити максимальну ширину основного контейнера з класом main-container :
Ми задали йому властивість max-width, тепер що б не трапилося, ширина всього контейнера з класом main-container ніколи не буде ширшою за 960 пікселів.
Далі центруємо блок. Це робиться шляхом встановлення автоматичних полів:
За допомогою цього коду браузер бере весь вільний простір навколо main-container і розподіляє простір між двома краями.
Тепер у нас є готовий код, що відповідає за основний контейнер. Перейдемо до коду для трьох колонок. Нехай контейнер з меню займає 20% доступної ширини. Це робиться просто, вказавши значення у відсотках:
І аналогічна ширина для правої колонки:
Оскільки ліва та права колонки містять однакові властивості, ми можемо згрупувати їх через кому:
Тепер перейдемо до середньої колонки. Вона займе решту ширини (60%), оскільки двібічні колонки займають у сумі 40%.
На жаль, наші контейнери, як і раніше, виводяться у вигляді блоків (один над іншим). Щоб встановити їх поруч один з одним, ми повинні дати їм спеціальну властивість float. Ми використовуємо його, щоб сказати браузеру, що хочемо зробити елемент X ближчим до лівого або правого краю контейнера, в якому він знаходиться. Коли контейнер містить «плаваючі» елементи біля лівого краю, то вони встановлюються поруч один з одним і ми можемо хитро скористатися можливостями цієї механіки.
Все це для того, щоб ліва колонка прилипла до лівого краю основного контейнера.
Перш ніж ми перейдемо до використання float, хочу показати вам найпоширеніший випадок застосування цієї властивості. Уявіть, що у вас є зображення, встановлене безпосередньо в тексті:
За умовчанням це виглядає так:
Так відбувається, тому що тег є компонентом рядка, так як він був вставлений на початку рядка і текст буде просто слідувати за ним.
Однак якщо ми встановимо для зображення float як right, то отримаємо певною мірою набагато кращий вигляд:
Картинка тепер "плаває" біля правого краю тексту, в якому вона знаходиться. У нашому випадку це краї абзацу
Тепер встановимо float як left:
Як бачите, картинка тепер «плаває» біля лівого краю абзацу, а текст обтікає її праворуч.
Повертаючись до наших колонок, ми можемо зробити те саме для колонок, які хочемо розташувати «ліворуч» по краю контейнера. Зверніть увагу, що ми додаємо float для всіх контейнерів, групуючи їх через кому:
Бінґо! Дивимося тепер, як наш браузер відображає елементи:
Проаналізуємо, що сталося після того, як ми додали float:left. Кожен елемент намагається «плисти» вліво згідно з пріоритетом у списку. У цьому випадку .site-nav займає лівий край, .main-content встає поряд у лінію, щоб заповнити крайній лівий простір. Нарешті, .sidebar заповнює останній «лівий» край, завершуючи розміщення.
Чудово! Ми щойно отримали багатоколоночне компонування. Для ілюстрації цієї теми додамо фоновий колір до кожної колонки:
Фінальний код CSS виглядає так:
За допомогою цього коду ми створили простий макет із трьома колонками. Тепер потрібно просто вставити решту коду HTML і CSS з попередніх вправ і наша робота зроблена!