Бестабличная компоновка страницы.

Позиционирование

Свойство position используется для определения расположения элемента относительно других элементов. Оно может быть абсолютным (absolute), относительным (relative), статичным (static) и фиксированным (fixed).

Значение static – это значение по умолчанию. Оно формирует позицию элемента в нормальном порядке, так, как элемент появляется в коде HTML.

Значение relative похож на static, однако при этом элемент может быть смещен от своей исходной позиции при помощи свойств top, right, bottom и left.

Значение absolute выводит элемент из нормального потока элементов HTML и отпускает его в вольное плавание. В этом самом плавании элемент с абсолютным позиционированием, используя свойства top, right, bottom и left, может быть помещен в любое место страницы.

Значение fixed ведет себя как absolute, но элемент будет абсолютно позиционирован относительно окна браузера, а не web-страницы, таким образом, теоретически, элементы с фиксированным позиционированием всегда остаются на заданном месте и не сдвигаются даже при прокрутке веб-страницы.

Компоновка при помощи абсолютного позиционирования

Имея следующий код, при помощи абсолютного позиционирования можно создать традиционный двух колоночный макет web-страницы:

<div id="navigation">
   <ul>
      <li><a href="//it-black.ru/this.html">Этот</a></li>
      <li><a href="//it-black.ru/that.html">Тот</a></li>
      <li><a href="//it-black.ru/theOther.html">Другой</a></li>
   </ul>
</div>

<div id="content">
   <h1>Заголовок 1.</h1>
   <p>Добро пожаловать на страницу!</p>
   <p>Обычный текст.</p>
</div>

Для этого достаточно подключить следующие стили CSS:

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

#content {
   margin-left: 10em;
}

Панель навигации будет отображаться шириной в 10em и в левой части страницы. Так как панель навигации имеет абсолютное позиционирование, ничего не нужно делать с остальным кодом страницы. Только задать левый отступ зоны контента, чтобы вместить панель навигации.

Единственным минусом абсолютно позиционированных элементов является то, что, так как они существуют в своем собственном мире, невозможно точно определить, где они заканчиваются.

Обтекание

Концепция обтекания или свободного перемещения состоит в возможности сдвигать элемент в правую или в левую часть строки. При этом окружающий контент будет “обтекать” этот элемент.

Обычно обтекание используется для позиционирования небольших элементов, однако его также можно применять и для позиционирования больших частей страницы, таких, например, как панель навигации.

Для применения обтекания используется свойство float, которое может принимать три значения: left (смещение влево), right (смещение вправо) и none (запретить обтекание).

Изменим предыдущий код:

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

#content {
   margin: 0 10em;
}

Если вы не хотите, чтобы следующий элемент обтекал элемент, то можно использовать свойство clear. Значение left запретит элементу обтекать слева, right – запрет на обтекание справа, both – запрет на обтекание и слева, и справа.

Таким образом, если вы, например, хотите создать нижний колонтитул, вы можете создать блок HTML с идентификатором “footer” и затем применить следующий стиль:

#footer {
   clear: both;
}

После этого можно получить нижний колонтитул, который будет располагаться под всеми колонками, не зависимо от их размеров.

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

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

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: