Робимо обтікання зображення текстом HTML і CSS

Швидка навігація по сторінці:

  • Загальне рішення задачі
  • Масове застосування для всіх зображень
  • Накладаємо текст на зображення

Правильне і гарне розміщення всіх об’єктів на сторінці — невід’ємний елемент дизайну будь-якого поважаючого себе сайту. Як завжди, тут не обійтися без CSS. Справа в тому, що обтікання зображення текстом HTML сам по собі робить (за допомогою атрибутів align=left, align=right тега img), але він при цьому не створює відступів. Тому без CSS все-таки не обійтися.

Робимо обтікання зображення текстом HTML і CSS

Загальне рішення задачі

CSS? Я знаю кілька способів, з допомогою яких можна вирішити поставлену задачу.

Так, наприклад, картинку можна укласти в тег DIV, якому через CSS задати властивість float:left або float:right, з проставленням необхідних відступів.

Але цей спосіб я б не назвав найбільш коректним — навіщо включати в документ зайвий тег, якщо питання можна вирішити виключно в рамках тегу IMG?

Робиться це з допомогою присвоєння все тих же самих властивостей — float, що відповідає за вирівнювання, і margin, що відповідає за відступи.

Для початку присвоїмо нашому зображенню клас:

<img src=”моя_картинка.јрд” width=”100″ height=”100″ class=”img_class” />

Тепер пропишемо відповідні властивості CSS — припустимо, що у нас картинка буде стояти ліворуч:

.img_class {
float: left;
margin: 10px 10px 10px 0;
}

Властивість margin потрібно для того, щоб задати відступи тексту від картинки — інакше він впритул до неї пригорнеться, що буде не дуже красиво. При цьому ми ставимо їх зверху, справа і знизу, а лівий відступ ставимо рівним нулю, так як саме зображення буде знаходитися зліва.

Масове застосування для всіх зображень

Якщо потрібно, щоб всі зображення в документі вирівнюються по лівому краю, тоді це питання можна вирішити відразу на рівні того блоку (елемента) сторінки, в якому вони знаходяться — щоб не прописувати кожен раз class для зображення. Навіть невелика економія трафіку того варто.

Припустимо, що картинки знаходяться в пості, який на сторінці вашого сайту показується в <div class=»content»></div>.

У такому разі в CSS файлі вашого сайту буде достатньо прописати наступний код:

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

Тепер всі зображення, що знаходяться в блоці «content», будуть вирівнюватися зліва і мати вищевказані відступи. Якщо для якогось окремого зображення ви захочете зробити виключення — наприклад, розташувати його праворуч, то для нього буде потрібно задати id (наприклад, id=»my_img») і в css файлі прописати такі параметри (повинні починатися зі знака решітки — #):

#my_img {
float: right;
margin: 10px 0 10px 10px;
}

Накладаємо текст на зображення

Деколи необхідно, щоб текст був написаний прямо на зображенні, наприклад, часто буває красиво, якщо зробити велику картинку до статті, а на ній написати назву статті або якусь анотацію.

Знову-таки, зробити це можна безліччю способів. Наведу два найбільш популярних.

По-перше, можна створити блок, в якому буде написаний текст, а зображення буде виступати фоном для цього блоку:

<div class=”my_block”>Текст, який буде накладено на зображення</div>

.my_block {
background: url (my_img.jpg) top left no-repeat;
width: 500px;
height: 300px;
padding: 400px 0 0 0;
}

У цьому блоці рядок з текстом розміститься в нижній частині блоку — з верхнім відступом 400 пікселів.

Даний метод особливо добре підходить для елементів дизайну (шапка, логотип сайту), в яких вже заздалегідь відомий і розмір зображення і текст, який буде написаний.

Інший метод — це створити два блоку (один — з картинкою, інший — з текстом), і помістити один «зверху» іншого у відповідності з заданими параметрами. Великий плюс цього методу полягає в тому, що у блоку з текстом можна задати фон (у тому числі і напівпрозорість):

<div class=”img”>
<img src=”моя_картинка.јрд” width=”500″ height=”300″ />
<div class=”text”>Текст, який буде накладено на зображення</div>
</div>

.img {
width:500px;
height: 300px;
position: relative;
}
.text {
background-color: #FFF;
width: 500px;
height: 50px;
position: absolute;
left: 0px;
top: 450px;
}

У наведеному прикладі ми розмістили один блок всередині іншого з допомогою властивості position — блок з текстом буде мати білий фон і розташовуватися в нижній частині зображення.

Як бачите, нічого складного в обтіканні кліпів і накладення на них тексту немає, головне — експериментувати і підбирати найбільш вдалий варіант!

Поділитися з друзями:
Відповіді на питання