Каскадні таблиці стилів
CSS поради & прийоми

Фіксоване меню

Меню, яке ви бачите у верхньому правому куту цієї сторінки, є простим DIV з деякіми А-елементами усередині. Вся робота, виконана до цього, щоб зафіксувати його на місці, відповідає правилам у таблиці стилів. Ось оформлення, яке береться прямо з джерела на цій сторінці:

<div class="banner">
<p>
<a href="../../../"><img alt="W3C" src="../../../Icons/w3c_home"></a>

<a href="../../../Consortium/Activities">Діяльність</a>
<a href="../../../TR/">Тех.&nbsp;звіти</a>

<a href="../../../Help/siteindex">Індекс сайту</a>
<a href="../../../Consortium/Translation/">Переклади</a>

<a href="../../../Status">Програми</a>
<a href="http://search.w3.org/">Пошук</a>

<em>Поруч:</em>
<a href="../../">Стилі</a>
<a href="../../CSS/">CSS</a>

<a href="./">Поради&nbsp;&amp;&nbsp;прийоми</a>

</div>

У браузері без CSS або із вимкнутим CSS воно буде звичайним параграфом з посиланнями. Але, завдяки описаним нижче правилам, воно буде "плавати" у верхній частині сторінки, фіксуючись до верхнього правого кута вікна браузера: div.banner { margin: 0; font-size: 80% /*smaller*/; font-weight: bold; line-height: 1.1; text-align: center; position: fixed; top: 2em; left: auto; width: 8.5em; right: 2em; } div.banner p { margin: 0; padding: 0.3em 0.4em; font-family: Arial, sans-serif; background: #900; border: thin outset #900; color: white; } div.banner a, div.banner em { display: block; margin: 0 0.5em } div.banner a, div.banner em { border-top: 2px groove #900 } div.banner a:first-child { border-top: none } div.banner em { color: #CFC } div.banner a:link { text-decoration: none; color: white } div.banner a:visited { text-decoration: none; color: #CCC } div.banner a:hover { background: black; color: white } Цікаве правило 'position: fixed', яке відповідає за фіксоване розташування DIV на екрані й 'display: block', яке відповідає за розташування A-елементів усередині DIV в елементи блоку, й таким чином розташовуючи їх у стовпчик, а не у рядок. Будьте уважні з порядком останніх трьох правил. Вони всі мають однакову специфіку, а останнє визначає колір. Якщо мишка плаває над посиланням, ми бажаємо застосувати :hover, таким чином він буде останнім. Все інше - поля, межі, кольори й т.д. можна перемістити або змінити на свій смак. Але зверніть увагу, як ми виконуємо правила між посиланнями: над всіма посиланнями є межі, за виключенням першого, завдяки правилу з ':first-child'. Пара правил, як це (межі зверху всіх елементів плюс межа 'none' на першому дочірньому елементі) дуже зручні для створення меж між елементами.

Якщо ви дивитесь на цю сторінку за допомогою Microsoft Internet Explorer 5 або 6 Windows ("WinIE5" и "WinIE6"), ви помітите, що вона не працює. Принаймні, не на поточній версії вересня 2002. Багато людей питають мене про це, тому даю маленьке пояснення. Коротко: баг у браузері, а не на цій сторінці.

WinIE5 та WinIE6 ще не виконують 'fixed'. Це пагано, але набаго важливіша проблема в тому, що вони також не достатньо коректно розпізнають 'position'. Браузер, який не знає 'fixed', повинен відкинути правило 'position: fixed' й повернутися до попереднього значення 'position' у таблиці стилів. Потім ми можем додати 'position: absolute' прямо перед 'fixed' й браузер це використує. Але у WinIE 5 й 6 такого не відбувається. Можливо, ківорд 'fixed' інтерпретується, як 'static' (статичний).

Ви не зможете виконати 'fixed' у WinIE5 й 6, але існує обхід цієї проблеми. Джоан Коч розповів мені про цей трюк (з його колекції рішень). Спочатку переместіть 'position: fixed' у правилах стилів над 'position: absolute', а потім вставте наступне правило дещо нижче таблиці стилів:

body>div.banner {position: fixed}

(Якщо банер DIV знаходиться усередині іншого елементу, а не у основному, переместіть основний елемент за цей елемент.) Ефект у тому, що браузери, які знають про '>' (дочірній елемент) CSS, будуть використовувати це правило, але браузери, які не знають про нього, зокрема WinIE5 й WinIE6, будуть його ігнорувати. Замість нього буде використовуватися правило 'position: absolute' й меню буде на правильному місці, за виключенням того, що воно буде фіксованим під час прокрутки.

Важливо, щоб навколо '>' не було вільного місця.