"Protok" strane:
The Flow. Da bismo ga bolje objasnili, moraćemo da pogledamo jednu stranu u kojoj ništa nije menjano u CSS-u osim boje pozadine <body>-ja i svih BLOCK elemenata koji je čine (ok, i fonta). Otvorite je, pa se vraćamo.
Dakle, zapazite nekoliko stvari:
- HTML ređa BLOCK elemente ODOZGO NADOLE, redom kojim su ispisani u kodu.
- Nakon svakog BLOCK elementa ide linebreak (prazan red).
- Bez obzira na količinu texta (ili drugog sadržaja) u njemu, SVAKI BLOCK element UVEK zauzima PUNU širinu strane (ovo može da se menja CSS-om, ali sada govorimo samo o HTML-u).
- INLINE elementi teku jedan za drugim horizontalno, od GORE LEVO ka DOLE DESNO (dakle prate tok texta - SLEVA NA DESNO).
- Obratite pažnju na to šta se dešava sa textom a pogotovo sa slikama kada SMANJITE površinu browsera na bilo koji način. Oni se PRILAGOĐAVAJU - sabijaju se i prostiru po potrebi. Zapamtite da se tako isto ponašaju SVI INLINE elementi!
Još par stvari o pozicioniranju elemenata:
- Kada browser pozicionira dva INLINE elementa jedan do drugog, a oni imaju margine npr. prvi 10px a drugi 20px, onda će postojati tačno 30px razmaka između njih (RAZMAK = ZBIR margina koje su jedna pored druge).
- Međutim, kada browser postavi dva BLOCK elementa jedan na drugi, a oni imaju margine iste kao u gornjem primeru, 10px i 20px, onda dolazi do PREKLAPANJA margina, i razmak će biti onoliki kolika je VEĆA margina jednog elementa (u ovom slučaju, 20px). Ako su margine iste, tipa obe po 10px, razmak će biti 10px.
Float:
Float property pomera element i čini da PLUTA iznad ostalih elemenata na stranici (left, right). Element kojem se dodeli float MORA da ima width.
Kao što vidite, dodelili smo jednom paragrafu osobinu float i vrednost right. Stavio sam desnu marginu i crni border, kako bih bolje ilustrovao važnu činjenicu:
Kada se elementu dodeli float, on je izuzet od normalnog "protoka" (flow-a) strane. Svi ostali BLOCK elementi idu iza njega, kao da ne postoji, ali INLINE elementi u tim BLOCK elementima poštuju granice float-ed elementa i POVLAČE se od njega (smanjite širinu browsera i videćete kako se text i slike prilagođavaju).
Uporedite prvi i drugi primer i videćete da float-ovan <p> počinje tačno na istom mestu, ispod prvog <h2>. Iako je izuzet iz flow-a, možete da odredite ispod kojeg elementa će započeti gledajući gde mu je mesto u HTML kodu. Da ste npr. hteli da počne ranije, morali biste da ga premestite ISPOD <h1> (u kodu), ili čak možda i ispod <body> tag-a u HTML-u (ako želite da počne baš od samog vrha strane). Svi ostali elementi su pomereni na gore za tačno onoliko prostora koliko je pre zauzimao <p>. Setite se da sam ja namerno obojio pozadine elemenata da bih bolje ilustrovao šta se dešava, jer se na normalnoj strani ne bi tako jasno videlo šta je iza čega i koliko široko se prostire.
Za float-ed elemente margine se ne preklapaju. Float može da se koristi i za INLINE elemente, uglavnom slike (samo dodajte padding za malo prostora i eventualno border).
Napomena: nije preporučljivo stavljati width za glavni sadržaj na strani, on treba da može da se prilagođava (sabija / prostire) u odnosu na browser. Width sadržaj je FIXAN.
Clear:
clear property naređuje elementu da se pomeri van domašaja float-ed sadržaja u slučaju da je "plutajući' sa njegove leve / desne ili obe strane (left, right, both). Ne radi ništa kod position: absolute;.
Primetite da, iako sam dodelio clear samo <h2> elementima, zbog toga što se jedan pomerio dole od float-ed sadržaja, automatski su se pomerili i svi ostali elementi koji su IZA njega u HTML kodu. Takođe, uočite da se prvi <h2> nije mrdnuo, iako i za njega važi clear: right;. To je zato što on u kodu stoji iznad "plutajućeg" sadržaja (ne dodiruje ga), te nema potrebe da se pomera.
Liquid & Frozen. Jello?
Liquid layouts ("tečni" raspored), sadržaj se prilagođava (sabija / prostire) u odnosu na širinu browsera (default vrednost koja se ne piše jer se podrazumeva, width: auto).
Frozen layouts ("zamrznuti" raspored), sadržaj je fixiran i ne menja se u odnosu na širinu browsera (width property definisan u px ili %).
Jello layouts ("žele" raspored), fixiramo sadržaj sa width, ALI dodamo vrednost levoj i desnoj margini auto (i ovo mora da se piše jer margina nije ceo element). Mnoge stranice koriste ovu vrstu dizajna.
Pozicija:
position property definiše koji tip pozicioniranja se primenjuje na element. Može da se koristi i za BLOCK i za INLINE elemente. Vrednosti:
- static: default (podrazumevana) vrednost, element je u normalnom flow-u na strani. Browser, a ne vi, određuje gde će biti postavljen (poziciju float-a takođe određuje browser, vi samo dajete naznake, tipa levo ili desno).
- absolute: potpuno uklanja element iz toka strane, stavljajući ga u z-osu PREKO ostalih elemenata. Ni BLOCK ni INLINE elementi mu se NE prilagođavaju! Pozicija se određuje pomoću osobina: top, right (oni su dovoljni), bottom, left (u px ili %) u odnosu na najbliži ancestor (predak) element koji takođe ima position property. "Najstariji" pozicionirani je sam <html>, jer njega browser automatski pozicionira kad napravi stranu. Apsolutno pozicionirani elementi mogu da idu jedan preko drugog po z-osi, kao špil karata. Prvi je 1, onaj na njemu 2, itd. Zamišljena "ispupčenost" (od monitora ka posmatraču) se određuje osobinom z-index. Apsolutno pozicionirani element NE MORA da ima width! Ako se ne odredi width, BLOCK elementi će zauzimati punu širinu browsera, minus razlika koju postavite sa leve i desne strane. Da ponovimo, clear property ne radi ništa kod position: absolute;.
Napomena: ako pozicionirate u odnosu na <html>, imajte u vidu da se "bottom" ne odnosi na dno strane već na dno browser prozora! Tako da, ako hoćete da pozicionirate element od dna strane a ne od donje ivice browsera, moraćete da ga stavite u drugi element sa position: relative; koji se nalazi na dnu strane. - fixed: udaljenost od browser prozora (viewport). Ne pomera se ČAK i kad skrolujete! Može da se stavi i negativna vrednost, tipa -90px (izvan viewport-a). Ostali sadržaj na strani se normalno skroluje i postavlja IZA tog elementa (ali BUKVALNO iza, uopšte se ne prilagođava, može da bude potpuno zaklonjen).
- relative: element ostaje u normalnom flow-u strane, ali ga browser "pomeri" trenutak pre prikazivanja (na mestu gde je "bio" ostaje prazan prostor). Može da izgleda kao da je IZVAN svog boxa. Top, right, bottom, left (i njihove vrednosti) se odnose na prvobitni položaj elementa u flow-u.