» Ліричний відступ про нормальний потік

тут. Подскажем, где купить обручальные золотые кольца с доставкой.
Propellerhead Reason 4

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

При форматуванні блоків у нормальному потоці браузер керується всього двома правилами: кожен блоковий елемент починається з нового рядка, кожен рядковий елемент переноситься на новий рядок у міру необхідності. До блокових елементів ставляться <p>, <table>, <h1> і т.п. До рядкових елементів - <b>, <i>, <sup> і т.п. Спеціально для каскадних таблиць стилів створили два елементи:

<div> - загальний блоковий елемент

<span> - загальний рядковий елемент

За допомогою даних елементів і стилів можна створювати будь-які блоки, які не передбачені мовою HTML. Наприклад, блок новин можна створити от так:

<div id=”news”></div>

А блок для виділення дати от так:

<span class=”date”></span>

Нормальний потік дуже простої для розуміння. Якщо ви в коді напишіть послідовно два блокових елементи, то на сторінці вони розташуються рівно друг під другом. Якщо ви напишіть два сроковых елементи, то вони розташуються в один рядок.

Більше говорити про нормальний потік нема рації, так що повернемося до абсолютного позиціювання.

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

#block2 {position: absolute; left: 0px; top: 0px}

те в результаті другий блок буде накладений на перший. Ми впритул дібралися до відповіді на питання, чому в нашому прикладі другий блок хоч і зміщений уліво як треба, але по вертикалі однаково перебуває під першим блоком. Справа в тому, що значення auto позиціює блок так, начебто він перебуває в нормальному потоці. Тобто виходить, що ми задали зсув ліворуч 517 пикселей, і блок дійсно змістився, але зсув зверху ми не задали взагалі, а за замовчуванням використається top: auto. Якщо ми хочемо, щоб другий блок мав точний відступ зверху, то треба його задати. Методом підбора можна визначити, що для правильного стикування блоків верхній зсув повинне бути 49 пикселей:

#top-right {

width: 233px; height: 32px;

position: absolute; left: 517px; top: 49px}

У підсумку блоки будуть стикуватися зовсім правильно.

Підіб’ємо проміжний підсумок. Якщо при верстці таблицями ми використали 5 картинок, то зараз усього три. Крім того, одна картинка ну зовсім легка, адже це одно-пиксельный gif. Сам HTML-код шапки став більше простим:

<div id=”top-left”>

<img src=”i/logo.gif” width=”272″ height=”74″ border=”0″ alt=”">

</div>

<div id=”top-right”>

<div class=”rectangle”></div>

<img src=”i/news.gif” width=”59″ height=”9″ border=”0″ alt=”">

</div>

Якщо виражати в цифрах, то було 392 байта, став 206 байт. Але зате з’явився додатковий CSS-код обсягом 265 байт. Тому якщо брати вага чистого коду документа, то він збільшився. Але вага картинок була 2,88 Кб, а став 2,77 Кб. Якщо всі просуммировать, те був 3341 байт, стало - 3307 байт. Звичайно, економія просто сміховинна, але поки на цьому не будемо загострювати уваги. З позитивних моментів можна відзначити зменшення кількості використовуваних картинок, що завжди добре, і збільшення логічності коду.

Давайте перейдемо до основного блоку. Раз вуж ми можемо точно задавати місце розташування блоків, то має сенс зробити три блоки, які випливають у документі один за одним:

<div id=”main-left”>

</div>

<div id=”main”>

</div>

<div id=”main-right”>

</div>

З назви блоків зрозуміло, який за що відповідає. Код усередині блоків практично не буде відрізнятися від того, що ми писали при верстці таблицями, за винятком шрифту. Давайте займемося стилями. Ширина лівого блоку 125 пикселей, висота 80 пикселей. Зсув ліворуч 3 пикселя, а зверху - 96 пикселей. Виходить такі стилі:

#main-left {

width: 125x; height: 80px;

position: absolute; left: 3px; top: 96px}

Із центральним блоком трохи цікавіше. Його ширина 364 пикселя, а висота в принципі може змінюватися, якщо буде більше тексту. Тому висоту поки не будемо задавати й подивимося, що із цього вийде. Зсув ліворуч дорівнює ширині лівого блоку й ще 15 пикселей, тобто виходить 140 пикселей. А зсув зверху таке ж:

