Blok-elementi zauzimaju cijeli redak, čak i ako im se postavi manja širina.
Budući da oni uvijek uzrokuju prebacivanje sljedećeg elementa u novi red, nije moguće postaviti dva blok-elementa u istom retku.
Za razliku od njih, linijski elementi neće uzrokovati prebacivanje u novi red, ali njima se ne mogu podešavati širina i visina.
Postavljanjem svojstva display na vrijednost inline-block, elementu je moguće zadati širinu i visinu, a on neće uzrokovati prelazak u novi red.
Tako se u istom redu može imati više elemenata, tj. taj se red može podijeliti na više stupaca.
Jedan od najčešće korištenih rasporeda na web-stranicama sastoji se od zaglavlja, središnjeg dijela koji je podijeljen u tri stupca i podnožja elementa.
Elementi koji imaju neku klasu prvi, drugi i treci se žele prikazati u istom stupcu.
Da bi se to postiglo, najprije im treba postaviti širinu: prvi i treći stupac imat će širinu od 20 %, a drugi stupac zauzimat će preostalih 60 % prostora.
.prvi, .treci {
width: 20%;
}
.drugi {
width: 60%;
}
Svaki blok-element zauzima cijeli redak pa elementima koji se žele smjestiti kao stupci treba promijeniti tip prikaza u inline-block:
.prvi, .drugi, .treci {
display: inline-block;
}
Osnovna namjena svojstva float je prelamanje teksta oko slike, kao što je prikazano u prošlom poglavlju.
No svojstvo float može se rabiti i za postizanje željenog rasporeda elemenata na stranici.
Blok-elementi kojima se postavi svojstvo float neće uzrokovati prelazak u novi red, nego će ih biti moguće smjestiti jednog do drugog u istom retku.
Podsjetimo se, element kojem se postavi svojstvo float na vrijednost left bit će pozicioniran uz lijevi rub roditeljskog elementa.
Ako se i sljedećem elementu postavi svojstvo float na left, on će se pozicionirati uz rub prethodnog elementa.
Na elemente koji se želi pozicionirati kao stupci postavit će se stoga svojstvo float na vrijednost left:
.prvi, .drugi, .treci {
float: left;
}
Kod korištenja svojstva float ne treba se brinuti o razmaku između elemenata u HTML-kôdu, ali postoje drugi problemi koji se mogu pojaviti. Elementi koji slijede iza elemenata sa svojstvom float mogu se ponašati neočekivano.
U većini je slučajeva dovoljno postaviti svojstvo clear na prvi sljedeći element koji dolazi iza elemenata sa svojstvom float. Svojstvom clear isključuje se djelovanje svojstva float na elemente koji slijede i ponovno se nastavlja s uobičajenim pozicioniranjem elemenata na stranici.
Svojstvo clear može se postaviti na ove ključne riječi:
HTML-elementi u prozoru se preglednika prikazuju redoslijedom kojim su navedeni u HTML-kodu.
Blok-elementi (npr. elementi div i p) zauzimaju cijeli redak i prebacuju sljedeći element u novi red.
Linijski elementi (npr. elementi span i em) ne zauzimaju cijeli redak, već samo onoliko mjesta koliko zauzima njihov sadržaj.
To je normalni slijed (ili tijek) elemenata u HTML-u.
Elementi slijede jedan iza drugoga istim redoslijedom kojim su napisani.
No pomoću CSS-svojstva position moguće je izbaciti željeni element iz tog slijeda i staviti ga na drugi položaj na stranici, koji ne mora imati veze s njegovim redoslijedom u HTML-kodu.
Svojstvo position može se postaviti na četiri osnovne vrijednosti: static, relative, absolute i fixed.
To je inicijalna vrijednost koju ima svojstvo position, ako nije promijenjeno u neku od ostalih vrijednosti. Ključna riječ static označava da se element nalazi unutar normalnog slijeda elemenata.
position: static;
Postavljanjem vrijednosti relative za svojstvo position dopušta se da element bude pomaknut u odnosu na mjesto koje bi inače zauzimao. P
omak elementa definira se pomoću CSS-svojstava top, right, bottom i left.
.drugi {
position: relative;
top: 10px;
left: 30px;
}
Tim svojstvima postavlja se iznos pomaka u jedinicama duljine ili u postocima (postotak se odnosi na širinu elementa kod svojstava right i left, a kod svojstava top i bottom na visinu elementa.)
Osim vrijednosti, tom se svojstvu može postaviti i ključna riječ auto.
Korištenjem vrijednosti absolute element se također pomiče iz slijeda elemenata na stranici, a pomoću svojstava top, right, bottom ili left određuje se pomak elementa u odnosu na ishodišni element.
Ishodišni element u odnosu na koji se element pomiče inicijalno je element body.
Ako je potrebno, kao ishodišni se element može postaviti i drugi element.
.drugi {
position: absolute;
top: 25px;
left: 180px;
}
Pomoću svojstva top navodi se udaljenost za koju se element pomiče u odnosu na gornji rub ishodišnog elementa, a pomoću svojstva left u odnosu na lijevi rub ishodišnog elementa.
Ako se rabi svojstvo bottom, element se pomiče za navedenu udaljenost u odnosu na donji rub elementa, a ako se koristi svojstvo right, u odnosu na desni rub elementa.
Ako je ishodišni element body, pomak će biti u odnosu na donji, odnosno desni rub prozora preglednika (jer element body zauzima upravo prostor preglednika).
U primjeru se vidi da kad se rabi vrijednost absolute, prostor koji je zauzimao pomaknuti element nije sačuvan, nego se na njega smjestio sljedeći element u nizu.
Kao ishodišni element, umjesto elementa body, može se postaviti neki od roditeljskih elemenata našeg elementa koji se želi pomaknuti.
Postavlja se tako da se roditeljevo svojstvo position postavi na relative.
Vrijednost fixed slična je vrijednosti absolute. I ovdje se element pomiče u odnosu na ishodišni element, s tom razlikom da ishodišni element može biti samo element body.
Kao i kod vrijednosti absolute, i ovdje prostor koji bi inače zauzimao pomaknuti element neće biti sačuvan.
Razlika je u tome što je element pozicioniran na ovaj način „fiksiran“ na svojem položaju i za razliku od ostalih elemenata ostaje na istom mjestu čak i kad korisnik okomito pomiče stranicu u pregledniku.
.drugi {
position: fixed;
top: 90px;
left: 180px;
}
Ključne riječi na koje se može postaviti svojstvo position: