Обтекание снизу css. Начинающим веб-дизайнерам: как сделать обтекание картинки текстом

В этой статье мы расскажем вам о тех особенностях 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-файлов, то стоит создать отдельную таблицу стилей).

Теперь вы сможете "разбавить" сайт изображениями, воспользовавшись полезными свойствами тега, который за это отвечает. Смело применяйте изменение размеров или обтекание картинки текстом. Веб-страницы без графических составляющих - достаточно унылое зрелище, не правда ли?

Последнее обновление: 21.04.2016

Как правило, все блоки и элементы на веб-странице в браузере появляются в том порядке, в каком они определены в коде html. Однако CSS предоставляет специальное свойство float , которое позволяет установить обтекание элементов, благодаря чему мы можем создать более интересные и разнообразные по своему дизайну веб-страницы.

Это свойство может принимать одно из следующих значений:

left: элемент перемещается влево, а все содержимое, которое идет ниже его, обтекает правый край элемента

right: элемент перемещается вправо

none: отменяет обтекание и возвращает объект в его обычную позицию

При применении свойства float для стилизуемых элементов, кроме элемента img, рекомендуется установить свойство width.

Итак, представим, что нам надо на странице вывести слева от основного текста изображение, справа должен быть сайдбар, а все остальное место должно быть занято основным текстом статьи. Определим интерфейс страницы сначала без свойства float:

Л. Толстой. Война и мир. Том второй. Часть третья

Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть колыхаясь в лучах вечернего солнца...

«Нет, жизнь не кончена в 31 год, – вдруг окончательно, беспеременно решил князь Андрей...

В данном случае мы получим последовательное размещение элементов на странице:

Теперь на той же странице применим свойство float , изменив стили следующим образом:

