Обтекание текстом html

Использование картинок в html-страничке всегда более информативно и наглядно, по-сравнению со сплошным текстом.

Вставить картинку в html-текст возможно несколькими способами и в классике этих способов 3:

  • выравнивание изображения по центру
  • обтекание изображения текстом
  • размещение изображения в поле

Выравнивание изображения по центру

Для выравнивания изображения по центру колонки текста, проще всего тег <img> поместить в контейнер <p>, для которого ставится атрибут align=»center». Если ожидается частое использование картинок, то оптимальнее будет применение CSS стиля для тега <p>. Как это реализовано, смотрите в примере 1.

Пример 1. Выравнивание рисунка по центру

В данном примере к контейнеру <p> добавляем CSS-класс cimg, в котором прописывается выравнивание по центру строки. То, как это будет схематично выглядеть — показано на рисунке 1.

Обтекание текстом htmlРис. 1. Рисунок в центре колонки текста

Обтекание изображения текстом


Обтекание изображения текстом — один из самых распространненых способов верстки HTML-страниц, который позволяет эффективно использовать все свободное пространство. популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для того чтобы настроить обтекание изображения текстом можно использовать несколько способов, основанных как и на HTML так и на CSS.

080_2[1]Рис. 2. Рисунок выровнен по левому краю страницы и обтекается текстом справа

Для того, чтобы осуществить обтекание изображения текстом с помощью HTML нужно помнить, что у тега <img> есть атрибут align, который определяет выравнивание изображения в документе и при этом указывает способ обтекания изображения текстом. Для того, чтобы сделать выравнивание изображения по правому краю и задать обтекание слева, нужно использовать align=»right», для выравнивания по левому краю и обтекания текстом справа используем align=»left». Здесь также полезно использовать атрибуты тега <img> — vspace и hspace, которые указывают на каком расстоянии текст будет обтекать изображение по вертикали и горизонтали. Без указания этих атрибутов текст будет вплотную прилегать к изображению (пример 2).


Пример 2. Обтекание изображения текстом с использованием HTML

Для того чтобы настроить обтекание изображения с помощью CSS стилей будем использовать правило float. float:right — выравнивает изображение по правому краю документа и делает обтекание текстом слева, а float:left делает выравнивает изображение по левому краю документа и обтекание текстом справа от изображения (пример 3).

Пример 3. Обтекание изображения текстом с использованием CSS

Здесь к тегу <img> добавляется класс cimg, у которого установлено выравнивание по правому краю float:right, а обтекание картинки слева и снизу задано свойствами padding-left:10px и padding-bottom:10px.

Изображение на поле

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

При такой схеме изображение располагается справа или слева от текста, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой текст (рисунок 3).

Выравнивание изображения в поле
Рис. 3. Размещение изображения в поле слева от текста


Я знаю два способа создать подобную структуру — с помощью HTML-тегов <table> и с помощью CSS-правила margin. Рассмотрим эти два способа:

Таблицы: данный способ удобен тем, что легко и понятно позволяют организовать колоночную структуру с помощью ячеек. Данный способ является олдскульным и его применение не особо приветствуется в современном веб-дизайне. Считается что данный способ избыточен и сложен в правке. Но все новички через него проходят. Для такой структуры нам потребуется таблица с тремя колонками, в первой колонке будет само изображение, в третьей текст, а между ними мы укажем отступ — во второй колонке. Можно обойтись и двумя колонками, а отступ указать через CSS-стили или с помощью атрибута width тега (пример 4).

Пример 4. Размещение изображения на поле с помощью таблиц

то, что получится в результате показано на рисунке 4.

080_4[1]
Рис. 4. Изображение на поле слева от текста

В примере 4 ширина изображения составляет 90 пикселей, а ширина колонки, где он располагается — 110 пикселей. Разница между ними обеспечивает нам нужный отступ от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте — vertical-align: top.


CSS-стили: Данный пример более предпочтителен и оптимален. Здесь нам потребуется два слоя <div>, параметры которых мы укажем через CSS. В одном слое будет находиться изображение, а в другом текст. Как это работает, смотрите в примере 5:

