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

Важна, каб вакол '>' не было вольнай прасторы.