Представляю Вашему вниманию девятнадцатый выпуск информационной рассылки сайта "Веб дизайн в примерах". В этом выпуске рассмотрим выделение части контента сайта с помощью вставок.
Вставки - это выделенные часть текста размещающиеся сбоку от основного текста. Вставка - один из простых способов подчеркуть ключевые моменты на странице (тезисы, см. пример). Ее можно также использовать для того, чтобы привести дополнительную справочную информацию без разрыва нити повествования в основном тексте (см. пример). Вставку можно использовать и просто как блок ссылок на тематические ресурсы.
С точки зрения верстки, вставки представляют собой плавущие объекты и создаются с использованием свойства таблиц стилей float. Для начала опишем класс incut (с английского переводится как вставка).
Поясним приведенный выше код. Свойство float:right - означает, что плавающий объект будет выравнен по правому краю. Для выравнимания по левому краю используется float:left. width задает ширину вставки, margin и padding отступы от внешней и внутренней границы вставки соответственно. Свойство border задает тип рамки (в нашем случае толщиной в один пиксель пунктирной серой линией). Свойство background-color задает цвет фона (у нас он светло серый), а свойства text-align и font-size выравнивание и размер такста соответственно. Создать вставку можно задав описанный выше стиль incut для тега <div>. Использованная в этой рассылке вставка имеет вид:
P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").