Влад Мержевич

Плаваючими називатимемо такі елементи, які обтікаються по контуру іншими об'єктами веб-сторінки, наприклад, текстом. Правильніше говорити «обтічні елементи», але з іншого боку термін «плаваючий елемент» давно вже прижився, так що його і використовуватиму надалі.

Плаваючі елементи досить активно застосовуються при верстках веб-сторінок і служать для реалізації цих і не тільки завдань:

• обтікання картинок текстом;
• створення врізок;
• горизонтальне меню;
• колонки.

Обтікання відбувається за допомогою стильової властивості float зі значенням left або right. За умовчанням обтікання для елементів не встановлюється, але якщо це з якихось причин необхідно вказати явно, слід використовувати значення none . На рис. 3.32 показаний результат застосування різних значень зображення поруч із текстом.

Мал. 3.32. Обтікання картинки текстом

Сам HTML-код залишається практично незмінним і наведено у прикладі 3.21.

Приклад 3.21. Використання float

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. У wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

У цьому прикладі показано додавання властивості float зі значенням left до тега . Це значення вирівнює елемент з лівого краю батька чи іншого плаваючого елемента, проте інші елементи, на кшталт тексту, обтікають його праворуч. Значення right , навпаки, вирівнює елемент правому краю батька чи іншого плаваючого елемента, проте інші елементи, на кшталт тексту, обтікають його з лівій стороні.

Отже, із термінологією розібралися. Давайте доповнимо приклад 3.21, щоб малюнок краще гармоніював із текстом. Найголовніше - задати відступ праворуч від зображення і про всяк випадок знизу. Для цього до тега додається клас з ім'ям fig, у якого встановлено властивість margin, воно одночасно визначає свій відступ на кожній стороні зображення (приклад 3.22).

Приклад 3.22. Обтікання картинки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Результат прикладу показано на рис. 3.33.

Мал. 3.33. Малюнок з вирівнюванням по лівому краю та обтіканням по правому

Створення врізок

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

Мал. 3.34. Вид врізання

Щоб врізка виділялася в тексті, зазвичай встановлюють фоновий колір і додають рамку. За своїм видом врізки нагадують наведений вище спосіб обтікання текстом картинки, тому код для створення врізок практично ідентичний попередньому (приклад 3.23).

Приклад 3.23. Додавання врізки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Інструмент Magic Erase (Чарівна гумка) стирає пікселі близькі за кольором. Якщо ми працюємо з шаром Background або шаром, прозорість на якому заблокована, пікселі заміняться на фоновий колір. У решті випадків ми отримаємо прозору область.

Принцип роботи із інструментом Magic Erase нагадує роботу з інструментом Magic Wand. А саме, спочатку встановлюємо відповідне значення Tolerance, включаємо прапорець Anti-aliased для створення плавних кордонів, прибираємо прапорець з параметра Contiguous для одночасного видалення всього фону, після чого клацаємо по фотографії в районі неба. Якщо шар Background було попередньо перейменовано, ми отримаємо прозорі ділянки у потрібних місцях.

При створенні врізок слід обов'язково вказувати її ширину за допомогою властивості width. Інакше розмір шару виявиться набагато ширшим, ніж це потрібно.

Розташування шарів по горизонталі

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

Приклад 3.24. Блоки по горизонталі

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат прикладу показано на рис. 3.35.

Мал. 3.35. Розташування шарів при використанні властивості float

Через різний текст у підписі висота блоків також виходить різною, через що деякі блоки «чіпляються» за інші і не переходять на інший рядок. Тут може допомогти установка висоти всіх блоків через властивість height, наприклад 100px або повернення до використання display: inline-block.

Вплив обтікання

Властивість float крім здатності до створення плаваючих елементів має ряд особливостей, про які необхідно знати. Головна особливість у тому, що float діє на всі довколишні елементи, змушуючи їх брати участь у обтіканні. Розглянемо це з прикладу 3.25, де показано створення стрілок однією рядку з допомогою значень left і right властивості float .

