Как настроить обтекание текстом вокруг картинок и других объектов в Word

В начальной стадии изучения языков HTML, CSS и пр. появляются (как это и должно быть) вопросы: как сделать так, или вот, так и в нашем вопросе, как написать текст поверху изображения. Вполне естественное проявление интереса, и требует закрепление знаний в этой области. Но для выполнения этой задачи вы уже должны знать хоть малую часть CSS чтобы понимать базовые свойства каскадной таблицы.

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

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

Рассмотрим на первом примере.

HTML

CSS

Результат.

Пояснение. Основному блоку приписывается значение position: relative; этим мы обозначаем область для свободного позиционирования последующих элементов в этом классе.

Далее, форматируем div в линейно–блочный элемент display: inline-block;

И последнее на что стоит обратить внимание — это position: absolute;, задан элементу .

Остальные стили идут как оформление текста.

Во втором примере используем более длинную надпись на картинке и стилизуем ее должным образом.

HTML

CSS

Результат.

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

Исправить эту ошибку можно по-разному. Применить, к примеру, неразрывный пробел &nbsp, что позволит нарастить промежуток.

Пример.

HTML

CSS

Результат.

Во втором способе применим тег он как только жирность поменьше, но мы ее совсем уберем.

Пример.

HTML

CSS

Результат.

В стилях добавили новое свойство white-space: nowrap; чтобы текст находился на одной строке. На этом все, сложного думаю ничего нет.

  1. Главная
  2. HTML & CSS
  3. Текст поверх картинки на CSS

Назад

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

HTML:

  

