Использование картинок в html-страничке всегда более информативно и наглядно, по-сравнению со сплошным текстом.
Вставить картинку в html-текст возможно несколькими способами и в классике этих способов 3:
- выравнивание изображения по центру
- обтекание изображения текстом
- размещение изображения в поле
Выравнивание изображения по центру
Для выравнивания изображения по центру колонки текста, проще всего тег <img> поместить в контейнер <p>, для которого ставится атрибут align=»center». Если ожидается частое использование картинок, то оптимальнее будет применение CSS стиля для тега <p>. Как это реализовано, смотрите в примере 1.
Пример 1. Выравнивание рисунка по центру
В данном примере к контейнеру <p> добавляем CSS-класс cimg, в котором прописывается выравнивание по центру строки. То, как это будет схематично выглядеть — показано на рисунке 1.
Рис. 1. Рисунок в центре колонки текста
Обтекание изображения текстом
Обтекание изображения текстом — один из самых распространненых способов верстки HTML-страниц, который позволяет эффективно использовать все свободное пространство. популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для того чтобы настроить обтекание изображения текстом можно использовать несколько способов, основанных как и на HTML так и на CSS.
![080_2[1]](/wp-content/uploads/5c73ed29723db5c73ed2972436.gif)
Рис. 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.
Рис. 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> |
Результат:
Посмотреть в новом окне: HTML картинка с обтеканием
Атрибуты и значения
- align="top" – выравнивает картинку и текст по верху.
- align="middle" – выравнивает картинку и текст по центру, по вертикали.
- align="bottom" – выравнивает картинку и текст по низу.
Обратите внимание на способ подгрузки изображения: ../images/2121.png. Во-первых, использован формат PNG (.png). Во-вторых, изображение находится в отдельной папке, то есть документ у меня в одной папке, а изображение в другой. В таких ситуациях очень важно правильно указать путь от документа к подгружаемой картинке, что и было сделано: первые две точки .. определяют выход из папки где находится документ (все уроки, они же страницы, они же документы курса по HTML у меня находятся в одной папке, CSS – в другой, изображения – в третьей и так далее); /images/ – не что иное, как название папки с изображениями, а 2121.png – полное имя файла самой картинки.
Способы горизонтального обтекания HTML текста
Пример:
<title>HTML текст обтекает картинку справа</title>
|
Результат:
Посмотреть в новом окне: HTML картинка и текст
Пример HTML обтекания текста картинкой справа
Пример:
<title>HTML картинка справа – текст слева</title> |
Результат:
Посмотреть в новом окне: Обтекание HTML текста и картинки справа
1 3 4 5 6 7 8 9 10 11 12
Дата публикации: Июль 2011 | Обновление: Ноябрь 2018
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, т. е. не зависимо от того, пропишем мы его или нет наша картинка по отношению к тексту будет позиционирована так:
2. Чтобы выровнять изображение по левому краю, а текст его обтекал справа нужно прописать следующее:
<img src= «foto.jpg» align=»left»>
Пример:
3. Для выравнивания изображения по правому краю нужно соответственно прописать:
<img src= «foto.jpg» align=»right»>
Пример:
4. Теперь рассмотрим вертикальное выравнивание. Если применить значение top, то первая строчка текста будет расположена на против верхней границы изображения.
<img src= «foto.jpg» align=»top»>
Пример:
5. Выравнивание текста по центру картинки. Данный прием очень хорошо применять если вам нужно небольшую картинку расположить по центру строки.
<img src= «foto.jpg» align=»middle»>
Пример:
Обтекание картинки текстом при помощи свойств 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 слева от изображения.
Пример :
Добавив к данным стилям рамку и внутренний отступ можно придать изображению некий эффект фотографии с белыми краями:
.leftfoto{ float:left; margin: 4px 10px 2px 0px; border:1px solid #CCC; padding:6px; }
Здесь мы добавили следующие элементы:
border:1px solid #CCC; — задали сплошную линию размером 1 пиксель и светло серым цветом; padding:6px; — задали внутренний отступ между изображением и рамкой, равный 6 пикселям.
Пример:
Материал подготовлен проектом: 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; }
Теперь, всем изображениям добавятся новые стили, и они будут выглядеть так:
Таким образом, мы исправили косяк разработчика шаблона.
Но это ещё не всё.
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