Dokument http://www.accountzen.com/007/menus.html, je prijevod i može sadržati pogreške. Originalni službeni dokument može se vidjeti na https://www.w3.org/Style/Examples/007/menus.html. Pogreške možete prijaviti na moj e-mail matthewjon75@yahoo.com
Tennessee Cabins For Sale Smoky Mountain Cabins For Sale www.realestate-palmharbor.com

Web Style Sheets
CSS savjeti i trikovi

(This page uses CSS style sheets.)

Prikačeni meni

Meni koji vidite u gornjem desnom uglu ove stranice jednostavno je DIV sa izvjesnim A elementima unutra. Čitav posao kako bi ga ostavili fiksiranog na svojem mjestu urađen je pomoću pravila u style sheet-u. Ovdje je oznaka, uzeta iz izvornog koda ove stranice:

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

U pregledniku bez CSS, ili sa isključenim CSS, to bi bio samo normalni stavak sa linkovima. Medjutim zahvaljujući donjim pravilima meni će "ploviti" na vrhu stranice, okačen u gornji desni dio prozora preglednika:

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 }

Interesantna pravila ovdje su: 'position: fixed', koje DIV čini fiksiranim za ekran, i 'display: block', koje elemente A unutar DIV pretvara u blok elemente, i tako ih prikazuje jedan ispod drugog, umjesto sva na istoj liniji.

Budite pažljivi sa redoslijedom posljednja tri pravila. Ona sva imaju istu specifičnost, te posljednje koje se primjenjuje određuje boju. Ako miš lebdi preko linka, mi trebamo primjeniti :hover te onda to mora biti posljednje.

Sve ostalo, margine, ivice, boje itd. može biti uklonjeno ili mijenjano po osobnom ukusu. Primjetite, medjutim, kako smo uradili pravila između linkova: tu su ivice iznad svih linkova, osim prvog, zahvaljujući pravilu ':first-child'. Par pravila kao ova (ivica na vrhu za sve elemente i bez ivice za prvi potomak) je vrlo podesno za sastavljanje ivica između elemenata.

(Ako pogledate u aktualne style sheetove koji su povezani sa ovom stranicom, banner-k.css e banner.css, vidjet ćete neka dodatna pravila koja su naizgled proturječna. Ona su tu da štite od greški u nekim starijim preglednicima. Posebice, u banner-o.css, zaglavlje je skriveno, a u banner.css je prikazano kao blok. Ovo za posljedicu ima skrivanje zaglavlja u Netscape 4, jer preskače @import u banner.css.)

Upiti: IE 5 & 6 u Windows?

Ako pogledate ovu stranicu sa Microsoft Internet Explorer 5 ili 6 sa Windows ("WinIE5" i "WinIE6") vidjet ćete da ne fukcionira. Barem ne sa aktualnom inačicom od mjeseca rujna 2002. Mnogi me ljudi pitaju o ovome, te evo i objašnjenja. Ukratko: greška je u pregledniku, ne u ovoj stranici.

WinIE5 i WinIE6 nažalost još uvijek ne primjenjuju 'fixed'. Ipak veći problem je da oni također ne raščlanjuju pravilno svojstvo 'position'. Preglednik koji ne prepoznaje 'fixed' trebao bi odbaciti pravilo 'position: fixed' i prebaciti nazad na vrijednost prethodnog pravila 'position' u style sheetu. Onda možemo dodati: 'position: absolute' točno ispred 'fixed' i preglednik bi onda to koristio. Ipak u WinIE 5 i 6 to nije slučaj. Očevidno je ključna riječ 'fixed' nekako interpretirana kao 'static'.

WinIE5 i 6 se ne mogu napraviti tako da podržavaju 'fixed', ali postoji jedan način zaobilaženja problema raščlanjavanja. Johannes Koch me je upozorio na ovaj trik (iz njegove zbirke zaobilaznica). Prvo zamjenite 'position: fixed' u gornjim pravilima za stil sa 'position: absolute' i zatim umjetnite naredno pravilo malo niže u style sheet:

body>div.banner {position: fixed}

(Ako je DIV.banner unutar nekog drugog elementa osim BODY, zamjenite BODY sa tim elementom.) Posljedica ovoga je da će preglednici koji znaju za '>' (potomak) birač u CSS koristiti ovo pravilo, a oni koji ne znaju, posebice WinIE5 i WinIE6, će ga ignorirati. Pravilo 'position: absolute' će biti korišteno umjesto ovoga i meni će biti na pravome mjestu, osim da neće biti fiksiran pri pomicanju.

Važno je da nema prostora oko '>'.

CSS Valid CSS!

Bert Bos
Dokument sastavljen 17 siječnja 2001;
Posljednja izmjena $Data: 2009/02/03 14:39:10 $GMT