Пример 5. Размещение изображения на поле с слоев и CSS-стилей

Свойство float:left для слоя #pic нужно, чтобы задать примыкание изображения к левому краю документа, а верхняя строка текста совпадала с верхней строкой изображения. Без этого свойства слой #text опускается вниз на высоту изображения. Также для слоя #text указываем отступ слева margin-left:110px на расстояние 110 пикселей, чтобы там текст не налазил на изображение. Если изображение нужно разместить в правом поле, то указываем float:right для #pic и margin-right:110px для #text.

P.S.: Согласно спецификации HTML4 изображения должны помещаться внутри блочных элементов таких как div или p.

www.webmancer.org

Анонимный комментирует…

отлично)

Анонимный комментирует…

Добрый день, Серёжа! Не получается совершить чудо-обтекание текстом картинки, которая слева. На что надо обратить особое внимание таким особам, как я?!) Спасибо, Марина


Наташа комментирует…

Привет! Только я не Серёжа, а Наташа :))
Обрати внимание на наличие лишних кавычек (или отсутствие необходимых), а также на наличие лишних пробелов.

Анонимный комментирует…

Ой, просите меня, Наташенька, великодушно. Я ошибочно посчитала, что это блог одного человека, так как не так давно получала ответ на вопрос на этом блоге у Серёжи. Спасибо, что не обиделись и ответили.) Я-новичок…, ничегошеньки у меня не получается с этим обтеканием, хоть садись и сама обтекай))). Я правильно поняла, что для размещения текста справа от рисунка я должна вставить в кавычки URL изображения своего рисунка и всё?!

Наташа 😉 комментирует…

Да ничего страшного.
Вы правильно поняли. Главное ничего не менять в коде.


Лариса комментирует…

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

Анонимный комментирует…

Здравствуйте, снова Я!!!) Не прошло и трех месяцев, как снова появилась необходимость размещать текст по сторонам от картинок! И снова ФИАСКО! Хочу сначала спросить, кто готов терпеливо "добить" туповатого ученика в моем лице, дабы раз и навсегда избавить его, то есть меня, от мук, да и самому вздохнуть свободно). На одного несмышлёныша в Дневниках будет меньше. Потратила 5 часов и перелопатила массу советов, а воз и ныне там…( Не выходит "каменный цветок", даже с учетом выше написанного. Помогите, люди добрые!!!)

www.mycrib.ru

Как наложить на картинку текст


Иногда нужно написать текст прямо на изображении, что-то ввиде анонса или назвния. Как и в прошлом случае способов несколько:

Первый вариант

Сделайте блок, вставьте в него текст, саму картинку сделайте фоном данного блока.

<div class="your_block">Ваш-текст</div>
  .my_block {  (фон-картинка): url (your_image.jpg) - адрес изображения top left no-repeat;  (ширина): 300px;  (высота): 200px;  (заполнение): 250px 1 1 1;  }  

Этот вариант подойдёт и для логотипа, и для шапки.

Второй вариант

