Межу шириною в один піксел і ширину в 30% від ширини розділу

Цей блок тексту ми притиснули до правої межі розділу. Він має

Рисунок 2.12.

Рисунок 2.11.

Рисунок 2.10.

<font color=darkred size=-1>

<span style="float: left;border-color:#003366;border-width: 1px;border-style: solid;font-size: 15px;font-family: monospace;width: 30%">

Цей блок тексту ми притиснули до лівої межі розділу. Він має межу шириною в один піксел і ширину в 30% від ширини розділу.

</span>

Розмір шрифту обтічного блоку тексту навмисно зменшений до 8-ми пікселів, щоб блок тексту виділявся на загальному фоні вмісту сторінки.

</font>

При використанні значення right блок тексту буде притиснутий управо. (відкрити)

Другий атрибут опису стилів clear дозволяє управляти власне обтіканням. Він не допускає наявності "плаваючих" блоків біля блоку тексту. Атрибут може набувати значень: right, left, none, both:(відкрити)

<font color=darkred size=+1>

<span style="float: right;border-color:#003366;border-width: 1px;border-style: solid;font-size: 15px;font-family: monospace;width: 30%">

</span>

<p style='clear: right;text-align: justify;color: darkred'>

У цього блоку тексту не може бути "плаваючого" правого блоку, оскільки ми його заборонили. З цієї причини він починається нижче притиснутого управо обмеженого блоку.</p>

</font>

CSS пропонує чотири типи позиціонування.

· Абсолютне( position: absolute;). Таке позиціонування дозволяє визначати розташування елементу, задаючи позиції left, right, top або bottom у будь-яких одиницях виміру CSS. Крім того, абсолютно розміщені елементи повністю вилучені з потоку сторінки, певного HTML - кодом: інші елементи на сторінці розміщуються без урахування елементів, що абсолютно позиціонуються.

· Відносне( position: relative;). Елемент з таким позиціонуванням розміщується відносно його потокового положення в потоці HTML. Так, наприклад, встановлюючи значення top рівним 20 пікселів і значення left рівним 200 пікселів для відносно розміщеного заголовка, ви перемістите його на 20 пікселів вниз і 200 пікселів ліворуч від того місця, де він з'явився б на сторінці. На відміну від абсолютного позиціонування, тут інші елементи сторінки регулюють старе HTML - розміщення об' єкту, що відносно позиціонується. Відповідно, переміщення об' єкту з відносним позиціонуванням залишає "діру", на місці якої він повинний був знаходитися. Основна користь відносного позиціонування не в тому, щоб перемістити елемент, а в установці нової точки прив'язки для елементів, що абсолютно позиціонуються, які вкладені в нього.

· Фіксоване( position: fixed;). Фіксований елемент закріплюється у визначеному місці на екрані. Визначення такого позиціонування грає ту ж роль, що і установка значення fixed для властивості background — attachment при позиціонуванні фонових зображень. Колі відвідувач прокручує сторінку, фіксовані елементи залишаються на екрані як абзаци і заголовки, тоді як фотографії прокручуються разом із сторінкою. Використання фіксованих елементів — відмінний спосіб створити нерухоме бічне меню або відтворити ефект HTML — фреймів, де тільки певна частина сторінки прокручується.

· Статичне позиціонування відповідає нормальному потоку HTML.

Дата добавления: 2013-12-12