На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » CSS

Обтекание картинки текстом

Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон. Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.


Использование параметра align тега IMG

Выравнивание изображения определяется параметром align тега IMG. Этот параметр задает, возле какого края окна будет располагаться рисунок, одновременно определяя и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right, соответственно, обратное ему значение — left. Параметр align часто используют в связке с другими параметрами тега IMGvspaceи hspace. Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу (пример 1).

Пример 1. Использование свойств изображения

<html>
<body>

<img src=sample.gif width=50 height=50 hspace=10 vspace=10 align=left>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</body>

</html>

Горизонтальный отступ от картинки до текста управляется параметром hspace, он добавляет пустое пространство одновременно слева и справа от изображения. Поэтому рисунок от края окна будет отстоять на значение, указанное этим атрибутом. Чтобы избавиться от данной особенности можно использовать таблицы.


Использование таблиц

Таблицы с невидимой границей — один из популярных способов верстки, который может пригодиться и в случае обтекания изображения текстом. Для достижения нужного результата воспользуемся свойством align тега TABLE, имеющее такое же значение и применение, как и у изображения. Но у таблиц больше параметров для управления их отображением, что дает преимущества по обтеканию текста в сравнении с изображениями (пример 2).

Пример 2. Использование таблицы <table width=70 height=70 border=0 align=left cellpadding=0 cellspacing=0>
<tr>
<td><img src=sample.gif width=50 height=50></td>
</tr>
</table>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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

Таблица создает невидимую границу, которая отстоит от самого изображения и не позволяет тексту приблизиться к нему. Размер отступа регулируется шириной и высотой таблицы. Так, в примере, рисунок выравнивается по левому краю, поскольку этот способ выравнивания установлен у таблицы. Горизонтальный отступ от текста до рисунка будет равен разнице между шириной таблицы и шириной изображения. С вертикальным отступом дело обстоит иначе, по умолчанию выравнивание содержимого ячейки происходит по центру вертикали. Так что если параметр valign=top у тега TDне задан, отступы по вертикали будут в два раза меньше, чем отступ по горизонтали.


Использование стилей

Для обтекания картинки текстом можно применить параметр float. Значение rightбудет выравнивать изображение по правому краю окна браузера, а текст размещать слева от рисунка. Значение left, наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка (пример 3).

Пример 3. Использование стилей <html>
<body>

<img src=sample.gif width=50 height=50 hspace=10 vspace=10 style="float: left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</body>

</html>

Параметры hspace и vspace, как писалось выше, включать нужно обязательно, иначе текст будет слишком плотно прилегать к изображению. Фактически, способы, показанные в примере 1 и 3, не сильно отличаются друг от друга.

Влад Мержевич
Рецепты HTML

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100