Как добавить подпись под фотографией?

🕛 19.01.2009, 19:02

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

Чтобы связать фотографию и подпись к ней воедино, их следует поместить в один блок и присвоить ему имя класса, к которому будут применяться стилевые параметры. Такой блок можно выравнивать по правому или левому краю, добавляя стилевой атрибут float со значением right или left, а также задавать цвет фона и параметры рамки (пример 1).

Пример 1. Подпись под фотографией

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Подрисуночная подпись</title> <style type="text/css"> .sign { float: right; /* Выравнивание по правому краю */ border: 1px solid #333; /* Параметры рамки */ padding: 7px; /* Поля внутри блока */ margin: 10px 0 5px 5px; /* Отступы вокруг */ background: #f0f0f0; /* Цвет фона */ } .sign p { margin: 0 auto 5px; /* Отступы вокруг абзаца */ } </style> </head> <body> <div class="sign"> <p><img src="images/helen.jpg" width="150" height="212" alt="Скульптура"></p> <p>Деревянная скульптура</p> </div> <p>Точность крена эллиптично позволяет пренебречь колебаниями корпуса, хотя этого в любом случае требует нестационарный успокоитель качки, исходя из общих теорем механики. Прецессия гироскопа трудна в описании. Ось собственного вращения, в силу третьего закона Ньютона, не входит своими составляющими, что очевидно, в силы нормальных реакций связей, так же как и курс, даже если не учитывать выбег гироскопа. Однако исследование задачи в более строгой постановке показывает, что ошибка характеризует прецизионный гироскопический маятник, что видно из уравнения кинетической энергии ротора.</p> </body>
</html>

Поскольку в нашем случае ширина блока с фотографией не задавалась, то она будет определяться автоматически исходя из размера изображения и подписи к нему. Как видно на рис. 1 такой подход приводит к тому, что отступы слева и справа от фотографии получаются разными. Исправляется данная особенность добавлением к стилям блока атрибута width с фиксированным значением.