Image { float:left; /* обтекание слева */ margin:10px; margin-top:0px; } .sidebar{ border: 2px solid #ccc; background-color: #eee; width: 150px; padding: 10px; margin-left:10px; font-size: 20px; float: right; /* обтекание справа */ }

Соответственно изменится и размещение элементов на странице:

Элементы, к которым применяется свойство float , еще называют floating elements или плавающими элементами.

Запрет обтекания. Свойство clear

Иногда возникает необходимость запретить обтекания. Подобная задача может быть актуальна, если какой-то блок должен переноситься вниз на новую строку, а не обтекать плавающий элемент. Например, футер, как правило, должен находиться строго внизу и растягиваться по всей ширине страницы. Если же перед футером находится плавающий элемент, то футер может обтекать этот элемент, что не желательно.

Для запрета обтекания элементов в CSS применяется свойство clear , которое указывает браузеру, что к стилизуемому элементу не должно применяться обтекание.

Свойство clear может принимать следующие значения:

left: стилизуемый элемент может обтекать плавающий элемент справа. Слева же обтекание не работает

right: стилизуемый элемент может обтекать плавающий элемент только слева. А справа обтекание не работает

both: стилизуемый элемент может обтекать плавающие элементы и относительно них смещается вниз

none: стилизуемый элемент ведет себя стандартным образом, то есть принимает участие в обтекании справа и слева

Например, пусть на веб-странице будет определен футер:

Наличие обтекания будет создавать некорректное отображение, при котором футер смещается вверх:

Изменим стиль футера:

Footer{ border-top: 1px solid #ccc; clear: both; }

Теперь футер не будет обтекать изображение, а будет уходить вниз.

Как сделать обтекание картинки текстом

В предыдущей статье мы рассматривали вопрос, в текст, теперь будем учиться делать обтекание картинки текстом.

Мы вставили картинку в статью, однако пока все выглядит довольно таки некрасиво - текст не обтекает картинку. Сейчас мы это исправим.

Наша задача вставить картинку так, чтобы между картинкой и текстом был определенный отступ, и наша картинка как бы обтекалась текстом. Этого можно добиться тремя способами:

1. Обтекание картинки текстом средствами HTML;
2. Обтекание картинки текстом средствами CSS;
3. Обтекание картинки текстом средствами редактора Joomla.

Обтекание картинки текстом в HTML

Для того, чтобы текст обтекал картинку мы выделим фрагмент документа с картинкой и пропишем стиль для этого фрагмента прямо внутри HTML документа. Здесь нужно определиться, по какому краю вы будете выравнивать изображение по левому или по правому. Если вы выравниваете картинку по левому краю, нужно чтобы текст обтекал ее справа. И наоборот, если вы вставляете картинку справа, нужно чтобы текст обтекал картинку слева.

Допустим, нужно выровнять картинку по левому краю с обтеканием текста по его правой стороне и задать отступы: сверху - 5px, справа - 10px, снизу - 5px, слева - 0px.

1. Для выделения фрагмента (блока) в документе в HTML служит элемент
   
   

   …
2. Для определения стиля элемента служит универсальный атрибут

   С помощью CSS свойства float картинка была сделана плавающей с левой стороны. Текст, расположенный в HTML коде ниже картинки, будет обтекать картинку по правой и нижней стороне.

   Попробовать »

   Для создания пустого пространства между картинкой и текстом, обтекающим ее, нужно добавить к картинке внешние отступы . Поскольку картинка смещена к левой границе родительского элемента, достаточно будет добавить внешние отступы только справа и снизу, чтобы слегка отодвинуть от нее текст:

   Img { float: left; margin: 0 10px 10px 0; } Попробовать »

   Отмена обтекания

   Иногда требуется отобразить элемент таким образом, чтобы на него не влияли плавающие элементы, расположенные перед ним. Таким элементом к примеру может быть нижний колонтитул, который в любом случае должен отображаться под всеми остальными элементами страницы. Если у вас на странице высокое боковое меню, расположенное с левого края веб-страницы, то нижний колонтитул может подняться вверх и отображаться справа от него. Таким образом, вместо того, чтобы располагаться страницы, содержимое нижнего колонтитула появится на одном уровне с боковым меню. Данная проблема решается, с помощью свойства clear , которое сообщает браузеру о том, что стилизуемый элемент не должен обтекать плавающий.

   Для CSS свойства clear можно установить одно из значений:

   • left - плавающие элементы запрещены с левой стороны.
   • right - плавающие элементы запрещены с правой стороны.
   • both - плавающие элементы запрещены с обеих сторон.
   • none - разрешает наличие плавающих элементов с обеих сторон.
   

   С помощью свойства clear установлено, что плавающие элементы запрещены с правой стороны. Текст, расположенный ниже картинки, не будет обтекать картинку по левому краю.

   Список налезает на картинку, рисунок или изображение при обтекании его текстом. Например так: картинка выравнивается по левому краю (всплывает налево) - 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;
     }

   Прописать спасительный код для элемента списка (

3. ) можно глобально (как в примере), или с присвоением индивидуального класса, например.list (код CSS .list ol>li,.list ul>li{list-style-position: inside;} ). В первом случае, код для обтекания картинки будет распространяться глобально - на все списки на странице, во втором - только на списки класса list (class=”list”).

   Разница большая:

   • При назначении глобальных свойств, действующих сразу на все списки на странице - изменяются элементы управления, созданные на основании этих свойств и списков. В результате - «уезджают» меню и менюшки навигации сайта.
   • В случае с индивидуальным классом, вида (class=”list”) - его придётся вставлять вручную в html-код требуемых списков.
   • Выручает «золотая середина» - найти в шаблоне класс текстового блока страницы и назначить свойства обтекания рисунков только для его списков. Тогда, в тексте новости (сообщения, комментария) страницы - списки будут красиво обтекать картинки и изображения, а остальная часть сайта - останется неизменной.

   Прописанное свойство для элемента списка (

4. ) слегка отражается на свойствах самого списка (теги
   ,
   ). Оно и вестимо, ведь «втянув» маркёр внутрь списка и сделав отступ для его отображения (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; - когда списка находятся за пределами текста списка.