Sakrivanje elemenata pomoću svojstva display i visibility

Tri elementa div kao linijski elementi

Tri elementa div kao linijski elementi, pri čemu je drugi div sakriven pomoću "display: none"

Tri elementa div kao linijski elementi, pri čemu je drugi div sakriven pomoću "visibility: hidden"

Sakrivanje elemenata pomoću selektora :target

Da bi se primenio selektor :target potrebno je sledeće:

1. Elementu koji se formatira pomoću selektora :target (u daljem tekstu: ciljani element) treba dodeliti jednoznačan identifikator (npr. "<img id='fred'...">). Na taj način element postaje nalik sidru, tj. ima svoju adresu (#fred).
2. Kreira se link na ciljani element koristeći isti način adresiranja kao u slučaju linka na sidro ("<a href='#fred'...").
3. U CSS-u se selektoru :target pridružuje odgovarajuće formatiranje (npr. ":target {display: none;}" ako želimo da sakrijemo ciljani element klikom na link). Selektor :target je suviše uopšten, pa se može kombinovati sa drugim selektorima. Na primer "img:target {display: none;}" se koristi ako želimo da sakrijemo samo slike u svojstvu ciljanog elementa, dok neki drugi HTML-element, koji je takođe ciljani element za neki link, želimo da formatiramo na drugačiji način kada se klikne na njegov link. Na isti način, "#fred:target {display: none;}" će sakriti samo jedan jedini element čiji je identifikator "fred".

Da biste se vratili u stanje pre klika na linka, samo aktivirajte Back.

Česta greška se pravi kada se aktivira link koji preko selektora :target menja formatiranje, a onda se nešto izmeni u HTML-kodu i uradi Refresh/Reload.

Ako obratite pažnju na adresu stranice u čitaču veba posle klika na link kojim testirate selektor :target, videćete da se na kraju adrese pojavljuje sidro (u ovom primeru prikaz.html#fred). Ako nešto promenite u HTML-kodu stranice, Refresh/Reload neće prikazati novu varijantu stranice pre klika, jer zapravo ponovo učitavate stranicu prikaz.html#fred, tj. verziju posle klika.

Da biste videli kako izgleda nova verzija stranice u stanju pre klika na link, vama je zapravo potrebno da ponovo učitate prikaz.html, što ćete najlakše uraditi tako što najpre aktivirate Back (adresa postaje samo prikaz.html), a onda Refresh/Reload. Ova napomena važi i za primere koji se slede, a odnose se na transformaciju elemenata pomoću selektora :target.

Transformacija elemenata pomoću selektora :target

Skaliranje

Rotacija

Translacija

Navigacija kao lista

Ova lekcija ilustruje da pojedina CSS-svojstva moraju da se pojave zajedno kako bi se postigao određeni efekat.

Elementi liste se podrazumevano ponašaju kao blokovski elementi (tj. kao da u CSS-u stoji "li {display: block;}"), tj. zauzimaju celu širinu ekrana (to se najbolje vidi ako oko svakog elementa proizvoljne neuređene liste zadamo zeleni okvir punom linijom debljine 2px ("ul li {border: 2px solid green;}").

Proizvoljna lista

• File
• Edit
• View
• Tools
• Help

Da bismo neuređenu (nenumerisanu) listu pretvorili u meni, neophodno je da uklonimo podrazumevani kružić (eng. bullet) ispred svakog elementa liste. U tom smislu koristimo CSS-svojstvo list-style-type ("list-style-type: none;"). Da bi se to primenilo samo na jednu listu, a ne na sve, toj posebnoj listi dodeljujemo identifikator (<ul id='navig'>) i CSS-svojstvo list-style-type podešavamo samo za tu listu ("#navig { list-style-type: none;}").

Lista linijskih elemenata

Sledeći korak je da elemente liste prikažemo u jednoj liniji. Postoje dva načina da se elementi liste prikažu u jednoj liniji. Prvi način je da se primeni "#navig li {display: inline;}", tj. da se elementi liste tretiraju kao linijski elementi. Nažalost, ovo rešenje nije dobro pošto CSS ne dozvoljava da se linijskim elementima podešava širina pomoću svojstva width; tačnije, svaki linijski element će uvek imati najmanju moguću širinu koja je potrebna i dovoljna da se prikaže njegov sadržaj. To ilustruje lista kojoj smo dodelili identifikator "linijska" ( #linijska li { display: inline; }). Ma kako menjali svojstvo width, širina elemenata liste se neće menjati.

• File
• Edit
• View
• Tools
• Help

Lista #navig

Upravo iz tog razlika svojstvo display ima i vrednost "inline-block" koja omogućava da se elementi prikazuju u liniji, a da istovremeno može proizvoljno da se menja njihova širina. To ilustruje lista sa identifikatorom "navig" ("#navig li { width: 1.2cm; display: inline-block;}"). Međutim, i ova lista ima problem sa razmacima između elemenata liste, kao i lista "linijska". Među različitim rešenjima za eliminaciju ovih razmaka, često se koristi svojstvo float koje omogućuje da elementi nemaju fiksnu poziciju, već "teku" (eng. float) ka levoj ili desnoj ivici ekrana dok ne naiđu na neki drugi element. U ovom primeru to znači da ako svim elementima liste "navig" dodelimo "float: left", oni će "poteći" ka levoj ivici ekrani redosledom kojim su navedeni i zbiće se jedan uz drugi. Štaviše, ako sa njihove desne strane ima mesta, bilo koji HTML-element koji sledi iza liste "navig" pojaviće se u istoj liniji kao i lista, zbijen uz njenu desnu ivicu kao da je i sam "potekao" ka levoj ivici ekrana. Da bi se to sprečilo, element koji sledi iza liste mora imati svojstvo "clear" koje u zavisnosti od svoje vrednost (left, right, both) "čisti" sve plutajuće elemente sa leve, desne ili obe strane elementa. U ovom slučaju je iza liste ubačen prazan element div sa identifikatorom "cistac" i svojstvom "clear: both" koje omogućava da se pojavi u posebnoj liniji i zauzme celu širinu ekrana, tako da ono što sledi ne bude zbijeno uz listu "navig".

Da bi se razumelo šta se sve dešava u ovom primeru, najbolje je napraviti ga od samog početka i postepeno ubacivati pojedina svojstva, menjati njihove vrednosti i pratiti promene u čitaču veba.

• File
• Edit
• View
• Tools
• Help

Neki tekst