Похожие статьи

CSS: врезка к статье (48,19%)
Мы часто сталкиваемся в журналах и газетах с информационными блоками, которые визуально выделены и по смыслу несколько оторваны от основного содержания. Это не прихоть верстальщика или редактора, эти блоки давно заняли заслуженное место в бумажных изданиях. К сожалению, в интернет-публикациях врезки встречаются нечасто. О создании врезок с помощью CSS как раз и рассказывается в статье…

Введение в оформление текстов для веб (38%)
Эта статья — попытка разрешить проблемы и рассказать о подводных камнях, связанных с публикацией текстов в сети, а также сформулировать несколько принципов создания удобных и простых для чтения веб-страниц…

Искажение информации в заголовках новостных лент (34,23%)
Если вы читаете ленты новостей, то наверняка сталкивались с проблемой несоответствия их заголовков содержанию. Новостные ленты пестрят сенсационными сообщениями, но, стоит кликнуть по ссылке, и оказывается, что за ней нет ничего примечательного. В чем причина подобных уловок и к чему это может привести?…

Автор: Земсков Юрий
www.ComputerLibrary.info

Написано для «CHIP Special»

Дата публикации 19-08-2005 17:47
Статья просмотрена 32299 раз

В предыдущем примере свойство CSS float, если вы заметили, использовалось, чтобы поместить справа блок навигации. На самом деле, у него несколько иное предназначение — float определяет обтекание одного элемента другим. С его помощью на сайте можно реализовать обтекание рисунка текстом или врезку к статье.

Свойство CSS float: обтекание рисунка текстом и врезка к статье - скриншот рассматриваемого в статье примера

XTHML верстка минимальна:

<p><img src="3_picture.jpg" />Ощущение мира, в рамках сегодняшних воззрений…</p>
<div class="vrezka">Сомнение означает типичный объект деятельности…</div>
<p>Конвергенция, конечно, — это принцип восприятия…</p>

CSS код для обтекания рисунков текстом и создания врезки чуть сложнее:

body {
background-color: #e5f8be;
font: 0.8em Verdana, Tahoma, Arial, Helvetica, sans-serif;
}

p { text-align: justify; }

p img {
float: left;
margin-right: 8px;
}

.vrezka {
float: right;
margin-left: 8px;
width: 30%;
background-color: #99cc33;
padding: 1%;
}

В нашем примере абзацы текста растянуты по ширине (text-align: justify;) исключительно ради того, чтобы нагляднее показать расположение врезки к статье. Текст внутри врезки выровнен по умолчанию — по левому краю. Ширина блока невелика и в нем не стоит растягивать текст, иначе он будет выглядеть неопрятно. Ждем, когда браузеры научатся самостоятельно расставлять переносы.

CSS селектор p img означает «определить свойства всех элементов (тегов) <img>, вложенных в элементы <p>». Первым делом для вложенных в абзацы текста картинок задаем обтекание float: left. Это свойство говорит браузеру, что элемент помещается в крайней левой части экрана (или родительского CSS блока), а все остальные элементы (в данном случае, текст) должны обтекать его справа. Чтобы буквы не прилипали к картинке, мы создаем прозрачное внешнее поле шириной 8 пикселей справа от картинки (margin-right: 8px;).

Блок врезки немного сложнее, т. к. по умолчанию его ширина зависит от содержимого. Врезка помещается к правому краю контейнера, следовательно, основной текст обтекает ее слева. Слева от врезки создано внешнее поле шириной 8 пикселей. Ширина блока (свойство width:) — 30% окна браузера, если не определить ширину, врезка растянется на 100% окна и «обтекать» ее будет негде. Чтобы визуально выделить врезку на странице, мы залили ее темно-зеленым фоном. И последний штрих, улучшим читабельность текста врезки с помощью «отбивки» его сверху, снизу, слева и справа от границ блока на 1%.

Похожие статьи

Создание сайта с помощью фреймов (33,68%)
Из огромного количества сайтов сети многие используют фреймы для тех или иных целей. Да фреймы можно использовать и с толком для сайта. С другой стороны неправильная реализация фреймов — огромная ошибка…