Сразу создать два блока, первый с картинкой, второй с текстом (сделайте полупрозрачный фон). И наложить один на другой задав необходимые параметры.

  <div class="img">  <img src="любая-ваша-картинка.jpg" width="300" height="200" />  <div class="text">Любой-текст</div>  </div>  
  .img {  (ширина изображения): 300px;  (высота изображения): 200px;  (заполнение): относительное;  }  
  .text {  background-color (цвет фона): #AAA;  (ширина): 300px;  (высота): 30px;  (положение): абсолютное;  (влево): 0px;  (вправо): 500px;  }  

В этом примере первый блок размещен внутри второго при помощи свойства под названием position. У блока с текстом задан нужный фон и сам внедрён в нижнюю часть картинки.


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

Не бойтесь экспериментировать с дизайном, делайте ваш сайт ещё красивее, подбирайте лучший вариант, и тогда ваш сайт, и вы как его владелец добьётесь успеха.

searchtimes.ru

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

Пример:

<title>Пример ХТМЛ обтекания картинок текстом</title>
</head>
<body>
<p><img src="../images/2121.png" width="128" height="128" align="top" />Текст вверху картинки</p>
<p><img src="../images/2121.png" width="128" height="128" align="middle" /> Текст по середине</p>
<p><img src="../images/2121.png" width="128" height="128" align="bottom" /> Текст снизу картинки</p>
</body>

Результат:

sposob obtekanija teksta kartinkoj

Посмотреть в новом окне: HTML картинка с обтеканием

Атрибуты и значения


  • align="top" – выравнивает картинку и текст по верху.
  • align="middle" – выравнивает картинку и текст по центру, по вертикали.
  • align="bottom" – выравнивает картинку и текст по низу.

Обратите внимание на способ подгрузки изображения: ../images/2121.png. Во-первых, использован формат PNG (.png). Во-вторых, изображение находится в отдельной папке, то есть документ у меня в одной папке, а изображение в другой. В таких ситуациях очень важно правильно указать путь от документа к подгружаемой картинке, что и было сделано: первые две точки .. определяют выход из папки где находится документ (все уроки, они же страницы, они же документы курса по HTML у меня находятся в одной папке, CSS – в другой, изображения – в третьей и так далее); /images/ – не что иное, как название папки с изображениями, а 2121.png – полное имя файла самой картинки.

Способы горизонтального обтекания HTML текста

Пример:


<title>HTML текст обтекает картинку справа</title>
</head>
<body>
<img src="../images/2121.png" align="left" width="128" height="128" />
<p>Изображение обтекает текст слева</p>
<p>Изображение обтекает текст слева</p>
<p>Изображение обтекает текст слева</p>
<p>Изображение обтекает текст слева</p>
</body>

Результат:

obtekanie

Посмотреть в новом окне: HTML картинка и текст

Пример HTML обтекания текста картинкой справа

Пример:

<title>HTML картинка справа – текст слева</title>
</head>
<body>
<img src="../images/2121.png" align="right" width="128" height="128" />
<p>Изображение обтекает текст справа</p>
<p>Изображение обтекает текст справа Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа</p>
</body>

Результат:

obtekanie kartinki

Посмотреть в новом окне: Обтекание HTML текста и картинки справа

1 3 4 5 6 7 8 9 10 11 12

Дата публикации: Июль 2011 | Обновление: Ноябрь 2018

HTML изображение Обтекание текстом html   HTML обтекание текста и картинки

ab-w.net

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

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


как сделать отступ текста и картинки margin, padding в html документе

Рассмотрим все по порядку. Для вставки картинки в HTML страницу используется тег img, подробнее смотрите урок, как вставлять картинки в HTML:   http://webmastermix.ru/lessons-html/14-how-inser-a-picture-in-html.html . Поэтому, чтобы вставить картинку в текст HTML страницы, достаточно в коде прописать следующее:

— где foto.jpg — это относительный путь к картинке. Можно задать и абсолютный путь, тогда нужно прописать URL вида: http://webmastermix.ru/foto.jpg

У тега img имеется  атрибут align, который и определяет по какому краю будет расположена картинка и с какого края ее будет обтекать текст (например align=»left» по левому краю). Атрибут align имеет следующие значения:

left — изображение будет расположено по левому краю, а текст будет обтекать его справа; right — изображение расположится справа, а текст будет обтекать его слева; bottom — отвечает за вертикальное выравнивание, при этом картинка будет находится слева, а нижняя часть изображения на против первой строки текста, это значение задано по умолчанию; top — тоже, что и предыдущее значение, только строчка текста будет располагаться по верхней границе изображения; middle — при данном значении происходит выравнивание середины изображения по базовой линии строки.

Теперь рассмотрим каждый элемент на практике.

1. Как я уже упоминал, по умолчанию картинке заданно значение bootom, т. е. не зависимо от того, пропишем мы его или нет наша картинка по отношению к тексту будет позиционирована так:

Обтекание текстом html

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

<img src= «foto.jpg» align=»left»>

Пример:

Обтекание текстом html

3. Для выравнивания изображения по правому краю нужно соответственно прописать:

<img src= «foto.jpg» align=»right»>

Пример:

Обтекание текстом html

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

<img src= «foto.jpg» align=»top»>

Пример:

Обтекание текстом html

5. Выравнивание текста по центру картинки. Данный прием очень хорошо применять если вам нужно небольшую картинку расположить по центру строки.

<img src= «foto.jpg» align=»middle»>

Пример:

Обтекание текстом html

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

Как вы могли заметить на вышеприведенных примерах наша картинка и текст не совсем красиво располагаются по отношению друг к другу. Расположить их красиво на помогут CSS стили, которые можно добавить к картинке задав ей определенный класс и применив нужные свойства. Если вы не знаете, что такое CSS смотрите урок Основы CSS и важные понятия:  http://webmastermix.ru/lessons-css/17-bases-css.html .

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

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

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

<img src= «foto.jpg» class=»leftfoto»>

Теперь классу leftfoto нужно присвоить определенные CSS стили.  

.leftfoto{ float:left; margin: 4px 10px 2px 0px; }

Данный код располагают между тегами <head>…</head>, заключив в теги <style>…</style> или помещают во внешний файл стилей CSS. 

Разберем те элементы, которые мы здесь задали:

float:left; — мы позиционировали картинку по левому краю и заставили обтекать текст вокруг картинки справа, это по сути то же самое, что и атрибут align=»left». margin: 4px 10px 2px 0px; — мы задали внешние отступы, 4px — от верха, 10px — справа, 2px снизу и 0px слева от изображения.

Пример :

Обтекание текстом html

Добавив к данным стилям рамку и внутренний отступ можно придать изображению некий эффект фотографии с белыми краями:

.leftfoto{ float:left; margin: 4px 10px 2px 0px; border:1px solid #CCC; padding:6px; }

Здесь мы добавили следующие элементы:

border:1px solid #CCC; — задали сплошную линию размером 1 пиксель и светло серым цветом; padding:6px; — задали внутренний отступ между изображением и рамкой, равный 6 пикселям.

Пример:

Обтекание текстом html

Материал подготовлен проектом:  WebMasterMix.ru

Рекомендуем ознакомиться:

Подробности

Обновлено: 14 Декабрь 2013

Создано: 14 Декабрь 2013

Просмотров: 122859

allfacebook.com.ua

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

Если, разработчик шаблона для вордпресс поленился довести до ума своё детище, то при вставке изображения в тело поста оно будет выглядеть следующим образом:

 

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

 

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

Для этого, откройте папку с Вашей активной темой оформления, найдите файл — «style.css» и в самом конце добавьте кусок нового кода:

  .alignnone { margin: 5px 20px 20px 0; }  .aligncenter, div.aligncenter { display:block; margin: 5px auto 5px auto; }  .alignright { float:right; margin: 5px 0 20px 20px; }  .alignleft { float:left; margin: 5px 20px 20px 0; }  .aligncenter { display: block; margin: 5px auto 5px auto; }  a img.alignright { float:right; margin: 5px 0 20px 20px; }  a img.alignnone { margin: 5px 20px 20px 0; }  a img.alignleft { float:left; margin: 5px 20px 20px 0; }  a img.aligncenter { display: block; margin-left: auto; margin-right: auto }  .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; }  .wp-caption.alignnone { margin: 5px 20px 20px 0; }  .wp-caption.alignleft { margin: 5px 20px 20px 0; }  .wp-caption.alignright { margin: 5px 0 20px 20px; }  .wp-caption img { border: 0 none; height: auto; margin:0; max-width: 98.5%; padding:0; width: auto; } .wp-caption p.wp-caption-text { font-size:11px; line-height:17px; margin:0; padding:0 4px 5px; } 

Теперь, всем изображениям добавятся новые стили, и они будут выглядеть так:

 

html обтекание картинки текстом

 

Таким образом, мы исправили косяк разработчика шаблона.

Но это ещё не всё.

 

sozdaiblog.ru

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

Для задания нужного обтекание картинки текстом в HTML нам достаточно в теге img указать атрибут align с присвоенным значение, который соответствует нужному способу обтекания. Атрибуту align можно задать следующие значения:

  • bottom – значение которое задается по умолчанию. Первая стока находится у нижнего края картинки. Картинка располагается с лева
  • top – в этом случае первая стока находится у верхнего края картинки. Картинка располагается с лева
  • right –картинка выравнивается по правому краю, а контент обтекает ее по левому
  • left — изображение выравнивается по левому краю, а контент обтекает ее с правой стороны
  • middle – в данном случае происходит выравнивание серединый изображения по базовой линии строки

Наиболее часто используются атрибуты right и left, для правого и левого обтекания. Данные варианты наиболее привычны для восприятия, и придают тексту с изображением наиболее компактный вид.

Вот пример использования атрибута align:

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

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

В этом случае для каждого изображения мы должны задать уникальный класс, а далее, в файле стилей, или между тегами <style>…</style> в самой странице, прописать этому классу свойство float с соответствующим способом обтекания. Для того, что бы добиться обтекания по правому или левому краю изображения, мы можем использовать значения left и right, так же, как и с атрибутом align.

HTML-код изображения:

CSS:

На мой взгляд, такой способ задания обтекания картинки текстом в CSS более удобен. Так как вы, при помощи CSS-свойств, можете более гибко настраивать параметры отображения картинки и изменять их. В примере я добавила дополнительно отступ с правой и левой стороны свойством margin, а так же добавила для изображения рамку. Картинка стала более выразительной и контент теперь не прилипает к ней.

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

До встречи в следующих статьях!

С уважением Юлия Гусарь

impuls-web.ru

Что означает «обтекание» и для чего оно используется?

Для начала разберемся с самим термином «обтекание».

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

Я уверен, что каждый из вас видел, как какое-либо изображение находится внутри текстового контента или наоборот располагается сбоку от других объектов. Такой принцип размещения информации называется обтеканием.

Например, рисунок, который со всех сторон окружают предложения, говорят: «Изображение, обтекаемое текстом».

Разновидности обтекания текстом

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

Пример обтикания текста

Для того чтобы легко форматировать информационное наполнение веб-страниц, вам необходимо знать некоторые встроенные инструменты языков html и css.

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

Атрибут Предназначение
align Задает расположение рисунка на странице и соответственно стороны обтекания его контентом.
hspace Отвечает за отступ от границы изображения до блока с текстом по горизонтали.
vspace Отвечает за отступ от границы изображения до блока с текстом по вертикали.
src Через него указывается анкор на графический ресурс.
alt В случае невозможности отобразить картинку высвечивается текст, вписанный в этот параметр.

Теперь я представлю шаблон кода, который мы будем использовать во всех примерах:

c17229010d22a8eebaf9b95c4728cf1d000

Если запустить пример в браузере на данном этапе, то вслед за картинкой пойдут предложения абзаца. Чтоб этого не было, я воспользуюсь описанными выше параметрами и сдвину изображение вправо, отступив по горизонтали 10 единиц.

Добавьте к текущему объявлению тега <img> атрибуты align=»right» vspace=»0″ hspace=»10″.

У вас должна сформироваться вот такая строка:

<img src=»http://zhivotnue.ru/image/glavnaya/1.jpg» alt=»Тигренок» align=»right» vspace=»0″ hspace=»10″>

Следующим механизмом перемещения картинки по странице и установки способа обтекания контентом является свойство float. С его помощью изображение можно двигать по горизонтали (right и left) или задавать значения объекта-предка (inherit).

Чтобы опробовать float на практике, необходимо вернуть объявлению тега <img> первозданный вид (<img src=»http://zhivotnue.ru/image/glavnaya/1.jpg» alt=»Тигренок»>) и после элемента <title> вставить код:

Фотография тигренка сдвинется влево, а текст переместится вправо.

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

Так как я не использовал объекты неправильной формы, весь контент аккуратно разместится по экрану. Код реализованного примера представлен ниже.

Теперь вы знаете, как выглядит обтекание контентом, и владеете основными единицами языков html и css для управления расположением объектов на веб-ресурсах. Не забывайте подписываться на обновления блога  и делиться ссылкой с коллегами и знакомыми.

Пока-пока!

С уважением, Роман Чуешов

romanchueshov.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector