Реєструючи поштову скриньку або будь-який інший сервіс ви, напевно, стикалися з тим, що вам пропонують прочитати угоду користувача перед початком реєстрації. Угода зазвичай дуже довге і ніхто його не читає, тому для того щоб заощадити час відвідувачеві, який хоче швидше натиснути на кнопку "Згоден", угоду користувача, як правило, поміщається в невеликому блоці з смугою прокрутки. Домогтися потрібного нам результату можна декількома способами.
Якщо ваше угоду користувача складається тільки зі звичайного тексту, то його можна помістити в . Але якщо ви хочете використовувати заголовки, картинки або таблиці всередині блоку, то першим що приходить в голову буде використання . Але це не дуже хороший спосіб вирішити проблему. Оскільки вміст фреймів подгружается з іншого документа, то це збільшує час повного завантаження сторінки, а може трапитися і так, що сторінка з угодою взагалі не підвантажиться в Фрейм. Тому даний спосіб нам теж не дуже підходить.
На що здатний CSS
Напевно, мало хто знає, що зробити невеликий блок з смугою прокрутки можна за допомогою CSS. У цьому випадку вся інформація буде знаходитися в одному документі, а не в декількох. Давайте розглянемо наступний приклад.
Цей код поміщаємо в "тілі" нашої сторінки:
А наступну частину коду потрібно додати до вашим основним CSS-стилів, тобто помістити між тегами або додати в файл зі стилями:
Найголовнішим CSS атрибутом в наведеному прикладі є overflow. Він визначає чи буде блок стискатися до зазначеного параметрами width і height розміру і може набувати таких значень:
- visible - блок відображається повністю, не залежно від заданої висоти і ширини
- hidden - відображається із заданою шириною і висотою, але з відсутністю смуги прокрутки, що не дає можливості побачити весь вміст блоку
- auto - відображається із заданою шириною і висотою, а при необхідності браузер автоматично додає вертикальну і горизонтальну смугу прокрутки
- scroll - присутній як горизонтальна, так і вертикальна смуга прокрутки незалежно від розміру вмісту блоку
А далі йдуть вже знайомі всім параметри, що визначають розташування тексту в блоці, відступ вмісту нашого блоку від його країв, колір і товщину рамки блоку, а також кольору смуги прокрутки.
Ось що у нас вийшло
Звичайно ж даний спосіб можна застосовувати не тільки для того щоб розміщувати угоду користувача. У такий блок можна поміщати статті, новини та інше вміст.
Інші записи по темі в розділі статті по HTML і CSS