Рассылка закрыта
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
Рецепты HTML # 106
| Информационный Канал Subscribe.Ru |
| | Руководство
| Дизайн и юзабилити
| Графика
| Создание и раскрутка сайта | | Справочная информация | Инструментарий | Шаблоны | Все статьи | Форум | |
Добрый день.
Спасибо всем, кто высказал свое мнение об электронных книгах. Книги будут! Осталось найти только рекламодателей для размещения рекламы в этих книгах. Такая вот идея недавно пришла в голову, раз есть книги и они достаточно популярны (каждую скачивают минимум 10 тысяч человек), то можно предложить размещать в них рекламную страницу. Но идея идеей, а как получится ее реализовать, еще предстоит узнать.
На сайте теперь можно писать свой комментарий к каждой статье. Используемый для этого подход отличается от стандартного. При добавлении комментария страница не перегружается, как обычно, а появляется всплывающее окошко с текстом о том, что комментарий добавлен. Это окно автоматически закрывается через 15 секунд, если не сделать это самому. Программа написана это на языке JavaScript и оформлена весьма необычно, пришлось постараться, чтобы придать оригинальность обыкновенному закрытию окна. Рекомендую взглянуть, для этого следует добавить свой комментарий к любой статье. Только писать желательно по теме, иначе текст будет безжалостно удален. Посмотрим, насколько описанный подход к написанию комментариев приживется.
Напоминаю, что в каждом выпуске рассылке публикуется описание одного из свойств CSS. Идут они в алфавитном порядке, поэтому тем, кто желает узнать подробности про z-index, придется подождать выпусков 70, именно столько примерно разных параметров. Или подождать до декабря, когда весь список будет выложен на сайте к его годовщине.
Сегодня новая статья, посвященная обтеканию изображения текстом. Адрес статьи на сайте — www.htmlbook.ru/content/?id=183
Обтекание картинки текстом
Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон. Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.
Использование параметра align тега IMG
Выравнивание изображения определяется параметром align тега IMG. Этот параметр задает, возле какого края окна будет располагаться рисунок, одновременно определяя и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right, соответственно, обратное ему значение — left. Параметр align часто используют в связке с другими параметрами тега IMG — vspace и hspace. Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу (пример 1).
Пример 1. Использование свойств изображения<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. Использование таблицы<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.
|
Таблица создает невидимую границу, которая отстоит от самого изображения и не позволяет тексту приблизиться к нему. Размер отступа регулируется шириной и высотой таблицы. Так, в примере, рисунок выравнивается по левому краю, поскольку этот способ выравнивания установлен у таблицы. Горизонтальный отступ от текста до рисунка будет равен разнице между шириной таблицы и шириной изображения. С вертикальным отступом дело обстоит иначе, по умолчанию выравнивание содержимого ячейки происходит по центру вертикали. Так что если параметр valign=top у тега TD не задан, отступы по вертикали будут в два раза меньше, чем отступ по горизонтали.
Использование стилей
Для обтекания картинки текстом можно применить параметр float. Значение right будет выравнивать изображение по правому краю окна браузера, а текст размещать слева от рисунка. Значение left, наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка (пример 3).
Пример 3. Использование стилей<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, не сильно отличаются друг от друга.
background-attachment
| Браузер | Internet Explorer | Netscape Navigator | Opera | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Платформа | Windows | Macintosh | Все платформы | Все платформы | ||||||||
Версия |
4.0 | 5.0 | 5.5 | 6.0 | 4.0 | 5.0 | 4.x | 6.0 | 7.0 | 3.5 | 5.0 | 7.0 |
| Поддерживается | Да | Да | Да | Да | Да | Да | Нет | Да | Да | Да | Да | Да |
Описание
Параметр background-attachment устанавливает, будет ли прокручиваться фоновое
изображение вместе с содержимым элемента. Изображение может быть зафиксировано
и оставаться неподвижным, либо перемещаться совместно с документом.
Синтаксис
background-attachment: fixed | scroll
Аргументы
Значение fixed делает фоновое изображение элемента
неподвижным, scroll — позволяет перемещаться
фону вместе с содержимым.
Значение по умолчанию
scroll
Наследование
Значения, присвоенные данному параметру, не наследуются.
Применяется
Ко всем элементам.
Объектная модель
[window.]document.getElementById.elementID.style.backgroundAttachment
Материалы данного сайта охраняются законом об авторском праве.
Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт.
| http://subscribe.ru/
E-mail: ask@subscribe.ru |
Отписаться
Убрать рекламу |
| В избранное | ||