Приклад 3.25. Вплив обтікання

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Хоча для тексту та стрілок використовуються різні блокові елементи, які повинні розташовуватися на різних рядках, вплив float змушує підніматися текст вище, оскільки він потрапляє до зони обтікання (рис. 3.36). Також не відображається колір фону у шару arrow через те, що плаваючі елементи не беруть участь у потоці документа, по суті, це аналогічно тому, що arrow залишити порожнім.

Мал. 3.36. Вплив обтікання на текст нижче

Плаваючі елементи не впливають на висоту блоку, де вони знаходяться. Щоб це виявити, достатньо обвести блок рамкою та помістити всередину плаваючий елемент із текстом (приклад 3.26).

Приклад 3.26. Висота блоку

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Малюнок не впливає на висоту шару і за межі (рис. 3.37).

Мал. 3.37. Висота шару з плаваючим елементом

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

Скасування обтікання

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

Ширина елемента

Якщо плаваючий елемент займатиме всю доступну ширину, інші елементи, що йдуть за ним, будуть починатися з нового рядка. Для цього треба включити властивість width із значенням 100%. Так, стиль у прикладі 3.25 можна доповнити так:

Left ( float: left; width: 50%; ) .right ( float: right; width: 50%; text-align: right; )

Кожен шар зі стрілкою тепер займає ширину 50% і в сумі вони дають 100% ширини, тому абзац після шару arrow почнеться з нового рядка.

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

Використання overflow

Властивість overflow керує відображенням вмісту блокового елемента, якщо воно повністю не міститься і виходить за область заданих розмірів. Значення auto зокрема, додає смуги прокручування при необхідності, а hidden відображає тільки область всередині елемента, решту приховує. Крім цього, використання overflow зі значенням auto, scroll або hidden скасовує дію float. Стиль для прикладу 3.25 доповнюється лише одним рядком:

Arrow ( overflow: hidden; )

Результат після застосування властивості overflow одразу змінюється (рис. 3.38).

Мал. 3.38. Вплив властивості overflow на тлі

Аналогічно доповнюється приклад 3.26:

DIV ( overflow: hidden; )

Результат показано на рис. 3.39.

Мал. 3.39. Вплив властивості overflow на кордон

overflow одна з найпопулярніших властивостей працює у зв'язці float. Але іноді виникають ситуації, коли застосування цього неприпустимо. Це відбувається у випадках, коли елемент виходить межі елемента, у своїй він «обрізаний». У прикладі 3.27 картинка зсувається ліворуч від свого вихідного положення.

Приклад 3.27. Обрізання області елемента

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Вінні-Пух у гостях у Кролика

Результат прикладу показано на рис. 3.40.

Мал. 3.40. Обрізання картинки

У IE6 метод працює тільки при встановленій властивості hasLayout. Щоб його увімкнути, можна додати zoom : 1 поряд із властивістю overflow .

Властивість clear

Для скасування дії float застосовується clear властивість з наступними значеннями.

• left - скасовує обтікання з лівого краю елемента (float: left). При цьому всі інші елементи на цій стороні будуть опущені вниз і розміщуватись під поточним елементом.
• right - скасовує обтікання з правого боку елемента (float: right).
• both - скасовує обтікання елемента одночасно з правого та лівого краю. Це значення рекомендується встановлювати, коли потрібно скасувати обтікання елемента, але невідомо точно з якого боку.

Щоб скасувати дію обтікання, властивість clear треба додавати до елемента після плаваючого. Зазвичай вводять універсальний клас, наприклад, clear та вставляють порожній тег

із цим класом (приклад 3.28).

Приклад 3.28. Використання clear

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

←

→

У цьому прикладі для класу clear встановлено властивість clear зі значенням both. Якщо вам потрібно використовувати різні значення, можна ввести кілька класів і застосовувати їх за потребою.

Цей метод також є одним з найпопулярніших у верстці через простоту та універсальність. Але знову ж таки іноді виникають комбінації, в яких використання clear дає збій. Це відбувається, коли у коді зустрічається одночасно кілька різних плаваючих елементів. Так, у прикладі 3.29 за допомогою float створюються дві колонки, а в правій колонці float упорядковує фотографії.

