Як за допомогою css створити макет сайту з двох колонок, css
У цій статті ми поетапно розглянемо правила верстки сайту з двома колонками. Код, наведений нами, дозволить вам додати шапку і підвал, що охоплюють ці дві колонки.
вступ
Використання властивості float для створення двох колонок
Існує багато методів використання CSS для створення сайту з двома колонками. У цьому посібнику ми застосуємо властивість float. щоб розмістити один стовпець збоку від іншого. Багато в чому цей метод простіший і гнучкий, ніж метод абсолютного позиціонування елементів. Він також дозволяє додати за бажанням шапку і підвал, що охоплюють ці дві колонки.
Я сам не використовував цей метод, тому що макет мого ресурсу створювався тоді, коли я ще тільки робив перші кроки в розробці на CSS і нічого не знав про основні правила верстки. Але не хвилюйтеся. Я створив кілька демо-сторінок, що використовують цей формат, їх ви зможете побачити пізніше.
HTML частина коду досить проста. Нам потрібно тільки два блоку div. по одному для кожного стовпця:
Слова "Меню навігації" і "Контент" є лише покажчиками для бічній панелі навігації та основного контенту. Пізніше ви видалите ці слова, коли розташуйте в блоках реальний контент. div "container" - це блок, який містить два стовпці. Його можна використовувати, якщо потрібно застосувати певні стилі до обох стовпчиках.
Наведений нижче CSS код використовує відсотки ( "%") для визначення ширини обох колонок. Так як вони вимірюються у відносних одиницях, то будуть розширюватися або стискатися, щоб заповнити всі вікно браузера незалежно від того, яку ширину воно має. Наприклад, якщо ви зміните розмір вікна браузера, шаблон перебудує стовпець так, щоб він максимально відповідав кордонів вікна.
Код CSS дуже простий:
Згідно з правилами верстки сайту, код CSS повинен розміщуватися в розділі стилів веб-сторінки або в зовнішньому файлі.
Як наведений вище код працює на практиці, можна побачити тут.
Як це працює: пояснення до CSS-коду
Правило "float: right" визначає, як блок DIV виводиться із загального потоку документа, а також розміщується праворуч від всіх інших елементів, що обтікають його зліва. Перший блок DIV. який зустрічається на HTML-сторінці. зміщується в першу чергу.
У наведеному вище прикладі "#content" першим зсувається вправо і для нього задається ширина в 80% від ширини вікна браузера. Наше наступне правило також виводить "#navbar" з потоку документа і зміщує його вправо.
Так як у нас вже є плаваючий елемент в такому положенні. Згідно заданими правилами адаптивної верстки, другий блок поміщається зліва від існуючого елемента, якщо для нього є достатньо простору. Інакше він буде розміщений під першим елементом. З огляду на це сума сторін обох блоків повинна бути дорівнює 100% або менше, інакше у нас не буде достатньо місця, щоб розмістити їх поруч.
Як розмістити колонку навігації справа
Наведений раніше код розміщує меню навігації в лівій колонці. Якщо потрібно, щоб меню навігації розміщувалося справа, змініть код наступним чином:
Ви можете побачити цей код в дії тут, натиснувши на кнопку перемикання на праву колонку меню навігації.
Як коректно змінити ширину
Згідно зі встановленими технічним правилам верстки, наведені вище стилі, задають для бічної колонки ширину в 20% від ширини вікна браузера, а для колонки контенту - 80%, що в сумі дає 100%.
Якщо ви плануєте змінити ці значення, переконайтеся, що їх загальна сума дорівнює або менше 100%, інакше браузер помістить одну колонку нижче іншої.
Якщо одна з колонок зміщується нижче інший: як це виправити
Якщо ви виявили, що одна з колонок поміщається під інший замість того, щоб розташовуватися пліч-о-пліч, це означає, що загальна ширина обох колонок складає більш 100% від ширини вікна браузера.
Це може статися, навіть якщо ви використовуєте мої значення "20%" і "80%". Наприклад, якщо додати поля, рамки і відступи для однієї або обох колонок. Ширина цих стовпців також збільшиться, що призведе до того, що загальна сума буде перевищувати 100%.
Кросбраузерність і правила верстки мають на увазі два способи вирішення цієї проблеми:- Зменшити значення ширини колонок, поки браузер не виведе їх так, як ви хочете. Але пам'ятайте, що відсотки є відносною одиницею виміру. Вона прив'язана до ширини вікна браузера користувача. Тому, якщо ви тестували макет на своїй системі, і виявили, що при додаванні до padding-left 10 px до однієї з колонок і зменшенні ширини на 1%, все працює прекрасно, то не можна робити висновок, що 1% = 10 пікселів. Іншими словами, 1% від 1024 пікселів відрізняється від 1% від 1920 пікселів, і так далі. Переконайтеся, що ви враховуєте відмінності ширини вікна в інших браузерах і діагоналях екрану;
- Рішення, яке вважаю за краще я, полягає в тому, щоб створити всередині блоків "#navbar" і "#content" вкладений DIV. і помістити в нього все відступи, поля, рамки і фактичний контент. Таким чином, для зовнішніх блоків можна залишити старі 20% і 80%, не піклуючись про поправки на поля, відступи і т.д.
Наприклад, в демо-сайті з двома колонками використовується наступний HTML-код для створення вкладеного блоку DIV:
До написаним раніше стилям CSS додайте наступні властивості для "#innercontent" і "#innernavbar":
CSS для "#content" і "#navbar" залишаються такими ж, як описано в першій половині цієї статті.
Так як відступ застосовується до внутрішнього блоку DIV. розміри зовнішніх блоків залишаються незмінними, і у нас зберігається макет з двома колонками.
Як додати шапку і підвал сайту, розтягуються на обидві колонки
Щоб створити шапку і підвал, використовуючи макет з двома колонками, змініть HTML-код і додайте два додаткових блоку DIV:
Додайте наступний код CSS у існуючу таблицю стилів. Помістіть його після стилів, які були задані раніше:
Якщо ви хочете, щоб текст в шапці вирівнювався по центру, додайте наступний код. Інакше окремо задавати стиль шапки немає необхідності:
Те ж властивість можна додати до підвалу, щоб текст в ньому вирівнювався по центру.
Наведений вище код можна побачити в дії на демо-сайті з шапкою, підвалом і двома колонками.
висновок
За допомогою наведеного вище коду CSS ви зможете самостійно створювати сайти з двома колонками.
Переклад статті «How to Design a Two Column Layout for Your Website Using CSS» був підготовлений дружною командою проекту Сайтобудування від А до Я.