php, java
статьи, книги
рефераты, ГДЗ

Бесплатные ключи и сброс
пробной версии для Касперского

Все для cs 1.6

Самые лучшие сеты моделей и избранные подборки девушек

Четверг, 06 Авг 2020, 10:37:16

Приветствую Вас Гость | RSS
Главная | Каталог статей | Регистрация | Вход
Меню сайта

ФИЗИКА!!! NEW!!!

Русский!!! NEW!!!

Категории раздела
Дизайну, графика и баннеры [17]
Советы, примеры, уроки, заметки по дизайну, графике и баннерам
PHP - примеры скриптов [21]
PHP - примеры скриптов
Программирование и заработок [114]
Программирование на самых популярных языках, заметки о заработке, оболочки
Статьи по поисковой оптимизации [9]
Статьи по поисковой оптимизации
php и базы данных [14]
Хитрости при программировании php, заметки по базам данных
Заработок в Интернете [7]
Материалы по заработку в интернет

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Главная » Статьи » Статьи по Web дизайну » Программирование и заработок

Свойство CSS float: обтекание рисунка текстом и врезка к статье
В предыдущем примере свойство CSS float, если вы заметили, использовалось, чтобы поместить справа блок навигации. На самом деле, у него несколько иное предназначение — 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%.

Категория: Программирование и заработок | Добавил: ceg (16 Авг 2007) | Автор: linuxcenter.ru
Просмотров: 202 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Имя *:
Email *:
Код *:
Форма входа

Реклама

Поиск

Друзья сайта
  • Играете в Counter-Strike??? ВАМ СЮДА!!!

  • Copyright CEG © 2020