Приклад 3.29. Використання float

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Меню

Найкращі фотографії

За коментарями

Софійський собор

Польський костел

Новий рядок

Підвал

Результат прикладу показано на рис. 3.41. Властивість clear діє як клас photo , а й у клас col1 , тобто. на всі елементи вище, які мають float . Тому «Новий рядок» починається не відразу після фотографій, а після завершення лівої колонки.

Мал. 3.41. Помилка з відображенням рядка

У таких ситуаціях допомагає комбінація різних методів. Так, фотографії можна додати до контейнера з overflow і видалити clearleft . Колонка набуде наступного вигляду.

Софійський собор

Польський костел

Новий рядок

Псевдоелемент: after

Часте включення порожнього тега

із властивістю clear захаращує код, особливо при активному використанні властивості float . Логічно перенести все в стилі, позбавившись зайвих тегів. Для цього скористаємося псевдоелементом: after, який у комбінації з властивістю content додає текст після елемента. До такого тексту можна застосувати стильові властивості, зокрема clear. Залишається тільки сховати текст, що виводиться від браузера.

Clearleft:after (content: "."; /* Виводимо текст після елемента (точку) */ clear: left; /* Скасуємо обтікання*/ visibility: hidden; /* Ховаємо текст */ display: block; /* Блоковий елемент * / height: 0; /* Висота */ )

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

Оскільки текст, що генерується через псевдоелемент: after, розташовується після елемента, він легко замінює конструкцію

. Там, де потрібно лише додати клас clearleft , як показано у прикладі 3.30.

Приклад 3.30. Псевдоелемент: after

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Вінні-Пух у гостях у Кролика

Браузер IE не підтримує :after до версії 7.0 включно, тому наведений приклад у цих версіях не працюватиме. Додавання zoom : 1 до плаваючого елемента скасовує обтікання в IE.

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

Досить часто перед верстальщиком ставляться певні нестандартні завдання. Наша мета – запропонувати найбільш раціональне та правильне рішення. Сьогодні йтиметься про особливості обтікання текстом зображення.

Постановка задачі

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

Розглянемо випадок, коли обтікання текстом не потрібно. Причому пропоную універсальний варіант – за відсутності картинки текст розтягується на всю ширину блоку (не все ж таки Ваші статті будуть супроводжуватися ілюстраціями). Ширина блоку з текстом не фіксована. Нижче показано, як має виглядати наш блок.

Правильне рішення

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

HTML

< div class = "image" > < img src= "img.png" width= "100px" height= "100px" alt= "" /> < div class = "text" >Текстовий блок

Display: inline; )

Це стандартне рішення для тексту, який обтікатиме блок з картинкою. Виглядати це буде так:

Цілком логічно запропонувати присвоїти і тексту властивості плаваючого об'єкта. При не встановлених значеннях ширин об'єкта отримаємо таку картину

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

Наступним непоганим варіантом буде пропозиція скористатися властивістю margin-left. Так як для блогу, швидше за все, всі картинки в даному блоці будуть уніфіковані за розмірами, то рішення в принципі хороше і ефективне. Однак це лише окремий випадок, тому що при відсутності картинки в статті зліва буде просто порожня смуга. Це нас не влаштовує. Ми ж шукаємо універсальне рішення!

А правильне рішення, як часто буває, є найпростішим. Щоб досягти потрібного форматування текстового блоку, необхідно звернутися до властивості overflow зі значенням hidden. Не забуваймо про унікальний Internet Explower. Він як завжди виробляється і вимагає додаткової уваги! Щоб наш дід нормально відпрацював додаємо текстовому блоку властивість float (після звернення до властивості overflow визначення фіксованої ширини не буде потрібно).

Таким чином, ми дійшли правильного рішення, яке призведе до ефекту, вказаного на малюнку в підрозділі, в якому описувалися умови нашого завдання.

Image ( float: left; / * обтікання * / margin: 10px; / * Зовнішній відступ для краси * / display: inline; /* для IE6, щоб відступ зліва не подвоївся */). text( overflow: hidden; float: left; )

Недоліки методу та альтернатива

