Структура сайту на тегах div

Одним з найбільш важливих питань для бажаючих навчитися створювати сайти, є розуміння принципу роботи тега div. Саме на використанні цього тега створений каркас 99% сайтів які можна зустріти в мережі інтернет.

Ми вже знаємо, що теги бувають парними і непарним зі свого синтаксису, але вони також бувають блоковими і строковими за принципом обробки їх браузером. Що це означає?

У чому відмінність між блоковими і строковими елементами в html

  • Завжди починається з нового рядка
  • Після його закінчення наступний елемент також починається з нового рядка
  • За замовчуванням блоковий елемент займає всю доступну ширину
  • За замовчуванням висота блочного елемента залежить від його вмісту

У свою чергу строкові елементи

  • Не обов'язково повинні починатися з нового рядка і після їх закінчення перехід на новий рядок не відбувається
  • Ширина сатиричного елемента залежить від обсягу його вмісту

Ось такі нескладні постулати, але це основа-основ.

У цій статті ми розглядаємо парний блоковий тег div, за допомогою якого створимо каркас стандартного сайту, для його відображення в браузері. Звичайно ж використовую тільки цей тег у нас нічого не вийде, знадобиться хоч трохи стилів, але я буду використовувати тільки самі прості і зрозумілі css стилі, і навіть якщо вам поки що нічого про css невідомо, труднощів з розумінням все одно не повинно виникнути.

Каркас сайту на div блоках

Для початку давайте розглянемо стандартний каркас сайту, який використовується на багатьох мільйонах сайтів. Він складається з шапки сайту, лівого або правого сайдбара, області розміщення контенту і підвалу.

Структура сайту на тегах div

Як стає зрозуміло з скріншоту для створення такого типового каркаса нам знадобляться всього чотири «будівельних» блоку div. Давайте підготуємо початковий код для роботи.

Якщо зберегти цей код у файлі index.html і відкрити його в браузері, то ми не побачимо зовсім нічого. Чому так? Я думаю ви і самі здогадалися. Тому що наші блоки порожні, і хоча (згадуємо початок статті) їх ширина займає всю область екрану, але вмісту в них немає, а це означає, що висота дорівнює нулю (четверте правило) і ми їх просто не можемо побачити.

Давайте дамо кожному з цих блоків вміст:

Збережемо, оновимо браузер. Тепер ми бачимо чотири слова кожне з яких, цілком очікувано починається з нового рядка.

Додамо наочності. Щоб побачити ширину блоків div за замовчуванням ми для кожного з них призначимо фоновий колір.

Збережемо, оновимо. Так, все працює як треба. Після прикрашення видно, що кожен блок займає всю ширину вікна браузера, адже ми не ставили для них ніяких правил крім фонового кольору, а значить блоки відображаються за замовчуванням.

В принципі, на цьому практично всі наші можливості з використанням тільки html розмітки і закінчуються. Саме з цієї причини каркас перших сайтів будувався на таблицях. Але з розвитком css стало можливо тонко маніпулювати розмірами і місцем розташування блоків і таблична верстка поступилася місцем блокової.

Зараз ми пропишемо деякі стилі і докладно розглянемо роботу кожного. Для цього модернізуємо наш код.

Тепер давайте детально розберемося в стилях, які ми додали. Перше що потрібно відзначити, ми додали ще один додатковий блок div, в який ніби обернули чотири наших будівельних блоку.

Щоб ідентифікувати його ми задали id wrapper і прописали йому стильове правило margin: 0 auto; яке дозволяє завжди мати у своєму розпорядженні каркас майбутнього сайту посередині екрану. В даному прикладі в цьому немає потреби, так як ширина сайту у нас задана у відсотках і завжди буде займати всю ширину вікна браузера. Але в разі визначення ширини не в процентах, а в пікселях, це правило почне працювати.

Наприклад, спробуйте тимчасово змінити стилі обгорткового блоку і поставити йому явну ширину в 800 пікселів.

Збережіть, поновіть, оцініть результат. Але ми будемо працювати з «гумовим» тягнеться на всю ширину каркасом, тому має сенс повернути все назад і прибрати ширину у обгорткового тега.

В цілому на даний момент ми маємо ось таку картину:

Структура сайту на тегах div

До першого «будівельному» (обгортковий не береться до уваги) блоку div ми додали ідентифікатор header (в даному випадку це зовсім не обов'язково, ідентифікатори додані просто для наочності), задали для нашого червоного блоку ширину width в 100% і висоту в 200 пікселів. Явно задані правила ширини і висоти дозволяють нам видалити напис header яка була всередині блоку, тепер все і так буде чудово відображатися в браузері. Те ж саме стосується і інших блоків.

Зеленому блоку, який відповідає за отрисовку сайдбара ми задали ширину в 30 відсотків від доступної ширини вікна браузера, задали висоту в 600 пікселів і написали одне важливе стильове правило float: left;

Ми вже стикалися з цією командою, коли вивчали обтікання картинки текстом. Тепер в ролі картинки у нас буде виступати блок. Ми пам'ятаємо одне з основних правил, що говорить що після закінчення блокового елемента вміст буде йти з нового рядка. За допомогою float: left; ми скасовуємо це правило і слідом за блоком сайдбара маємо синій блок з контентом, якому задаємо таку ж висоту і ширину в 60% від доступної області ширини браузера і обтікання справа.

60 + 30 = 90% і саме тому нам видно білого смуга між блоками сайдабар і контенту. Але в цій смузі ми можемо бачити і фрагмент нашого жовтого підвалу, який чомусь розмістився відразу під шапкою, а блоки сайдбара і контенту немов би наклалися на нього зверху.

Це нормально. Таке явище називається «випадання з потоку». Справа в тому, що елементи до яких застосовується властивість float, для того щоб застосувати обтікання, немов би випадають із загального «потоку» html розмітки і живуть своїм життям.

Усунути це ми можемо досить легко. Для цього підвалу сайту ми додамо властивість overflow: hidden; і заодно змінимо ширину блоків сайдбара і контенту на 33.3 і 66.6 відсотків відповідно.

В результаті у нас повинен відмалювати стандартний каркас сайту. Більш того цей каркас має «гумові» властивості і однаково виглядає на екранах з різним дозволом. Спробуйте змінити розміри вікна браузера і самі в цьому переконаєтеся.

Структура сайту на тегах div