<!doctype html public '-//W3C//DTD HTML 4.01//EN'>
<!-- Editors & translators, please, edit menus.en.tmpl, not .html -->
<!-- Translated by Emil Sierżęga. -->
<html lang=pl>
<head profile="http://www.w3.org/2006/03/hcard">
<title>CSS: przypięte menu</title>

<!-- include head.inc -->

<style type="text/css">
  #menu {
    position: fixed;
    right: 0;
    top: 50%;
    width: 8em;
    margin: -2.5em 0 0 0;
    z-index: 5;
    background: hsla(80, 90%, 40%, 0.7);
    color: white;
    font-weight: bold;
    font-size: large;
    text-align: left;
    border: solid hsla(80, 90%, 40%, 0.5);
    border-right: none;
    padding: 0.5em 0.5em 0.5em 2.5em;
    box-shadow: 0 1px 3px black;
    border-radius: 3em 0.5em 0.5em 3em;
  }
  #menu li { margin: 0 }
  #menu a { color: inherit }

  /* Make menu absolute, not fixed, on IE 5 & 6 */
  #menu { position: absolute }
  *>#menu { position: fixed }

  p.stb { text-indent: 0; margin-top: 0.83em }
  p.mtb { text-indent: 0; margin-top: 2.17em }
  p.ltb { text-indent: 0; margin-top: 3.08em }
</style>

<link rel=up title="Tips &amp; tricks" href="./">
<link rel=prev title="Captions" href="figures">
<link rel=next title="Indent" href="indent">

<!-- include translations1 -->

<body>
<!-- include translations2 -->

<h1><em>Web Style Sheets</em>
CSS tips &amp; tricks</h1>

<div class=section id=intro>

<p>Zobacz także <a href="./">indeks</a> wszystkich porad.

<p class=stb>Na tej stronie:

<ul>
<li><a href="#L384">Przypięte menu</a>
<li><a href="#details">Więcej szczegółów</a>
<li><a href="#FAQ">FAQ: A co z IE 6?</a>
</ul>
</div>

<ul id=menu>
<li><a href="#L384">Sekcja 1</a>
<li><a href="#details">Sekcja 2</a>
<li><a href="#FAQ">Sekcja 3</a>
</ul>

<div class="section" id="L384">
<h2>Przypięte menu</h2>

<p>Menu, które widzisz po prawej stronie to prosta lista <em>UL</em>.
Pozostaje jednak nieruchoma kiedy przewijasz tę stronę myszką. (Możliwe,
że musisz najpierw zmniejszyć trochę okno swojej przeglądarki żeby
w ogóle pojawił się scroller.) Wszystko co musisz zrobić, aby przypiąć
listę w ten sposób to napisanie odpowiednich reguł CSS. Poniżej znajdziesz
fragment kodu, który jest wzięty wprost ze źródeł tej strony:

<pre>&lt;ul id=menu&gt;
&lt;li&gt;&lt;a href="#L384"&gt;Sekcja 1&lt;/a&gt;
&lt;li&gt;&lt;a href="#details"&gt;Sekcja 2&lt;/a&gt;
&lt;li&gt;&lt;a href="#FAQ"&gt;Sekcja 3&lt;/a&gt;
&lt;/ul&gt;</pre>

<p>W przeglądarkach bez CSS-ów, albo w takich, w których jest on wyłączony,
wyświetli się ona jako normalna lista z linkami. Ale z CSS-ami, dzięki
powyższym regułom, będzie sprawiała wrażenie "przypiętej" w prawym górnym
rógu okna przeglądarki:

<pre>#menu {
  position: fixed;
  right: 0;
  top: 50%;
  width: 8em;
  margin-top: -2.5em;
}</pre>

<p>Interesującą regułą jest tutaj "<code>position: fixed</code>".
Sprawia ona, że <em>DIV</em> pozostaje nieruchomy. Kody
"<code>top: 50%</code>" oraz "<code>right: 0</code>"  mówią
o tym, gdzie dokładnie ma być wyświetlony ten element.
W tym przypadku: 50% w dół od góry strony oraz odsunięty o 0 pikseli
od prawej strony okna. Pozostałe własności takie jak marginesy,
obramowanie, kolory itp. mogą być dodane wedle własnego uznania
(mają tutaj znaczenie wyłącznie estetyczne).

<p>Istnieją także własności <code>left</code> i <code>bottom</code>,
które determinują położenie elementu kolejno z lewej i od dołu strony.
</div>