Незважаючи на простоту та універсальність методу, що полягає у застосуванні оverflow:hiddenє один недолік. Властивість перестане виконувати свої функції, якщо в текстовій частині будуть використовуватися елементи, що випадають.

У цьому випадку буде потрібна альтернатива для налаштування потрібного форматування. Ця методика ґрунтуватиметься на функціоналі комбінації display:table-cell;. Це рішення таке ж дієве, але трохи поступається у простоті першому способу. При зверненні до цього методу також необхідно встановити layout для роботи в середовищі Internet Explower

Img (float: left; /* задаємо обтікання */ margin: 10px; /* відступ для краси */ display: inline; /* для IE6, щоб відступ зліва не подвоївся */). text( display: table- cell; zoom: 1 ; /* Обережно! Рядок невалідний */ }

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

У яких браузерах працює?

6.0+	5.0+	9.5+	4.0+	3.0+	-	-

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

1. Обтікання за допомогою стилів тега

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

де VALUE може приймати значення

• left - вирівнювання по лівому краю
• right - вирівнювання з правого краю
• bottom – вирівнювання за першим рядком тексту (це значення стоїть за замовчуванням)
• top - вирівнювання по верхньому рядку тексту
• middle - вирівнювання за базовим рядком тексту

Наприклад

Text Text Text Text Text Text text text text text text text

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

Варіант 1.1. Через властивість CSS - hspace та vspace
Для цього в атрибутах тега додаємо два значення:

Ось як це виглядатиме на сторінці:

Атрибут hspace задає горизонтальний відступ у пікселях, vspace – відповідно вертикальний

Варіант 1.2. Через властивість CSS - padding та margin
Для цього в атрибутах тега додаємо два значення:

Ось як це виглядатиме на сторінці:

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

Використання властивості float замість align

Крім властивості align в атрибутах тега у стилях є CSS властивість float, яка також відповідає за вирівнювання. Синтаксис наступний:

float: right; // Вирівнювання з правого боку float: left; // Вирівнювання по лівій стороні

Наприклад, якщо написати у попередньому прикладі виведення картинки наступним чином:

Це перетворюється на таке:

Завдяки float можна задавати єдиний class для картинок, що дуже зручно.

2. Обтікання зображення через

Усі зображення можна поміщати у блоки

. А вже самому тегу

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

//в стилях CSS: .img_class ( margin : 10px 10px 0px 0px; float : right; ) //у тілі сторінки body

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

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

1. Якщо в текстовому документі ще немає зображення, вставте його, скориставшись нашою інструкцією.

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

3. Натисніть на додане зображення, щоб на панелі керування з'явилася вкладка "Формат", розташована в основному розділі "Робота з малюнками".

4. У вкладці “Формат” натисніть кнопку "Обтікання текстом", розташовану у групі "Упорядкувати".

5. Виберіть у випадаючому меню відповідний варіант обтікання текстом:

• "У тексті"- Зображення буде "покрите" текстом по всій площі;

• "Навколо рамки"("Квадрат") - текст буде розташований навколо квадратної рамки, в якій знаходиться зображення;

• "Зверху або знизу"— текст розташовуватиметься зверху та/або знизу зображення, область з обох боків при цьому залишиться порожньою;

• "По контуру"— текст буде розміщено навколо зображення. Даний варіант особливо хороший у випадку, якщо зображення має круглу або неправильну форму;

• "Наскрізне"- текст обтікатиме додане зображення по всьому периметру, у тому числі і зсередини;

• "За текстом"— малюнок розташовуватиметься за текстом. Таким чином можна додати до текстового документа водяний знак, відмінний від стандартних підкладок, доступних у MS Word;

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

• "Перед текстом"— зображення буде розташоване поверх тексту. У такому випадку може виникнути потреба змінити колір і прозорість малюнка, щоб текст залишався видимим і добре читати.

Примітка:Назви, що позначають різні стилі обтікання текстом, у різних версіях Microsoft Word можуть відрізнятися, а типи обтікання завжди однакові. Безпосередньо у нашому прикладі використовується Ворд 2016.

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

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

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