Создание профессионального логотипа компании (33,64%)
Логотип является важной составляющей имиджа организации. В статье рассказывается о том, как приступить к разработке качественного логотипа компании: сформулированы основные аспекты создания логотипов, различия между логотипами для печати и интернета…

Психологические тесты в сети (32,97%)
Разобраться в компьютере могут многие, разобраться в самом себе уже значительно сложнее. Сегодняшний выпуск обзоров посвящен психологическим тестам в сети. Возможно, эти тесты помогут нам разобраться в себе, нажать свой собственный ctrl + alt + delete и краем глаза посмотреть, что же там такое творится…

CSS верстка сайта: макет в три колонки (31,68%)
Создание с помощью CSS макета из трех колонок, который может послужить основой информационного сайта с «шапкой», правой и левой колонками меню, с центральным блоком текста и «подвалом» для копирайтов, контактов и прочего. Типичный для контент-проекта макет, но полностью на CSS блоках…

Многоуровневые партнерские программы: стоит ли игра свеч? (31,67%)
Интерес к партнерским программам, где комиссионные выплачиваются за клики, регистрации и продажи привлеченных вебмастеров, не угасает! Популярность Porta.ru побила все рекорды, предложив вебмастерам оплату за клики и двухуровневую реферальную программу. В действительности, зарабатывающих хорошие комиссионные на Porta.ru не так уж много…

← Раздел «Вебмастеру: Дизайн и верстка» | Комментарии (8) →

Ваше имя: 

Цифры с картинки:
Включите графику в браузере

Ваши комментарии:

Все поля формы обязательны для заполнения.
Комментарий: Любые HTML-теги в сообщениях запрещены.
Гиперссылки в комментариях не работают — добавлять спам бесполезно!
Максимальная длина комментария — 5000 символов.
Комментарии, не имеющие отношения к статье, будут удалены.

 

Разработка сайтов на первом этапе. Концепция и бриф. Итак, вы выбрали подрядчика для разработки вашего будущего сайта и провели с ним предварительные переговоры. Вам может показаться, что самое сложное в процессе разработки сайта уже позади, однако не стоит делать скоропалительных выводов. Именно сейчас для вас начнется кропотливая работа по сбору информации, анализу и принятию решений – финалом…

КРОМЕ юзабилити и дизайна: содержательный сайт Любой веб-ресурс сегодня раздираем двумя мощными силами - на первый взгляд, непреодолимыми и несовместимыми одновременно. С одной стороны, юзабилити и интерфейс требуют простоты, логичности и доступности – в общем, голого функционального минимализма. С другой стороны, развивающиеся веб-стандарты и технологии способствуют расцвету новых подходов к…

Сквозная навигация Сквозная навигация — это система связей (гиперссылок), облегчающих движение пользователя по сайту. Речь идёт о максимально возможном переплетении данных. Кроме того, наличие такой связи характеризует сайт как информативный. Считаю, будет правильным выделить несколько типов связи: связь между сервисами; вокруг события;…

CSS верстка сайта: макет в три колонки Создание с помощью CSS макета из трех колонок, который может послужить основой информационного сайта с «шапкой», правой и левой колонками меню, с центральным блоком текста и «подвалом» для копирайтов, контактов и прочего. Типичный для контент-проекта макет, но полностью на CSS блоках…

Цветной scrollbar — да или нет… В последнее время, в связи с приходом CSS в массы, особую популярность среди начинающих webmaster'ов получила возможность изменять цвет scrollbar'а окна браузера. Эта функция привлекла людей своей простотой, и нетребовательностью в знании языка. Все что остается сделать, это заменить цвета частей scrollbar'а по своему вкусу…

Разработка сайтов на первом этапе. Концепция и бриф. Итак, вы выбрали подрядчика для разработки вашего будущего сайта и провели с ним предварительные переговоры. Вам может показаться, что самое сложное в процессе разработки сайта уже позади, однако не стоит делать скоропалительных выводов. Именно сейчас для вас начнется кропотливая работа по сбору информации, анализу и принятию решений – финалом…