CSS Design: Приборкання списків
В як предмет дресирування я вибрав прості ненумерованные списки. Усі згадані тут правила CSS можна застосувати й до нумерованным списками з тим самим результатом. В усіх життєвих прикладах (крім спеціально обумовлених випадків) використовується наступний список: Скажем, вам знадобився список із цілком особливими маркерами. Як багато надходили раніше? Створювали таблицю, лише у колонці розміщали… Читати ще >
CSS Design: Приборкання списків (реферат, курсова, диплом, контрольна)
CSS Design: Приборкання списков.
Марк Ньюхаус.
Я виявив, більшість сторінок містять панель навігації. Найчастіше вона оформляється як проста текстова рядок із посиланням, розділеними тегами <DIV> чи <P>. Структурно вони є списки посилань, і отже повинні оформлятися як таковые.
Причина, з якої ми не оформляємо їх як списки, у тому, що мені невідь що хочеться перед кожної посиланням в меню бачити маркер. У статті я розповів про деякі прийомах верстки сторінок із допомогою CSS. У одному з тих прийомів ми навчилися виводити списки в рядок, а чи не вертикально.
В цій статті я покажу, як за допомогою CSS можна приборкати ці неповороткі і незграбні списки. Досить їм безпритульно валандатися за вашими ж веб-страницам. Настав ваше час командувати їм, як поводитися.
Готовим арену
В як предмет дресирування я вибрав прості ненумерованные списки. Усі згадані тут правила CSS можна застосувати й до нумерованным списками з тим самим результатом. В усіх життєвих прикладах (крім спеціально обумовлених випадків) використовується наступний список:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5 зробимо цей пункт трохи длиннее,.
щоб він переходив для наступної рядок </li>
</ul>
Каждый список просто поміщений всередину окремого елемента <DIV>, і поведінку списку визначається за допомогою цього DIV-а. Базове правило, чинне попри всі DIV-ы, таково:
#base {.
border: 1px solid #000;
margin: 2em;
width: 10em;
padding: 5px;
}.
Без будь-яких додаткових стильових правил, список в базовому DIV-е виглядатиме так:
Item 1.
Item 2.
Item 3.
Item 4.
Item 5 зробимо цей пункт трохи довші, що він переходив для наступної рядок.
Позиционирование
Иногда до вашої дизайну відступ у списку ухвалений за умовчанням може бути надто великою. Але зміна лише властивості margin чи padding для елемента <UL> спрацьовує задля всіх броузерів. А, щоб список повністю пересунувся скажімо вліво, вам необхідно змінити обидва властивості: і margin, і padding. Пов’язано це про те, що Internet Explorer і Opera створюють лівий відступ у списку з допомогою лівого margin, а Mozilla/Netscape використовують із цього лівий padding. Докладніше звідси читайте у статті Consistent List Indentation з сайту DevEdge.
В наступному прикладі властивостями margin-left і padding-left у елемента UL присвоєно значення 0:
Item 1.
Item 2.
Item 3.
Item 4.
Item 5 зробимо цей пункт трохи довші, що він переходив для наступної рядок.
Обратите увагу, що маркери лежать по закордонах DIV-а. Якби контейнером не була DIVX, а <BODY> документа, маркери були б поза вікна броузера, тобто. зникли б із очей. Коли хочете, щоб маркери лежали всередині кордонів DIV-а, вздовж лівого її краї, привласніть або властивості left-padding або властивості left-margin значення «1em » .
Item 1.
Item 2.
Item 3.
Item 4.
Item 5 зробимо цей пункт трохи довші, що він переходив для наступної рядок.
Маркеры
Скажем, вам знадобився список із цілком особливими маркерами. Як багато надходили раніше? Створювали таблицю, лише у колонці розміщали gif-картинку маркера і знімали їх у осередку вгору й за вправо. У другій колонці розміщали текст, що був б перебуває у елементах <LI>. Тепер CSS дозволяє вживати зображення у ролі маркера. Якщо броузер не підтримує цю функцію CSS (або підтримує висновок графіки), буде використано маркер за умовчанням (або той, що ви зазначте цей случай).
Стилевое правило виглядає так:
ul {.
list-style-image: url (bullet.gif);
}.
А броузер покаже список так:
Item 1.
Item 2.
Item 3.
Item 4.
Item 5 зробимо цей пункт трохи довші, що він переходив для наступної рядок.
Для тих броузерів, які підтримують висновок графіки, додайте у Правила таку строчку:
list-style-type: disc;
Изображения, обраний вами як маркера, може «виповзти «поза межі списку. Щоб цього не сталося, помістіть зображення всередину блоку <LI>. І тому додайте таку строку:
list-style-position: inside;
Все три декларації можна поєднати за одну стисле правило:
ul {.
list-style: disc url (bullet.gif) inside;
}.
что эквивалентно.
ul {.
list-style-type: disc;
list-style-image: url (bullet.gif);
list-style-position: inside;
}.
Список внаслідок виглядатиме так:
Item 1.
Item 2.
Item 3.
Item 4.
Item 5 зробимо цей пункт трохи довші, що він переходив для наступної рядок.
Бывает отже ви маєте список, але вам непотрібні маркери, чи собі хочете використовувати як маркера якоїсь іншої символ. Знову ж таки CSS квапиться до вам допоможе. Додайте правило list-style: none; і зробіть елементи <LI> «надвисающими ». Все правило повністю виглядатиме так:
ul {.
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em;
}.
Либо властивість лівий padding, або властивість лівий margin повинен мати значення 0, а інше — значення 1em. Змінюючи це властивість ви можете підігнати розмір відступу від вашого маркера до прийнятного. Негативне значення в властивості text-indent призводить до того, що як перша рядок кожного пункту списку зсувається вліво і «надвисает «над іншим текстом.
Следующий наш перелік звичайним, лише як маркера буде використано стандартний HML-символ, наприклад «, який відповідає закриває друкарською лапках: » .
" Item 1.
" Item 2.
" Item 3.
" Item 4.
" Item 5 зробимо цей пункт трохи довше, що він переходив для наступної рядок.
Здесь треба сказати, що Netscape6/7/Mozilla (та інші похідні Gecko-броузеры), і навіть Opera вміють генерувати контент з допомогою псевдо елемента: before з стандарту CSS2. Скористаємося цієї функцією і сгенерируем автоматично символ «чи жодній іншій символ як маркера. Отже потрібно буде вписувати його вручну в кожен LI елемент. Якщо вже ви працює із броузером Opera чи із родиною броузерів Gecko, нижчеподаний CSS створить той самий список, як і попередній, причому у сам список нічого додатково додавати не нужно.
#custom-gen ul li: before {.
content: «.