Arkusze CSS
Rady i triki

Nieruchome menu

Menu, które widać w prawym górnym rogu tej strony jest po prostu elementem DIV zawierającym elementy A. Wszytkie reguły dotyczące jego stałej pozycji są określone w arkuszu. Oto kod wzięty bezpośrednio ze źródła tej strony:

<div class="banner">
<p>
<a href="../../../"><img alt="W3C" src="../../../Icons/w3c_home"></a>
<a href="../../../Consortium/Activities">Activities</a>
<a href="../../../TR/">Tech.&nbsp;reports</a>
<a href="../../../Help/siteindex">Site index</a>
<a href="../../../Consortium/Translation/">Translations</a>
<a href="../../../Status">Software</a>
<a href="http://search.w3.org/">Search</a>
<em>Nearby:</em>
<a href="../../">Style</a>
<a href="../../CSS/">CSS</a>
<a href="./">tips&nbsp;&amp;&nbsp;tricks</a>
</div>

W przeglądarce bez CSS lub z CSS wyłączonym, bedzie to noramlnym paragrafem posiadającym linki. Dzięki poniższej regule będzie wydawało się, że się unosi na górze strony przy prawym rogu okna przeglądarki:

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 }

Interesującymi tutaj regułami są 'position: fixed', która sprawia, że DIV jest w tym samym miejscu na ekranie i 'display: block', która przetwarza elementy A wewnątrz DIV w elementy bloku a nie w elementy usytuowane w jednej linii.

Proszę uważać na kolejność ostatnich trzech reguł. Ostatni ze stosowanych ustanawia kolor. Jeśli myszka krąży nad linkiem, chcemy aby zastosowany był :hover dlatego musi być ostatni.

Cała reszta, marginesy, granice, kolory, etc. mogą być usunięte lub zmienione według uznania. Proszę zauważyć jak ustaliliśmy reguły pomiędzy linkami: border jest ponad linkiem z wyjątkiem pierwszego, dzięki regule ':first-child'. Para reguł podobnych do tych (border-top na wszzystkich elementach plus border 'none' na first child) jest bardzo wygodna przy tworzeniu granic pomiędzy elementami.

(Jeśli popatrzysz na arkusze stylów tej strony: banner-o.css i banner.css, zobaczysz, że niektóre dodatkowe reguły są sprzeczne. Są one po to aby uchronić się przed "bugs" w kilku przeglądarkach. W szczególności w banner-o.css, banner jets ukryty i w banner.css wyświetlony jest jako blok. Ma to za zadanie ukrywanie banera przed Netscape 4, ponieważ pomija on @import w banner.css.)

FAQ: IE 5 & 6 na Windows?

Jeśli popatrzysz na tą stronę używając Microsoft Internet Explorer 5 lub 6 na Windows ("WinIE5" i "WinIE6"), zobaczysz, że ona nie działa. Przynajmniej nie z wersjami yz września 2002. Duzo ludzi mnie o to pyta, więc oto kilka wyjaśnień. Po krótce: bug jest w przeglądarce a nie na tej stronie.

WinIE5 i WinIE6 nie obsługują jeszcze 'fixed'. Niestety nie parsują również właściwości 'position' należycie. Przeglądarka, która nie zna 'fixed' powinna pominąć regułę 'position: fixed' i przyjąć poprzednią wartość 'position' jaka była w arkuszu stylów. Możemy wówczas dodać 'position: absolute' tuż przed 'fixed' i przeglądarka jej użyje. Ale w WinIE 5 i 6 tak się niestety nie dzieje. Słowo 'fixed' jest interpretowane jako 'static'.

Nie można zmusić WinIE5 i 6 aby popierały 'fixed' ale można to obejść. Johannes Koch powiadomił mnie, że jest pewien trik (z jego kolekcji obejść). Najpierw zamień 'position: fixed' w powyższych regułach stylu na 'position: absolute' a następnie wprowadź ją tuż niżej.

body>div.banner {position: fixed}

(Jeśli banner DIV. jest wewnątrz innego elementu oprócz elementu BODY, wymień BODY na ten element. W efekcie przeglądarki, które rozpoznają regułe '>' (child) selector będą ją stosować a pozostałe przeglądarki, w szczególności WinIE5 i WinIE6, zignorują ją. Zastosują one regułę 'position: absolute' i menu pojawi sie po prawej stronie z teym wyjątkiem, że menu nie będzie się przesuwać podczas skrolowania.

Ważnym jest aby nie było wolnych przestrzeni wewnątrz '>'.