Foi de Stil Web
Indrumari si trucuri CSS

Un meniu tintuit

Meniul pe care il vedeti in coltul din dreapta al acestei pagini este simplu un element DIV cu cateva elemente A in interior. Toata activitatea pentru a-l face sa stea fix in locul lui se obtine prin reguli in foaia de stil. Iata marcajul, este luat direct din sursa acestei pagini:

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

Intr-un browser fara CSS, sau cu CSS dezactivat, va fi numai un paragraf normal cu linkuri. Dar multumita regulilor de mai jos, el va apare ca "plutind" in susul paginii, tintuit i partea dreapta sus a ferestrei browserului:

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 }

Regulile interesante aici sunt 'position: fixed', care face ca DIV sa stea fixat pe ecran, si 'display: block', care face elementele A din interiorul DIV in elemente bloc, si astfel afisate unul sub celalalt, mai degraba decat toate in linie.

Fiti grijulii cu ordinea ultimelor trei reguli. Ele toate au aceeasi specificitate, astfel ca ultima care se aplica determina culoarea. Daca mouse-ul se misca deasupra linkului, noi dorim ca :hover sa se aplice asa ca trebuie sa fie ultimul.

Restul, marginile, granitele, culorile, etc. pot fi eliminate sau schimbate in concordanta cu gustul personal. De notat, totusi, cum am definit regulile intre linkuri: exista granite deasupra tuturor linkurilor, exceptand primul, multumita regulii cu ':first-child'. O pereche de reguli ca aceasta (border-top pe toate lementele plus border 'none' pe primul copil) este foarte convenabila pentru crearea granitelor intre elemente.

(Daca va uitati la foile de stil actuale care sunt legate de la aceasta pagina, banner-k.css si banner.css, veti vedea cateva reguli aditionale care par ca se contrazic una cu cealalta. Acelea sunt acolo pentru a proteja impotriva bugurilor in cateva browsere mai vechi. In particular, in banner-o.css, banerul este ascuns si in banner.css este afisat ca un bloc. Aceasta are ca efect ascunderea banerului pentru Netscape 4, pentru ca el sare peste @import a lui banner.css.)

FAQ: IE 5 & 6 in Windows?

Daca priviti la aceasta pagina cu Microsoft Internet Explorer 5 sau 6 in Windows ("WinIE5" si "WinIE6"), veti constata ca nu functioneaza. Cel putin nu cu versiunile curente in Sept 2002. Multi oameni ma intreaba despre asta, asa ca iata explicatia. Pe scurt: bug-ul e in browser, nu in aceasta pagina.

WinIE5 si WinIE6 nu implementeaza 'fixed' inca. Aceasta este nefericit, dar problema mai mare este ce ele nu interpreteaza deasemenea corect proprietatea 'position'. Un browser care nu cunoaste 'fixed' ar trebui sa elimine regula 'position: fixed' si sa foloseasca orice valoare precedenta pentru 'position' s-a gasit in foaia de stil. Am putea atunci adauga 'position: absolute chiar inainte de 'fixed' si browserul ar utiliza acea valoare. Dar in WinIE 5 si 6 asta nu e ceea ce se intampla. Aparent cuvantul 'fixed' este cumva interpretat ca 'static'.

Nu puteti face WinIE5 si 6 sa suporte 'fixed', dar exista o solutie ocolitoare pentru problema de interpretare. Johannes Koch m-a alertat despre acest truc (din colectia sa de solutii ocolitoare). Mai intai inlocuiti 'position: fixed' in regulile de stil de mai sus prin 'position: absolute' si apoi inserati urmatoarea regula putin mai jos in foaia de stil:

body>div.banner {position: fixed}

(Daca DIV.banner este in interiorul altui element in afara de BODY, inlocuiti BODY prin acel element.) Efectul acesteia este ca browserele care cunosc despre selectorul '>' (copil) al CSS va utiliza aceasta regula, dar browserele care nu cunosc, in particular WinIE5 si WinIE6, il va ignora. Regula 'position: absolute' va fi utiizata in loc si meniul va fi in locul corect, exceptand ca nu va sta fix in timpul derularii.

Este important ca sa nu existe spatii in jurul '>'.