Макет сторінки в три колонки - HTML & CSS
Добрвий день! Сьогодні поговоримо по трьох стовпчик макет сраніци. У мережі є дуже цікавий довідник по HTML і CSS , Який буде безсумнівно корисний кожному поважаючому себе web-майстру. Ресурс цей - htmlbook.ru . Там багато корисної інформації. У даній статті ми розглянемо макет в три колонки, який пропонується на цьому ресурсі.
Нічого складного в ньому немає. Якщо Ви вивчали до цього CSS і HTML то розібратися в ньому простіше не куди! І так приступимо .. трехколоночной макет часто використовується в тих випадках, коли двох колонок вже недостатньо або потрібна особливим чином розділити матеріал. Наприклад, одна колонка віддається під контент, друга під навігаційні посилання, а в третій публікуються новини сайту або інша інформація (рис. 1).
Мал. 1
Загальний каркас визначається за допомогою шару з ім'ям container, він задає ширину і вирівнювання макета. Усередині розташовуються колонки, причому їх порядок в коді такий: ліва (назвемо її nav), права (aside), центральна (content). Побудова шарів показано в прикладі 1.
Приклад 1. Колонки в коді
<Div id = "container"> <div id = "nav"> Ліва колонка </ div> <div id = "aside"> Права колонка </ div> <div id = "content"> Центральна колонка </ div> </ div>Положення шарів формується через стилі: для лівої колонки встановлюється ширина (width) та обтікання по лівому краю (float: left), для правої колонки - ширина і обтікання по правому краю (float: right), для центральної - відступ зліва і справа на ширину лівої і правої колонки (приклад 2).
Приклад 2. Стиль для створення колонок
#container {width: 900px; / * Ширина макета * / margin: 0 auto; / * Вирівнювання по центру * /} #nav {width: 200px; / * Ширина лівої колонки * / float: left; } #Aside {width: 300px; / * Ширина правої колонки * / float: right; } #Content {margin: 0 300px 0 200px; / * Відступ на ширину лівої і правої колонки * /}Повний код сторінки з урахуванням цього стилю представлений в прикладі 3.
Приклад 3. трехколоночной макет
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <meta http-equiv =" Content-Type "content =" text / html; charset = utf-8 "/> <title> трехколоночной макет </ title> <style type = "text / css"> body {font: 0.8em Arial, Helvetica, sans-serif; / * Шрифт на веб-сторінці * / background: # D7E1F2; / * Колір фону * / color: #ffe; / * Колір тексту * /} a {color: # 008BCE; / * Колір посилань * /} #container {width: 500px; / * Ширина макета * / margin: 0 auto; / * Вирівнюємо по центру * / background: # FCE600; / * Колір колонок * /} #header {font-size: 2.2em; / * Розмір тексту * / text-align: center; / * Вирівнювання по центру * / padding: 5px; / * Відступ навколо тексту * / background: # D71920; / * Колір фону шапки * /} #nav, #aside {float: left; width: 110px; padding: 5px; } #Content {background: # 54B948; margin: 0 120px; / * Ширина колонок * / padding: 10px; } #Aside {float: right; color: # 000; } H2 {margin: 0 0 1em; } #Footer {clear: both; / * Скасовуємо дію float * / padding: 5px; / * Відступ навколо тексту * / background: # D71920; / * Колір фону підвалу * /} </ style> </ head> <body> <div id = "container"> <div id = "header"> Історичний турнір </ div> <div id = "nav"> < p> Статистика турніру </ p> <p> Інтерв'ю з головним суддею </ p> <p> Конкурсні питання </ p> </ div> <div id = "aside"> <h3> Статистика </ h3> <p > одинадцять чоловік дійшли до фіналу; </ p> <p> одна людина правильно вказав у якому стилі писав Дієго Веласкес; </ p> <p> тільки одна людина знав, хто винайшов пароплав; </ p> </ div> < div id = "content"> <h2> Опитування громадської думки показало </ h2> <ul> <li> що пароплав винайдений: Петром I, А. Ейнштейном і А. Поповим; </ li> <li> Дієго Веласкес писав свої полотна в стилі: імперіалізму, кубізму і мперіосіонізма; </ li> <li> Фаросский маяк знаходиться в Фаросе; </ li> <li> конфуціанство виникло в: Італії, Кореї і Франції; </ li> <li> богами торгівлі і крадіжки в Стародавній Греції були: Марс, Меркурій і Діоніс; </ li> <li> Франція - це місто; </ li> <li> богами загробного світу в Єгипті були: Аїд, Анубіс і Ассиріс; </ li> <li> столиця Золотої Орди - Монголія; < / li> <li> головні противники Олександра Македонського: татаро-монголи, Дедал і Цезар; </ li> </ ul> </ div> <div id = "footer"> & amp; amp; amp; amp; amp; amp ; amp; amp; amp; amp; amp; amp; amp; amp; amp; copy; Влад Мержевіч </ div> </ div> </ body> </ html>У даній реалізації є кілька особливостей:
- колонки мають різну висоту, але за рахунок застосування фону створюється ілюзія однакової висоти у всіх трьох колонок;
- у лівій і правій колонки однаковий колір фону, він встановлюється властивістю background для шару container;
- вид колонок зберігається тільки в разі, коли висота центральної колонки більше за інших. Якщо ця умова порушити, пропаде ефект колонок (рис. 2), в іншому макет при цьому відображається коректно.
Мал. 2. Права колонка вище за інших