Каскадные таблицы стилей
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' и меню будет на правильном месте, за исключением того, что оно будет фиксированным во время прокрутки.

Важно, чтобы вокруг '>' не было свободного пространства.