Автор статті: Сергій Камінський
Реєструючи поштову скриньку або будь-який інший сервіс ви, напевно, стикалися з тим, що вам пропонують прочитати угоду користувача перед початком реєстрації. Угода зазвичай дуже довге і ніхто його не читає, тому для того щоб заощадити час відвідувачеві, який хоче швидше натиснути на кнопку "Згоден", угоду користувача, як правило, поміщається в невеликому блоці з смугою прокрутки. Домогтися потрібного нам результату можна декількома способами.
Якщо ваше угоду користувача складається тільки зі звичайного тексту, то його можна помістити в <textarea> </ textarea>. Але якщо ви хочете використовувати заголовки, картинки або таблиці всередині блоку, то першим що приходить в голову буде використання <iframe />. Але це не дуже хороший спосіб вирішити проблему. Оскільки вміст фреймів подгружается з іншого документа, то це збільшує час повного завантаження сторінки, а може трапитися і так, що сторінка з угодою взагалі не підвантажиться в Фрейм. Тому даний спосіб нам теж не дуже підходить.
Напевно, мало хто знає, що зробити невеликий блок з смугою прокрутки можна за допомогою CSS. У цьому випадку вся інформація буде знаходитися в одному документі, а не в декількох. Давайте розглянемо наступний приклад.
Цей код поміщаємо в "тілі" нашої сторінки:
<Div class = "frame"> Це угоду користувача може містити: <br /> <br /> звичайний текст <br /> <br /> <h1> Заголовки </ h1> <img src = "http: // www .kaminskiy-web.com / style / logo.jpg "alt =" картинки "/> <br /> <br /> <a href="http://www.kaminskiy-web.com/"> посилання </ a> <br /> <br /> <ul> <li> Списки </ li> </ ul> <table cellpadding = "5" cellspacing = "1" bgcolor = "# FF0000"> <tr> <td bgcolor = "# FFFFFF"> і навіть </ td> <td bgcolor = "# FFFFFF"> таблиці </ td> </ tr> </ table> <br /> <br /> і <em> будь-які </ em > <strong> інші </ strong> <u> елементи сторінки </ u> </ div>
А наступну частину коду потрібно додати до вашим основним CSS-стилів, тобто помістити між тегами <style> і </ style> або додати в файл зі стилями:
.frame {overflow: auto; width: 550px; height: 100px; text-align: justify; padding: 15px; border-left: # 000000 1px solid; border-right: # 000000 1px solid; border-top: # 000000 1px solid; border-bottom: # 000000 1px solid; scrollbar-face-color: # DF0000; scrollbar-highlight-color: # FF0000; scrollbar-shadow-color: # BB0000; scrollbar-3dlight-color: # 660000; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: # F5F5F5; scrollbar-darkshadow-color: # 660000; }
Найголовнішим CSS атрибутом в наведеному прикладі є overflow. Він визначає чи буде блок стискатися до зазначеного параметрами width і height розміру і може набувати таких значень:
- visible - блок відображається повністю, не залежно від заданої висоти і ширини
- hidden - відображається із заданою шириною і висотою, але з відсутністю смуги прокрутки, що не дає можливості побачити весь вміст блоку
- auto - відображається із заданою шириною і висотою, а при необхідності браузер автоматично додає вертикальну і горизонтальну смугу прокрутки
- scroll - присутній як горизонтальна, так і вертикальна смуга прокрутки незалежно від розміру вмісту блоку
А далі йдуть вже знайомі всім параметри, що визначають розташування тексту в блоці, відступ вмісту нашого блоку від його країв, колір і товщину рамки блоку, а також кольору смуги прокрутки.
Ось що у нас вийшло
Звичайно ж даний спосіб можна застосовувати не тільки для того щоб розміщувати угоду користувача. У такий блок можна поміщати статті, новини та інше вміст.
Інші записи по темі в розділі статті по HTML і CSS
Копіювання статті заборонено.