#main {

width: 364px;

position: absolute; left: 140px; top: 96px}

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

#main-right {

font: 10px Verdana;

width: 233px;

position: absolute; left: 517px; top: 96px}

Як бачите, немає зовсім нічого складного в абсолютному позиціюванні блоків. Знай собі обчислюй зсуву й пиши зовсім однотипні стилі.

Залишилося реалізувати тільки блоки з копирайтом. Отут у всій вроді й виявить себе проблема з висотою CSS-блоків. Ми заздалегідь не знаємо висоту центрального або лівого блоку. Звичайно, ми її знаємо для нашого макета, але на сайті може бути скільки завгодно новин. Що якщо адміністратор сайту вирішити вивести не дві, а чотири новини? Або в першій новині помістить 146 слів замість 10? Виходить, що висота блоків зовсім невизначена, так що її не можна задати жорстко. Але це ще полбеды. Головне питання, наскільки нам необхідно змістити блок копирайта, щоб на сторінці все було нормально?

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

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

Єдиний коректний варіант рішення: динамічно змінювати зсув залежно від максимальної висоти центральних блоків. Для цього необхідно знать JavaScript й DOM. Чесно говорячи, я не люблю такі обхідні рішення, але в цьому випадку більше ніякого реального варіанта немає. Давайте це підтвердимо, спробувавши деякі теоретично можливі способи.

Можна укласти центральні блоки й копирайт в один загальний блок. Здається, що в такому випадку вийде розташувати копирайт безпосередньо під центральним блоком. Упевненість зв’язана із властивістю bottom. Дана властивість задає зсув відносного нижнього краю контейнера, тобто в нашому випадку якщо задати зсув 0 щодо нижнього краю загального блоку, все повинне вийти. Структура коду буде така:

<div id=”general”>

<!-і Три центральних блоки -і>

<div id=”main-left”></div>

<div id=”main”></div>

<div id=”main-right”></div>

<!-і Блок з копирайтом -і>

<div id=”bottom-left”></div>

</div>

Стилі для двох нових блоків будуть от такими:

#general {

width: 760px;

top: 96px; position: absolute}

#bottom-left {

width: 233px; height: 40px;

position: absolute; left: 0px; bottom: 0px}

Здається, що висота загального блоку повинна автоматично підбудовуватися під висоту найвищі блоки із трьох вкладених. Але цього не відбувається з тієї причини, що блоки перебуває поза нормальним потоком. Виходить, що висоту загального блоку треба задавати жорстко, так що ми повернулися до загальної проблеми. Якщо висоту задати жорстко, то можливі випадки, коли вміст блоків перевищує задану висоту й буде накладатися на блок bottom-left.

Якщо спробувати винести блок з копирайтом із блоку general й у стилях теж указати bottom: 0px (зсув щодо нижнього краю вікна браузера буде нульовим), то однаково проблема з висотою не зважиться, тому що вміст блоку може перевищувати висоту всього вікна браузера, і це не рідкість.

На основі проведеного досвіду можна зробити висновок, що за допомогою абсолютного позиціювання не можна зверстати такий макет. В окремому випадку, якщо змусити адміністратора сайту вставляти в блоки строго обмежена кількість тексту або новин, можна задати зсув для блоку з копирайтом і все вийде. Але ніякий нормальний адміністратор на це не піде й буде прав. Окремі випадки гнучкістю не відрізняються, а для гарного сайту гнучкість обов’язкова.

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

Фактично, проблема полягає в прив’язці одного блоку до іншого. Тобто якби ми могли при абсолютному позиціюванні сказати блоку bottom-right, що він завжди повинен розташовуватися під блоком general, проблему вдалося б зняти. Я не знаю, що перешкодило розроблювачам стандарту CSS реалізувати яку-небудь спеціальну властивість, що дозволяло б це робити. Наприклад, можна було б зробити для властивості position функцію after, у яку передавати id блоку. Тоді проблема з позиціюванням блоку bottom-left вирішувалася елементарно:

#bottom-left {

width: 233px; height: 40px;

position: after(#general); left: 0px}

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

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