CSS:

  .image {  position: relative;  width: 100%; /* для IE 6 */  }    h2 {  position: absolute;  top: 250px;  left: 0;  width: 100%;  }  h2 span {  color: #fff;  font-size: 30px;  line-height: 55px;  background: rgba(0, 0, 0, 0.7);  background: #000;  padding: 10px;  }  

Демонстрация

« Предыдущая статья

Горизонтальные линии в html

Следующая статья »

Описание padding в css

Назад

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Добавить изображение на страницу так, чтобы оно обтекалось рядом лежащим текстом.

Решение

Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float , добавляемого к селектору IMG . Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.

Пример 1. Обтекание картинок

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Текст с иллюстрациями

Использование свойства float заставляет текст плотно прилегать к изображению. Поэтому в примере введёно универсальное свойство margin , которое добавляет отступы между картинкой и текстом. Это свойство одновременно задаёт отступ сверху, справа, снизу и слева от фотографий.

В этой статье мы разберем варианты, как сделать обтекание картинки текстом. Всего есть несколько способов. Рассмотрим каждый из них. Для начала советую ознакомиться со статье html тег , чтобы иметь базовые знания по изображениям на html страницах.

1. Обтекание с помощью стилей тега

Картинку можно выровнять только оперируя со стилями CSS тега . Как известно синтаксис тега допускает в атрибутах задавать выравнивание изображения:

где VALUE может принимать значения

  • left — выравнивание по левому краю
  • right — выравнивание по правому краю
  • bottom — выравнивание по первой строке текста (это значение стоит по умолчанию)
  • top — выравнивание по верхней строке текста
  • middle — выравнивание по базовой строке текста

Читайте также:  Духовой шкаф канди электрический встраиваемый инструкция

Вот как это будет выглядеть на странице:

Картинка как бы слиплась с текстом, поэтому сделаем отступы. Причем есть два варианта как это можно сделать.

Вот как это будет выглядеть на странице:

Атрибут hspace задает горизонтальный отступ в пикселях, vspace – соответственно вертикальный

Вот как это будет выглядеть на странице:

Выглядит лучше за счет того, что мы не стали делать отступ слева. Вместо margin можно использовать padding , эффект будет аналогичный.

Использование свойства float вместо align

Помимо свойства align в атрибутах тега в стилях есть CSS свойство float , которое также отвечает за выравнивание. Синтаксис следующий:

Например, если написать в предыдущем примере вывод картинки следующим образом:

То это преобразуется в следующее:

Благодаря float можно задавать единый class для картинок, что очень даже удобно.

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

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

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

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

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

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

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

Читайте также:  Как вывести из строя симку

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

    Зададим фрагменту документа с картинкой стиль, используя вышеописанные свойства:

    Код нашей картинки в HTML выглядит так:

    Вставим в div нашу картинку, в результате получилось:

    На картинке ниже вы видите данный код в HTML документе.

    Вот так теперь выглядит наша статья. Картинка обтекается текстом, между текстом и картинкой появился отступ.

    Если вы будете вставлять картинку, выравнивая ее по правому краю, соответственно html-код будет несколько другим:

    Можете поэкспериментировать с кодами. Главное добиться желаемого результата. И еще совет, обязательно просматривайте результаты ваших экспериментов хотя бы в основных браузерах: Internet Explorer, Mozilla Firefox, Opera. Если все выглядит как вы планировали, значит, вы со своей задачей справились.

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

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

    Прописать стиль для картинки с обтеканием текста в CSS совсем несложно. И заметьте, насколько уменьшается количество тегов в документе, по сравнению с вышеописанным методом.

    1. За вывод изображения на веб-страницу отвечает тег .
    2. За выравнивание элемента по определенному краю, с обтеканием его остальными элементами отвечает свойство .
    3. За область внешних отступов отвечает .
    4. Класс (.class) в CSS служит для придания элементам индивидуального стиля, отличного от основного стиля, прописанного в документе.

    Читайте также:  Вылетает battlefield 3 в мультиплеере

    Сначала добавим класс стиля к изображению. Для этого, селектору img дадим имя .fotoleft. Открываем файл с расширением .css, в котором прописаны стили и прописываем стиль для нашей картинки:

    Теперь применим класс к тегу в файле HTML. Открываем статью в исходном коде и прописываем класс для картинки:

    Таким образом, мы выровняли картинку по левому краю с обтеканием текста по его правой стороне и задали величину отступов: сверху – 12px, справа – 12px, снизу – 12px, слева – 0px. Теперь, чтобы таким же образом выровнять любую другую картинку, нужно всего лишь присвоить ей созданный нами класс стиля.

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

    Выровнять изображение по краю можно с помощью меню «Вставить/редактировать изображение». Для этого вы должны кликнуть по изображению в нашей статье, вокруг картинки появиться рамка. Затем кликните по иконке «Вставить/редактировать изображение».

    Перед вами откроется окно, в котором надо перейти на вкладку «Оформление». Здесь можно не только установить отступ, но и изменить размеры изображения.

    Для того, чтобы текст не слился с картинкой, задайте горизонтальные и вертикальные отступы – 10 (px). После того как оформите изображение, не забудьте нажать на кнопку «Обновить»

    Вы видите, что у нас появился отступ. Кстати, с помощью меню «Вставить/редактировать изображение» вы можете сделать подпись под изображением или чтобы подпись появлялась при наведении курсора на изображение и т.д. В этом, думаю, не сложно разобраться, поэкспериментировав с настройками.

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

    В этой статье мы расскажем вам о тех особенностях HTML и CSS, которые связаны с изображениями. Вы узнаете, как вставить их в HTML-документ. Также в статье приведена информация о том, как изменить параметры рисунка и организовать обтекание картинки текстом.

    Сначала – о вставке изображения. Для этого существует тег «img», у которого есть несколько атрибутов. Основной из них — «src». В нём хранится адрес, из которого браузер сможет вставить картинку. Можно указать путь к изображению, уже сохраненному в компьютере, или дать ссылку на веб-ресурс.

    Следующая немаловажная пара атрибутов – «width» (ширина) и «height» (высота). Они используются для того, чтобы вручную изменить размеры картинки (полезная опция для растяжения и сжатия изображения).

    Далее следуют параметры «hspace» и «vspace» (расстояние от изображения до окружающего его текста). Ясно, что «hspace» – горизонтальный отступ, а «vspace» – вертикальный.

    У тега есть такие атрибуты, как «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-файлов, то стоит создать отдельную таблицу стилей).

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

    Такое, увы, бывает очень часто — на подробное изучения какого-то предмета времени нет, а вот конкретную проблему решить надо…

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

    И чтобы Вам не пришлось проделывать то же самое (искать, имеется в виду) — вот готовое решение.

    Итак,

    как с помощью CSS отключить обтекание картинок текстом

    Если мы просто возьмем, да и пропишем у тега с картинкой атрибут align=»left» (выравнивание по левому краю), то нас ждет разочарование (как на верхнем примере на картинке). Текст, дойдя до края картинки, начнет ее обтекать (или «обволакивать», если по другому выразиться).

    Но если для картинки прописать стиль (т.е., тег картинки будет выглядеть как ); а затем для текста, который рядом с картинкой (для параграфа) укажем стиль ( ) — то текст картинку обтекать не будет. 

    Вот как все выглядит на практике:

    image

    P.S. После того, как Вы отключите обтекание, то увидите, что текст прижимается прямо к картинке. Что, конечно же, не есть хорошо. Поправить это довольно просто — надо для текста (для параграфа) дописать стиль padding-left:10px; — ну, или сколько вы там пикселей (или пунктов, или процентов) хотите. Да и все дела.

    Оцените статью
    Рейтинг автора
    4,8
    Материал подготовил
    Максим Коновалов
    Наш эксперт
    Написано статей
    127
    А как считаете Вы?
    Напишите в комментариях, что вы думаете – согласны
    ли со статьей или есть что добавить?
    Добавить комментарий