-
Я створюю сторінку для Хопера, одного з
анімаційних персонажів сайту Khan Academy.
-
Вона містить в собі зображення, кілька класних
посилань та абзац.
-
Я думаю, що це зображення Хопера
матиме кращий вигляд,
-
якщо розмістити його біля абзацу.
Тому я збираюсь вирізати його
-
і вставити ось тут.
-
Хм. Добре, це виглядає не настільки добре,
наскільки я очікувала.
-
Текст починається знизу зображення.
-
Я сподівалась, що текст буде
біля зображення,
-
так як в газетах чи журналах.
-
Для цього нам потрібна нова
властивість CSS: "float" (обтікання).
-
Це спосіб розміщувати елементи
один навколо одного,
-
і він просто ідеальний, для того щоб
зробити обтікання зображення текстом.
-
Тому ми йдемо вгору до правила "pic"
і пишемо: "float:".
-
Щоб написати значення, нам потрібно
вирішити, з якого боку буде зображення:
-
справа чи зліва від тексту.
-
Спробуймо зліва.
-
Чудово. Ідеально!
-
Хоча... не зовсім ідеально,
-
тому що тест розміщений
надто близько до зображення.
-
Ви пам'ятаєте, яку властивість
ми маємо використати,
-
щоб відділити текст від зображення?
-
Це частина блокової моделі,
яку ми щойно вивчили.
-
Зовнішні відступи. (Margin).
-
Додамо відступи справа та
відступи знизу до зображення,
-
щоб дати йому трохи більше
вільного простору.
-
Ах, добре, так значно краще.
-
Не лише зображення можуть
обтікатися текстом.
-
Наприклад, нам потрібно щось таке,
як бокова панель.
-
Як щодо цього списку посилань?
-
Ми можемо взяти цей список
і розмістити його справа.
-
Додаймо правило для #hopper-links
-
і розмістімо його справа так, щоб його
обтікав інший текст.
-
Добре, текст його обтікає, але
посилання забирають надто багато місця,
-
більше, ніж я б хотіла.
-
Обмежмо ширину до 30%,
-
щоб посилання завжди займали 30%
сторінки,
-
а решта сторінки, 70%, була заповнена
іншими елементами.
-
Загалом, щоразу, як ви використовуєте
властивість float для , ви мусите додавати ширину.
-
Оскільки в іншому випадку
займатиме все вільне місце,
-
і жоден з елементів не зможе
його обтікати.
-
Здається, тут також потрібний
відступ зліва.
-
Добре.
-
Тепер погляньте на нижній колонтитул
з контактами Хопера внизу сторінки.
-
Сталось щось дивне, оскільки він
перекриває нашу бокову панель.
-
І це тому, що він обгортає інші елементи.
-
Однак ми не хочемо, щоб колонтитул
щось обгортав.
-
Ми хочемо, щоб він завжди був
з самого низу,
-
оскільки це нижній колонтитул.
-
Щоб він нічого не обгортав, ми використаємо
властивість "clear" (очищення).
-
і напишемо "clear: both".
-
Хах.
-
Ми можемо використати
"clear: left" або "clear: right",
-
якщо ми хочемо, щоб він не огортав
-
лише елементи зліва чи справа.
-
Але переважно нам потрібно,
щоб він взагалі нічого не огортав,
-
тому ми кажемо "clear: both".
-
Тепер це виглядає яксправжня веб-сторінка.
-
Ми маємо основну частину, бокову панель
та нижній колонтитул.
-
Насправді, тепер ви вже знаєте властивості
CSS, які створюють розмітку більшості сторінок.
-
Додайте до ширину, висоту,
зовнішні та внутрішні відступи,
-
обтікання текстом або його відміну,
-
і всі види розміток сторінок
будуть до ваших послуг.
-
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"
