Швидка навігація по сторінці:
- Загальне рішення задачі
- Масове застосування для всіх зображень
- Накладаємо текст на зображення
Правильне і гарне розміщення всіх об’єктів на сторінці — невід’ємний елемент дизайну будь-якого поважаючого себе сайту. Як завжди, тут не обійтися без CSS. Справа в тому, що обтікання зображення текстом HTML сам по собі робить (за допомогою атрибутів align=left, align=right тега img), але він при цьому не створює відступів. Тому без 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 — блок з текстом буде мати білий фон і розташовуватися в нижній частині зображення.
Як бачите, нічого складного в обтіканні кліпів і накладення на них тексту немає, головне — експериментувати і підбирати найбільш вдалий варіант!