Języki

Niniejszy dokument jest tłumaczeniem, które może zawierać błędy, lub który mógł się zdeaktualizować w stosunku do wersji angielskiej. Wykonane przez: Emil Sierżęga

Web Style Sheets CSS tips & tricks

Zobacz także indeks wszystkich porad.

Na tej stronie:

Przypięte menu

Menu, które widzisz po prawej stronie to prosta lista UL. 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: 

<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>

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: 

#menu {
  position: fixed;
  right: 0;
  top: 50%;
  width: 8em;
  margin-top: -2.5em;
}

Interesującą regułą jest tutaj "position: fixed". Sprawia ona, że DIV pozostaje nieruchomy. Kody "top: 50%" oraz "right: 0" 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).

Istnieją także własności left i bottom, które determinują położenie elementu kolejno z lewej i od dołu strony.

Więcej szczegółów

Bądźmy bardziej dokładni: kiedy element ma ustaloną pozycją (przy użyciu: position: fixed), to 3 własności - left (lewo), width (szerokość) oraz right (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 - punkt widzenia (ang. viewport;); okno może być przykładem takiego punktu widzenia.)

Musisz użyć co najwyżej dwie z trzech spośród tych własności np. left i width, right i width lub left i right. 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ą (auto).

To samo tyczy się własności wertykalnych tj. top (góra), height (wysokość) i bottom (dół). Musisz ustawić maksymalnie dwie z nich: top jeśli chcesz ustalić odległość od góry okna, bottom, aby kontrolować odległość od dołu oraz height, jeśli chcesz ustalić wysokość elementu.

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 poniżej.

FAQ: A co z IE 6?

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.

IE6 nie ma zaimplementowanej własności fixed. To przykre, ale jeszcze gorszy jest fakt, że ta przeglądarka nie radzi sobie także z własnością position. Przeglądarka, która nie zna znaczenia fixed powinna zignorować regułę position: fixed i zastosować jakąkolwiek wcześniejszą deklarację własności position. Wtedy moglibyśmy dodać position: absolute zaraz przed zadeklarowaniem fixed i przeglądarka użyłaby tej reguły. Jednakże w IE6 tak się nie dzieje. Najwyraźniej słowo kluczowe fixed jest interpretowane jako static.

Nie można sprawić, że fixed zadziała pod Internet Explorer 6, ale istnieje obejście dla problemu parsowania. O tym tricku poinformował mnie Johannes Koch. Najpierw zamień position: fixed na position: absolute, a następnie wstaw do Arkuszy Stylów następującą regułę: 

*>#intro {position: fixed}

Efektem tego będzie, że przeglądarka, która zna selektor > (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 position: absolute i menu znajdzie się we właściwym miejscu, tyle, że nie będzie się przemieszczać wraz z przewijaniem myszką.

Ważne jest, aby dookoła > nie było żadnych spacji.

Bert Bos, Prowadzący dział CSS
Prawa autorskie © 1994–2021 W3C® Privacy policy

Utworzono 17 Sty 2001;
Ostatnia aktualizacja śro, 6 sty 2021, 05:40:49

Języki

O tłumaczeniach