Розкладка сторінки

Русский перевод: Раскладка страницы

Це не складно – підготувати розкладку сторінки за допомогою CSS. Багато людей використовують для створення розкладки сторінки таблиці, тому на перший погляд використання CSS може здатися складним. Однак насправді це не так. Цей спосіб просто інший і, що важливо, має більше сенсу.

Важливо сприймати кожну частину вашої сторінки як окремий фрагмент, який можна переміщати і трансформувати за своїм бажанням. Ці фрагменти можуть бути розміщені абсолютно чи відносно іншого фрагмента.

Позиціонування

Властивість position застосовується для опису елемента, коли він позиційований (розміщений) абсолютно (absolute), щодо (relative), статично (static) або фіксовано (fixed).

static – значення за замовчуванням.

relative – схоже на static, але можна зміщувати елемент за допомогою top, right, bottom, left.

absolute – витягує елемент зі стандартного потоку HTML.

fixed – позиціонує елемент відносно вікна браузера, залишається на місці при прокручуванні.

Розкладка сторінки з абсолютним позиціонуванням

<div id="navigation">
  <ul>
    <li><a href="this.html">This</a></li>
    <li><a href="that.html">That</a></li>
    <li><a href="theOther.html">The Other</a></li>
  </ul>
</div>

<div id="content">
  <h1>Ra ra banjo banjo</h1>
  <p>Welcome to the Ra ra banjo banjo page...</p>
</div>

#navigation {
  position: absolute;
  top: 0;
  left: 0;
  width: 10em;
}

#content {
  margin-left: 10em;
}

Floating

Елемент з атрибутом float переміщується ліворуч або праворуч, а контент обтікає його.

#navigation {
  float: left;
  width: 10em;
}

#navigation2 {
  float: right;
  width: 10em;
}

#content {
  margin: 0 10em;
}

#footer {
  clear: both;
}

Використовуючи значення float, позиціонування, padding, margin та межі, можна реалізувати будь-який проект, що раніше робили за допомогою таблиць.

← Як це працює разом