Сышышь ты, выходи сюда,
поговорим !

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

Опубликовано: 23.08.2018

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

Как сделать обтекание текстом в PowerPoint и Word.

Очень важно красиво разместить все элементы на странице, чтобы всё смотрелось органично и стояло на своих местах. Чтобы сделать всё правильно нельзя обойтись без CSS. Чтобы притянуть картинку к левому краю дописываем атрибут align=left после .jpg» и закрываем скобки />, чтобы притянуть картинку вправо аналогично вставляем align=right. Конечно, текст обтекает картинку, но отступов он сам не сделает, поэтому в любом случае необходима работа с CSS. Существует много способов решения данной проблемы, рассмотрим самые правильные и несложные варианты.



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

Заключите нужное изображение в тег div, затем откройте файл CSS и придайте ему вот это значение: float: left (right = лево-право на ваше усмотрение) и проставьте нужные отступы.

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

Присвойте нужному изображению класс. В CSS добавьте поля float: left (right). Margin: 15px 15px 15px 0 — длина отступа: сверху, справа, снизу (отступ к которому прижимается текст к картинке, по умолчанию равен нулю). Случается, что нужно оформить несколько изображений на одной странице. К примеру, изображения находятся в посте. В коде страницы он отображается приблизительно вот так:


Обтекание картинки текстом в CorelDRAW, Illustrator, Photoshop, Indesign

<div class=content></div>

В файле CSS, в этом примере необходимо дописать:

.content img { float: left; margin: 10px 10px 10px 0; }

После этого, все картинки в элементе «content» будут отображаться с заданными вами отступами. А если понадобиться одну картинку выставить по-другому — задайте id (id=your_img), а в CSS допишите:


DataWave CMS : Обтекание фотографии текстом

#your_img { float: right; margin: 5px 0 5px 5px; }

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

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

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

<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. У блока с текстом задан нужный фон и сам внедрён в нижнюю часть картинки.

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

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

rss