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

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

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

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

 

 

 

 

 

 

 

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

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

 

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

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

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

  1. Для выделения фрагмента (блока) в документе в  HTML служит элемент <div>
    <div>…</div>
  2. Для определения стиля элемента служит универсальный атрибут <style>
    <div style=…>…</div>
  3. Свойство <float> отвечает за выравнивание элемента по определенному краю, с обтеканием его остальными элементами с других сторон
  4. Свойство <margin> отвечает за область внешних отступов:
    <margin-bottom> устанавливает размер отступа от нижней границы элемента;
    <margin-left> размер отступа от левой границы элемента;
    <margin-right> размер отступа от правой границы элемента;
    <margin-top> размер отступа от верхней границы элемента.

 

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

<div style="float:left; margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 0px; ">Картинка</div>

 

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

<img src="/images/joomla/adminka_20.png" border="0"/>

 

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

<div style="float:left; margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 0px; "><img src="/images/joomla/adminka_20.png" border="0"/></div>

 

Сократим запись:

<div style="float:left; margin: 5px 10px 5px 0px "><img src="/images/joomla/adminka_20.png" border="0"/></div>

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

 

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

 

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

<div style="float:right; margin-top: 5px; margin-right: 0px; margin-bottom: 5px; margin-left: 10px;"> После картинки вставляем код: </div>.

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

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

 

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

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

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

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

Img. fotoleft {
float: left;
margin: 12px 12px 12px 0;
}

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

<img src="/картинка.png" width="150" height="110" class="fotoleft" />

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

 

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

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

Для того, чтобы текст обтекал картинку, установите в строке Стиль (Style) значение:
float: left; - если выравниваете картинку по левому краю (alignment: left);
float: right; - если выравниваете картинку по правому краю (alignment: right).

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

 

 

 

 

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

 

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

Комментарии   

 
0 #29 Елена Лисицына 27.07.2015 18:15
Спасибо автору!!! :lol: ВСЕ ПОЛУЧИЛОСЬ!!!!
 
 
0 #28 Олег 25.01.2015 21:49
Спасибо, всё получилось :lol:
 
 
+3 #27 Юлия 25.11.2014 20:45
Спасибо, все получилось!
 
 
0 #26 admin 12.11.2014 00:48
Здравствуйте. Для создания подобной кнопки действительно проще воспользоваться одним из плагинов WordPress (типа Tabber Tabs Widget).
 
 
0 #25 IvanSol 10.11.2014 19:26
Добрый вечер. Не могу решить вопрос с созданием кнопки на подобие такой http://monosnap.com/image/ryyttuK2qJo3oeBhMmb4Wu9LspBirq
т/е в ней должна быть png текст и справа ссылка, подскажите пожалуйста как правильно написать код для такой кнопки? может это делается через плагин табл? т/к при наведении на него он меняет оттенок. вот ссылка на сайт с кнопкой http://bestinvestor-pamm.ru/
Буду Вам признателен за помощь.

Еще один омомент, сайт я верстаю в вордпрессе.
 
 
0 #24 admin 12.10.2014 13:55
Цитирую Alex:
А видео обтекающее текстом сделать можно?
Так что бы оно и позиционировалось, и обтекало текст, отступы выставлялись.
Про это вообще ни чего нет в инете...
Был бы Вам премного благодарен за помощь.

Видео можно поместить в div и для дива прописать стиль, подробнее здесь: http://www.webadvisor.ru/float-v-css.html
 
 
+1 #23 Alex 12.10.2014 06:31
А видео обтекающее текстом сделать можно?
Так что бы оно и позиционировало сь, и обтекало текст, отступы выставлялись.
Про это вообще ни чего нет в инете...
Был бы Вам премного благодарен за помощь.
 
 
0 #22 admin 14.07.2014 12:09
Зоя, вы можете воспользоваться лайтбоксом Joomla таким образом, как описано здесь:
http://www.webadvisor.ru/lightbox-v-joomla.html
 
 
0 #21 Зоя 13.07.2014 07:54
Добрый день! подскажите пожалуйста, как сделать чтобы вставленная картинка открывалась в лайтбоксе? В админке в категории медиафайлов фотки открываются в лайтбоксе, а вот на самом сайте нет. Это можно как то сделать через этот тектовый реадктор, или есть какие то дополнительные настройки?
 
 
+1 #20 Владимир-A 30.06.2014 12:25
В Joomla 3х обтекания текстом нет вообще, настройки что не наесть самые убогие. Вообще Joomla 3 полное ГАВНО!
 

У Вас недостаточно прав для добавления комментариев. Возможно, Вам необходимо зарегистрироваться на сайте.