<div class="section" id="details">
<h2>Więcej szczegółów</h2>

<p>Bądźmy bardziej dokładni: kiedy element ma ustaloną pozycją
(przy użyciu: <code>position: fixed</code>), to 3 własności
- <code>left</code> (lewo), <code>width</code> (szerokość) 
oraz <code>right</code> (prawo) - razem decydują o horyzontalnym
położeniu oraz szerokości tego elementu względem okna. (CSS-y
używają w tym wypadku bardziej ogólnego wyrażenia - <em>punkt widzenia</em> 
(ang. <em>viewport;</em>); okno może być przykładem takiego
punktu widzenia.)

<p>Musisz użyć co najwyżej dwie z trzech spośród tych własności
np. <em>left</em> i <em>width</em>, <em>right</em> i <em>width</em>
lub <em>left</em> i <em>right</em>. Ustawienie jednej z nich albo żadnej
także jest możliwe. W tym wypadku CSS użyje naturalnej ("wewnętrznej")
wartości rozmiaru lub/i pozycji dla wszystkich własności, którym
pozostawiono wartość domyślną (<em>auto</em>).

<p>To samo tyczy się własności wertykalnych tj. <em>top</em> (góra),
<em>height</em> (wysokość) i <em>bottom</em> (dół). Musisz ustawić
maksymalnie dwie z nich: <em>top</em> jeśli chcesz ustalić odległość
od góry okna, <em>bottom</em>, aby kontrolować odległość od dołu
oraz <em>height</em>, jeśli chcesz ustalić wysokość elementu.

<p>Jeśli spojrzysz na CSS, który jest naprawdę użyty na tej stronie,
zobaczysz w nim pewne dodatkowe reguły, które są wzajemnie sprzeczne.
Są tam, aby zapobiec błędnemu wyświetlaniu w niektórych starszych
przeglądarkach. Więcej informacji na ten temat znajdziesz
<a href="#FAQ">poniżej</a>.
</div>

<div class="section" id="FAQ">
<h2>FAQ: A co z IE 6?</h2>

<p>Jeśli oglądasz te stronę korzystając z Internet Explorera 6 firmy
Microsoft, to pewnie zauważyłeś, że nie jest ona wyświetlona poprawnie.
Wiele osób pyta mnie o to, więc spieszę z wyjaśnieniem. W skrócie:
wina leży po stronie przeglądarki.

<p>IE6 nie ma zaimplementowanej własności <code>fixed</code>. To przykre, ale
jeszcze gorszy jest fakt, że ta przeglądarka nie radzi sobie także
z własnością <code>position</code>. Przeglądarka, która nie zna znaczenia
<code>fixed</code> powinna zignorować regułę <code>position: fixed</code>
i zastosować jakąkolwiek wcześniejszą deklarację własności <code>position</code>.
Wtedy moglibyśmy dodać <code>position: absolute</code> zaraz przed
zadeklarowaniem <code>fixed</code> i przeglądarka użyłaby tej reguły.
Jednakże w IE6 tak się nie dzieje. Najwyraźniej słowo kluczowe <code>fixed</code>
jest interpretowane jako <code>static</code>.

<p>Nie można sprawić, że <code>fixed</code> zadziała pod Internet Explorer 6,
ale istnieje obejście dla problemu parsowania. O tym tricku poinformował mnie
Johannes Koch. Najpierw zamień <code>position: fixed</code> na
<code>position: absolute</code>, a następnie wstaw do Arkuszy Stylów następującą
regułę:

<pre>*>#intro {position: fixed}</pre>

<p>Efektem tego będzie, że przeglądarka, która zna selektor <code>&gt;</code>
(dziecko) użyje tej reguły, jednak przeglądarka, która go nie zna,
na przykład IE6, po prostu ją zignoruje. Zamiast niej zostanie użyta
reguła <code>position: absolute</code> i menu znajdzie się we właściwym
miejscu, tyle, że nie będzie się przemieszczać wraz z przewijaniem myszką.

<p>Ważne jest, aby dookoła <code>&gt;</code> nie było żadnych spacji.

</div>

<!-- include feedback -->

<!-- include banner -->

<div id=endmatter class=section>
<!-- include address -->

<p>Utworzono 17 Sty 2001;<br>
Ostatnia aktualizacja
<!-- include date -->
</div>

<!-- include translations4 -->

<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/HTML4.dcl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
End:
-->