Свойство CSS float: обтекание рисунка текстом и врезка к статье (48,19%)
Свойство CSS float определяет обтекание одного элемента другим. С его помощью на сайте можно реализовать обтекание рисунка текстом или, например, врезку к статье. Рассмотрение float: на этих примерах и будет целью данной статьи…
CSS верстка сайта: макет в три колонки (44,83%)
Создание с помощью CSS макета из трех колонок, который может послужить основой информационного сайта с «шапкой», правой и левой колонками меню, с центральным блоком текста и «подвалом» для копирайтов, контактов и прочего. Типичный для контент-проекта макет, но полностью на CSS блоках…
Skype: весь мир может болтать бесплатно! (40%)
Главное преимущества разговора через интернет - это бесплатные звонки с компьютера на компьютер, т.е. Вы можете позвонить в любую точку мира совершенно бесплатно! Далее Вы узнаете обо всем, что необходимо для разговора по интернету. Вам необходимы две составляющие: Первая составляющая - это программа для общения в сети. Существует несколько…
Мы часто сталкиваемся в журналах и газетах с информационными блоками, которые визуально выделены и по смыслу несколько оторваны от основного содержания. Это не прихоть верстальщика или редактора, эти блоки (врезки) давно заняли свое заслуженное место в бумажных изданиях. К сожалению, в интернет-публикациях врезки встречаются нечасто.
Врезка может использоваться не только для пояснений, но и для различной дополнительной информации, которая хотя бы отдаленно связана со статьей — для новостей, личных (и, возможно, оппозиционных) мнений по рассматриваемому в статье вопросу… Одна из важных функций врезки заключается в том, чтобы на время отвлечь (и развлечь) читателя большой статьи от основного текста, переключить его внимание на другую информацию.
Веб-мастера могут извлечь дополнительную выгоду от использования врезок к статьям — в них можно размещать справочную информацию о рассматриваемом вопросе или продукте (ссылки, адреса, фамилии). Можно приспособить блок врезки для размещения рекламы прямо в тексте статьи — нестандартное положение рекламного блока должно увеличить его эффективность. Немного фантазии и код блока врезки можно превратить в средство для создания буквицы или для обтекания рисунка текстом.
Сам блок мы сделаем с помощью CSS. Беспрецедентная простота решения с помощью CSS (в отличие от таблиц) и стала причиной затянутого введения к статье — необходимо как-то «подтянуть» заметку до размеров средней статьи :).
Приведем CSS-код, используемый на этом сайте для создания врезок, и прокомментируем его, чтобы проще было приспособить код к другим веб-сайтам. Универсальных советов не бывает, но для реализации врезок к статьям у себя на сайте вам потребуется внести минимум изменений. Итак:
.breakoutr {
float: right;
width: 35%;
padding: 10px;
margin-left: 10px;
background-color: #ccc;
color: #000;
text-align: left;
line-height: 120%;
}
HTML-код еще проще. Размещать его надо перед тем абзацем текста, рядом с которым вы хотите пустить врезку.
<div class="breakoutr">Текст врезки</div>
Подробнее: здесь и здесь.
Директива CSS «float: right;» прикрепляет врезку к правой стороне родительского блока и заставляет остальные элементы обтекать ее слева. Подробнее - см. врезку :). Этот CSS-блок, как и любой другой, при отсутствии значения ширины займет все доступное пространство по горизонтали, и «обтекать» его будет негде. Поэтому необходимо задать ширину врезки (width:). 35% — эмпирически подобранное значение. С одной стороны, врезка не должна быть очень узкой — неудобно читать текст с шириной строки в одно слово, с другой стороны, врезка не должна занимать слишком много места и ограничивать основной текст статьи.
Таков минимально необходимый для создания врезки код. Все остальное — исключительно оформительство, которое каждый делает, исходя из своих вкусов и потребностей. Хотя… две следующие директивы тоже важны, если и не для функциональности врезки, то точно для сохранения опрятности верстки статей.
Директива «padding: 10px;» задает отступ от границы блока в 10 пикселей для информации внутри врезки, чтобы текст не располагался вплотную к краям блока, что может затруднить чтение. Значение в 10px выбрано, исходя из соображений разумной достаточности — создает заметный отступ, но не отнимает много места у полезной информации. Margin наоборот задает отступ блока от внешних элементов. В нашем случае текст обтекает врезку слева, поэтому для удобства чтения слева от блока задается свободное пространство в 10px. Дополнительную информацию о «хитросплетениях» padding'ов и margin'ов можно почерпнуть, например, по этим ссылкам:
Background-color определяет фоновый цвет для врезки, чтобы визуально выделить ее из остального текста статьи и привлечь внимание читателя. Color задает цвет шрифта. При желании можно сделать и декоративную рамку для врезки, например — «border: 1px dashed black;». Однако это кажется ненужным усложнением «конструкции».
«text-align: left;» позволяет выровнять текст врезки по левому краю. Выравнивание по ширине лучше не использовать. Из-за недостаточной для этого ширины блока строки будут выглядеть неопрятно. line-height определят расстояние между строками (интерлиньяж, высоту строки) в процентах от размера шрифта. На сайте используется небольшой размер шрифта, поэтому для удобства чтения задано большое межстрочное расстояние. Однако для блока врезки используется меньшее значение — 120%, чтобы сократить размер блока по вертикали. Т. к. тексты для врезки, как правило, используются небольшие, уменьшенный интерлиньяж не должен сильно сказаться на удобстве чтения. Если на вашем сайте используется большой шрифт, можно для экономии пространства вместо высоты строки установить меньший размер шрифта; как вариант: «font-size: smaller;».
Вот и все, о чем хотелось рассказать. Код вполне можно расширять и дальше. Например, переписать его под «левую руку» — float: left; margin-right: 10px; — и еще множество различных улучшений. Главным остается то, что использование врезок позволит улучшить качество публикаций на сайте. Учитывая же простоту реализации, эта возможность кажется вдвойне привлекательной.
Google и тематика сайта (37,21%)
Понятие «тематика» имеет множество значений, в Google «тема» является предметом поиска — «топиком» (тематическим разделом). Топик — это тематика повествования веб-страницы. Тематика страницы влияет на ее релевантность в Google…
Верстка таблиц (35,29%)
В статье рассказывается о тегах, которые могут быть использованы для верстки таблиц. Именно для верстки таблиц, а не для верстки сайтов таблицами. Если вы никогда не использовали ничего кроме <table>, <tr>, <td>, тогда вы узнаете много того, что позволит лучше структурировать табличную информацию и изменять ее визуальное представление…
Как заработать в Интернете (34,78%)
Еще одна статья на избитую тему с банальным названием. На этот раз под моим субъективным углом зрения. Если отбросить фантастические и нереальные способы то остается: Удаленная работа Заработок на сайтах (партнерские программы, контекстная реклама и т.д.) Продажа реальных товаров через Интернет Продажа цифровых товаров через Интернет Торговля на…
Из пустого в порожнее: статьи по веб-дизайну (34,38%)
Ситуация с новыми оригинальными материалами по веб-дизайну в Рунете просто ужасающая. И, если интересных зарубежных публикаций в сети вполне хватает, а дела с переводными статьями обстоят еще куда ни шло, то русскоязычных авторов явно настиг творческий кризис…
Аудит веб-сайта (34,29%)
Не можете достичь успеха в раскрутке и продвижении сайта? Выход один — бросать всякую самодеятельность и принимать на работу специалиста в области оптимизации или обращаться за помощью к профессиональным компаниям. Для начала Вам нужны профессионалы, способные провести аудит и анализ вашего сайта…