CSS: Обтекание элементов. Обтекание картинок html-списками
Задача
Добавить изображение на страницу так, чтобы оно обтекалось рядом лежащим текстом.
Решение
Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float , добавляемого к селектору IMG . Значение left выравнивает изображение по левому краю, right - по правому. Обтекание при этом происходит по другим, свободным сторонам.
Пример 1. Обтекание картинок
HTML5 CSS 2.1 IE Cr Op Sa Fx
Доклад лейтенанта Бокатуева
Вчера во время проведения разведоперации наша группа подверглась нападению неизвестного
противника в камуфляжной форме Алиенов. В результате эффективной обороны и стремительной
контратаки многочисленная группа боевиков была смята и отброшена. Среди личного состава
потерь нет. Бойцы разведгруппы проявили недюжие навыки владения оружием. Особо отличился
в бою взводный Кудряшев М.А., грамотно использовавший человеческие ресурсы
своего взвода. В результате операции были захвачены элементы внеземной культуры, которые
переданы аналитической группе.
Пресс-релиз аналитической группы
В наших секретных лабораториях в рамках проекта «Пандора» разрабатывалось
психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших
над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии
аффекта, растащили прототип по деталям. Возможно, наши ученые до сих пор находятся в
состоянии аффекта.
Результат данного примера показан на рис. 1.
Рис. 1. Текст с иллюстрациями
Использование свойства float заставляет текст плотно прилегать к изображению. Поэтому в примере введёно универсальное свойство margin , которое добавляет отступы между картинкой и текстом. Это свойство одновременно задаёт отступ сверху, справа, снизу и слева от фотографий.
или подробно о процессе обтекания HTML картинок и текстов
Глава содержит примеры обтекания текста картинкой из области Гипертекстовой разметки.
В меню слева вы найдете современные и очень подробные уроки по HTML.
Они позволят вам создать свой сайт с чистого листа , а пока смотрим немного ниже.
В данной главе мы рассмотрим
Прежде, чем приступить к HTML обтеканию , предлагаю ознакомиться с информацией.
Это может быть интересно.
Восход и развитие сети интернет
Интернет непрерывно расширяется. Он становится глобальной сетью за счет того, что к нему постоянно присоединяются отдельные частные лица и крупные коммерческие структуры, локальные и региональные компьютерные сети со всего Мира. В 1993 году была разработана технология Word Wide Web, которая превратилась в одну из самых важных служб в рамках Всемирной паутины. Данная структура спровоцировала рост популярности технологии интернет , вызвала небывалый интерес со стороны будущих веб-дизайнеров и разработчиков, со стороны миллионов людей, которые впоследствии занялись созданием сайтов для своего собственного удовольствия и на благо общества. Интернет стал неотъемлемой частью современной цивилизации. Проникая в сферу образования, торговли, связи, услуг, Глобальная сеть создает новые формы общения, способы обучения, торговли и развлечений. Интернет-поколение является настоящим социокультурным феноменом наших дней и это поколение не может представить себе жизнь без Всемирной сети.
HTML обтекание картинки текстом
|
|
Текст вверху картинки
Текст по серединеРезультат:
Атрибуты и значения
- align="top" - выравнивает картинку и текст по верху.
- align="middle" - выравнивает картинку и текст по центру, по вертикали.
- align="bottom" - выравнивает картинку и текст по низу.
Обратите внимание на способ подгрузки изображения: ../images/2121.png . Во-первых, использован формат PNG (.png). Во-вторых, изображение находится в отдельной папке, то есть документ у меня в одной папке, а изображение в другой. В таких ситуациях очень важно правильно указать путь от документа к подгружаемой картинке, что и было сделано: первые две точки.. определяют выход из папки где находится документ (все уроки, они же страницы, они же документы курса по HTML у меня находятся в одной папке, CSS - в другой, изображения - в третьей и так далее); /images/ - не что иное, как название папки с изображениями, а 2121.png - полное имя файла самой картинки.
Способы горизонтального обтекания HTML текста
Результат:
Пример HTML обтекания текста картинкой справа
 Изображение обтекает текст справа Изображение обтекает текст справа Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа |
