Приднестровская поддержка XOOPS
Изображение можно окружить текстом средствами HTML, а именно с помощью атрибута align. В настоящее время использовать его не рекомендуется, однако CSS предлагает полноценную замену этому атрибуту!
Решение
Для реализации обтекания текстом изображения слева или справа используется CSS-свойство float, как показано на рис. 9.5.
Код страницы будет таким:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Float</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<style type="text/css">
.xoopsimg {
float: left;
width: 155px;
}
</style>
</head>
<body>
<h1>Что такое XOOPS?</h1>
<img src="img/xoops-cover.jpg" alt="xoops" class="xoopsimg" />
<p><strong>XOOPS</strong> - это динамический OO (Объектно-Ориентированный)
основанный на открытом исходном коде скрипт портала, написанный на PHP.
XOOPS поддерживает различные базы данных, XOOPS - это идеальный инструмент
для создания небольших высоко-динамичных сообществ вэб-сайтов, внутренних
порталов компании, корпоративных порталов, web-публикаторов и многого другого.</p>
<h3>Технические требования:</h3>
<ul>
<li> WWW сервер (<a href="http://www.apache.org/">Apache</a>, IIS, Roxen, etc)</li>
<li> <a href="http://www.php.net/">PHP</a> 5.2 или выше</li>
<li> <a href="http://www.mysql.com/">База данных MySQL</a> 5.0 (или выше)</li>
</ul>
<p style="text-align: right;"><a href="#">скачать XOOPS</a></p>
</body>
</html>
Рис. 9.5. Обтекание изображения текстом с помощью свойства float
Обсуждение
Свойство float(1) удаляет элемент из обычного потока и размещает его у правого или левого края родительского блока. Остальные блочные элементы будут вести себя так, как будто указанного элемента вообще не существует. Однако строковые элементы, такие как контент, будут смещаться, освобождая для него пространство, и потому использование свойства float создает эффект обтекания изображения текстом.
Как видно на рис. 9.5, текст расположен вплотную к границе изображения. При добавлении к изображению рамки он будет соприкасаться с ней.
Для добавления пустого пространства между текстом и изображением необходимо задать для изображения внешний отступ. Поскольку оно смещено к левой границе родительского элемента, достаточно будет добавить отступ справа и снизу, чтобы слегка отодвинуть текст от него:
.xoopsimg {
float: left;
width: 155px;
border: 2px solid #000000;
margin-right: 20px;
margin-bottom: 6px;
}
На рис. 9.6 показан результат обработки данного кода: теперь между изображением и текстом появился просвет.
.Рис. 9.6. После добавления дополнительных отступов справа и снизу документ выглядит привлекательнее
Отправитель | Нити |
---|
3 пользователь(ей) активно (2 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 3 далее... |