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

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

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

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

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

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

<div class=content></div>

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

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

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

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

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

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

Источник

Показать больше

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

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

Кнопка «Наверх»