Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
6.0+ | 1.0+ | 9.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Додати підпис під фотографією так, щоб вони одночасно обтекались довколишніх текстом.
Рішення
Підпис під фотографією зазвичай застосовується для коментування зображення і короткого опису. Хоча додати підпис можна за допомогою звичайного абзацу, цей спосіб не працює, як тільки фотографію необхідно розташувати по правому або лівому краю веб-сторінки. Підпис має бути нерозривна з зображенням, незалежно від способу його розташування на сторінці.
Щоб зв'язати фотографію і підпис до неї воєдино, їх слід помістити в один блок і присвоїти йому ім'я класу, до якого будуть застосовуватися стильові параметри. Такий блок можна вирівнювати по правому або лівому краю, додаючи стильове властивість float зі значенням right чи зліва, а також задавати колір фону і параметри рамки (приклад 1).
Приклад 1. Підпис під фотографією
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <HTML> <head> <meta charset= "utf-8"> <title>Підпис зображення</title> <style> .sign { float: right; /* Вирівнювання по правому краю */ border: 1px solid #333; /* Параметри рамки */ padding: 7px; /* Поля всередині блоку */ margin: 10px 0 5px 5px; /* Відступи навколо */ background: #f0f0f0; /* Колір фону */ } .sign figcaption { margin: 0 auto 5px; /* Відступи навколо абзацу */ } </style> <!--[якщо lt IE 9]> <script> document.createElement ('figure'); document.createElement ('figcaption');</script> <![endif]--> </head> <body> <figure class="sign"> <p><img src="images/helen.jpg" alt="Скульптура"></p> <figcaption>Дерев'яна скульптура</figcaption> </figure> <p>Мистецтво дерев'яної скульптури в Україні має давні традиції. Є припущення, що дерево як матеріал для скульптури використовували уже в період трипільської культури. Описи святилищ (капищ) давніх слов’ян-язичників свідчать про встановлення дерев’яних ідолів у них (зокрема статуї Перуна у Києві). Певне уявлення про такі вироби дають нечисельні кам’яні скульптури 9–11 ст., наприклад, Збруцький ідол, спосіб і прийоми створення якого тотожні і техніці дерев'яної скульптури тих часів.</p> </body> </html>
Результат цього прикладу показано на рис. 1. Для блоку використовується тег <figure>, а для підпису до зображення тег <figcaption>. Старі версії IE не розуміють ці теги, тому спеціально для них додається невеликий скрипт.
Рис. 1. Фотографія з підписом, вирівняний по правому краю сторінки
Оскільки в нашому випадку ширина блоку з фотографією не задавалася, то вона визначатиметься автоматично виходячи з розміру зображення і підпис до нього. Як видно на рис. 1 такий підхід призводить до того, що відступи ліворуч і праворуч від фотографії виходять різними. Виправляється дана особливість додаванням до стилів блоку властивості width з фіксованим значенням.