Рисунок и подпись в рамке
Чтобы отделить рисунок от основного текста, достаточно поместить изображение с подписью в рамку с фоном.
Для создания такой подписи используем тег <DIV>, он выступает в качестве контейнера, в который помещаем изображение через тег <IMG>, а подпись к нему — с помощью тега <P>. Для каждого элемента такой конструкции можно установить свои стилевые параметры, что позволяет гибко настроить ее вид. Единственная особенность — требуется задать ширину всего блока в пикселах или процентах через атрибут width.
Пример:
<!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">
.pic {
border: 1px solid #333;
background-color: #f0f0f0;
color: navy;
padding: 10px;
width: 250px;
text-align: center;
position: relative;
left: 50%;
margin-left: -125px;
}
.pic img {
border: 1px solid #333;
}
.pic p {
margin: 0px;
padding-top: 5px;
}
</style>
</head>
<body>
<p>Этот светильник эсклюзив. Так как сделан из всяких ненужных вещей</p>br>
<div class="pic">
<img src="0110.gif" width="150" height="120" alt="Этот светильник эсклюзив">
<p>Этот светильник эсклюзив</p>
</div>
<p>Использовались все, что было под рукой, не имеющих даже близко отношений к светильнику</p>
</body>
</html>
Выравнивать блок с рисунком и подписью по центру можно разными способами. В данном примере применяется относительное позиционирование со сдвигом вправо на 50%. Поскольку отсчет координат ведется от левого края слоя, то переноса на 50% недостаточно, чтобы точно расположить слой по центру. Поэтому еще требуется сместить слой влево на половину его ширины за счет margin-left с отрицательным значением.
Пример:
Рисунок и подпись в рамке
Подрисуночная подпись
Этот светильник эсклюзив.
Так как сделан из всяких ненужных вещей
Этот светильник эсклюзив
Использовались все, что было под рукой.
Не имеющих даже близко отношений к светильнику