Список налезает на картинку, рисунок или изображение при обтекании его текстом. Например так: картинка выравнивается по левому краю (всплывает налево) - float:left; , текст списка обтекает её справа, как на скриншотах. При обтекании картинки, (нумерация, маркировка) списка наползают на изображение и получается трабл (trouble , англ. - «ошибка», «проблема»). Щёлкайте картинки для полного просмотра:
Напрашивается простой способ подправить ситуацию - увеличить отступ (margin) у картинки до тех пор, пока бу́ллеты списка не «слезут с неё»
В случае простого увеличения отступа (margin) у рисунка, вместе со списком - «уезжает» вправо и обычный текст
Оставим картинку в покое и займёмся списком, за пределы которого вылезает его маркировка. Корень проблемы кроется в редко используемом свойстве элемента списка . Это свойство определяет положение (размещение) маркеров списка относительно его текста. list-style-position имеет два значения: outside - маркер (бу́ллет) находится за границей элемента списка, как отдельный независимый объект и inside - маркер расположен внутри элемента (маркер встроен в элемент и обтекается его текстом).
Значение list-style-position по умолчанию, для всех браузеров - outside . Маркер находится за границей элемента списка, как отдельный независимый объект. Вот потому-то он и «лезет» на нашу картинку. Margin (отступ) картинки «упирается рогом» непосредственно в текст списка, а бу́ллеты «зависают» за его пределами и попадают на поле изображения. Радикально меняет обстановку с обтеканием рисунка списком предлагаемый CSS-код:
li {
margin: 0;
padding-left: 1,9em;
list-style-position: inside;
text-indent: -1em;
overflow: hidden;
}
Прописать спасительный код для элемента списка (
Разница большая:
- При назначении глобальных свойств, действующих сразу на все списки на странице - изменяются элементы управления, созданные на основании этих свойств и списков. В результате - «уезджают» меню и менюшки навигации сайта.
- В случае с индивидуальным классом, вида (class=”list”) - его придётся вставлять вручную в html-код требуемых списков.
- Выручает «золотая середина» - найти в шаблоне класс текстового блока страницы и назначить свойства обтекания рисунков только для его списков. Тогда, в тексте новости (сообщения, комментария) страницы - списки будут красиво обтекать картинки и изображения, а остальная часть сайта - останется неизменной.
Прописанное свойство для элемента списка (
- ,
- ). Оно и вестимо, ведь «втянув» маркёр внутрь списка и сделав отступ для его отображения (padding-left: 1,9em;) мы визуально уменьшили ширину списка на 1,9em. Подобная мелочь с успехом исправляется в CSS, в свойствах списков (теги
- ,
- ). Примечательно, что изменение отступа для списка никак не отражается на его обтекании рисунка
Перед началом работы со списком по данной теме, неплохо ему задать рамку (свойство border:2px solid #000;). Это позволит наглядно увидеть расположение бу́ллетов «до» и «после» редактирования.
Интересный эффект обтекания картинки даёт простое использование для списка CSS-свойства overflow: hidden; . В этом случае - обтекание выполнится нормально, но у списка будут отсутствовать маркёры (бу́ллеты). Иногда, именно такой эффект и требуется получить. Пример кода для обтекания рисунка списком, с простым overflow: hidden;
Код CSS для элементов списка
li {overflow: hidden;}
Код CSS для всего списка
(глобально, для всей страницы):
ul,ol {overflow: hidden;}
Подобные извращения с overflow: hidden; навеяны вышестоящим кодом. На самом деле, такого-же эффекта можно достичь простым list-style: none; Это CSS-свойство убирает маркеры списка без всяких там «обрезаний». Кроме этого, свойство работает в любой ситуации, тогда как overflow: hidden; - только в сочетании с list-style-position: outside; - когда списка находятся за пределами текста списка.
С помощью свойства float можно выровнять изображение по левому (img {float: left; margin: 0 [x] [y] 0;}) или по правому (img {float: right; margin: 0 0 [x] [y];}) краю веб-страницы или блока-контейнера.
Чтобы картинка не сливалась с текстом, для нее добавляют соответствующие значения свойства margin .
Отменить обтекание следующего блока текста или заголовка можно при помощи конструкции h2, p {clear: left;} или h2, p {clear: right;} .
Также можно расположить изображение по центру страницы img {display: block; margin: 0 auto;} , или сделать обтекание картинки текстом с двух сторон, обернув каждый блок текста в отдельный абзац.
Разметка HTML
List of towns in England
Amersham
Amersham is ....jpg">Buxton is ...
Chesterfield
Chesterfield is ....jpg">
It has ....jpg">Dartmouth is ...
CSS стили
Body { margin: 0; background: #FFF8E8; padding: 0 20px; font-size: 90%; counter-reset: h2; /*создаем счетчик для любого заголовка h2*/ } h1 { font-family: "Lora", serif; color: #564C4A; font-weight: 300; } h2 { font-family: "Lora", serif; color: #B00D22; font-weight: 300; clear: both; /* отменяем обтекание с обеих сторон */ padding: 1em 0 0.25em; border-bottom: 2px solid; counter-increment: h2; /* задаем увеличение нумерации заголовков h2 на единицу */ } h2:before { content: " " counter(h2) ". "; /* добавляем в начале каждого заголовка текущее значение счетчика и точку с пробелом */ } p { font-family: arial; color: #785F5B; line-height: 1.3; } /********** картинка слева **********/ .left { float: left; margin: 0 1em 1em 0; } /********** картинка справа **********/ .right { float: right; margin: 0 0 1em 1em; } /********** картинка между текста **********/ .columns { float: left; max-width: 30%; margin: 0; } .img-center { float: left; margin: 0 1.5% 0 1.5%; max-width: 37%; } /********** картинка по центру********* */ .center { display: block; margin: 0 auto 1.5%; }
Обтекание картинки с двух сторон
Приём заключается в том, что текст помещается в два блока одинаковой ширины с небольшим промежутком посередине. С помощью псевдоэлементов:before и:before в каждый блок добавляется заглушка шириной в половину картинки и высотой, равной высоте картинки. Картинка абсолютно позиционируется таким образом, что закрывает собой эти пустые блоки, в результате чего и получается эффект обтекания с двух сторон.
Разметка HTML
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
В этой статье мы расскажем вам о тех особенностях HTML и CSS, которые связаны с изображениями. Вы узнаете, как вставить их в HTML-документ. Также в статье приведена информация о том, как изменить параметры рисунка и организовать обтекание картинки текстом.
Сначала - о вставке изображения. Для этого существует у которого есть несколько атрибутов. Основной из них - "src". В нём хранится адрес, из которого браузер сможет вставить картинку. Можно указать путь к изображению, уже сохраненному в компьютере, или дать ссылку на веб-ресурс.
Следующая немаловажная пара атрибутов - "width" (ширина) и "height" (высота). Они используются для того, чтобы вручную изменить размеры картинки (полезная опция для растяжения и сжатия изображения).
У тега есть такие атрибуты, как "alt" и "title". Они похожи между собой, так как назначением их является описание картинки. Но в "title" прописывается текст, который показывается при наведении мышки на изображение, а буквенное значение атрибута "alt" отображается в том случае, если картинку загрузить не удалось.
Существует еще несколько специфических атрибутов, присутствующих у большинства тегов. Это "accesskey", "class", "id" и "style". "Accesskey" задаёт с помощью которого осуществляется доступ к объекту. "Class" и "id" - параметры, связанные с CSS. Они описывают то, к какому классу принадлежит картинка (или её идентификатор). "Style" - атрибут текста, позволяющий задать встроенный CSS-стиль изображения.
Одним из параметров, задающих внешний вид картинки, является "border". Он определяет толщину рамки вокруг объекта и может быть задан любым целым положительным числом (в пикселях).
Следующий атрибут - "align". Он описывает обтекание картинки текстом. Этот параметр может принимать значения "bottom", "middle", "left", "right" и "top". Каждое из значений определяет то, где будет находиться картинка относительно текста. Например, при значении "middle" середина изображения будет выравниваться по нижней границе текста, а при "left" - объект будет находиться по левую сторону от текста. Но это только один из способов задать обтекание картинки текстом - HTML.
Есть и другой мощный инструмент - CSS (значительно более универсальный). С его помощью можно гораздо эффективнее задать атрибуты тега, в том числе и обтекание картинки текстом. CSS позволяет определить параметры не только конкретного объекта, а и всех ему подобных. Например, если вы хотите задать отступы всех картинок в документе равными десяти пикселям, то достаточно подключить к нему CSS-файл с одной-единственной строчкой: "img { margin: 10px 10px 10px 10px; }" (на практике кавычки не нужны!).
А обтекание картинки текстом, например, по левому краю задаётся так: "img { align: left; }".
Кстати, для добавления CSS-кода вовсе не придется писать его в файле. Для этого в HTML предусмотрен тег "style", в который можно вставлять CSS-код. Но он будет работать только для данного документа (если нужно добавить один и тот же код в несколько HTML-файлов, то стоит создать отдельную таблицу стилей).
Теперь вы сможете "разбавить" сайт изображениями, воспользовавшись полезными свойствами тега, который за это отвечает. Смело применяйте изменение размеров или обтекание картинки текстом. Веб-страницы без графических составляющих - достаточно унылое зрелище, не правда ли?
