Pozicioniranje sadržaja pomoću CSS-a

Umesto korišćenja tabela, kada je potrebno napraviti

određenje rasporede za sadržaj strane, primeniće se

tehnologija CSS (Cascading Style Sheets).

Danas se sve više koristi CSS u različite namene, kako bi se

definisali stilovi i rasporedi po potrebi.

CSS pravila se sastoje od selektora i najmanje jedne

deklaracije. Selektor je kod koji bira HTML na koji se neko

pravilo stila primenjuje.

CSS osobine definišu stil, npr.:

H1 {color: red}

Gde je h1 selektor za zaglavlja h1, a deklaracija se sastoji

od osobine color i vrednosti boje (crvena).

Dakle, ovako definisano pravilo znači da se sva zaglavlja

prikazuju veličinom h1 i definišu crvenom bojom.

Sintaksa pravila u CSS-u se nešto razlikuje od onog u HTML-u.

Vitičaste zagrade sadrže deklaraciju, a iza svake osobine

slede dve tačke. Posle vrednosti osobine, stavlja se ; . U

pravilu može da se nađe više osobina.

Primer

ugrađenog stila:

Pozicioniranje sadržaja

Pozicioniranje se odnosi na šemu koja u CSS-u omogućava

da se pomoću elemenata prave blokovi (odeljci) i da se

zatim pomeraju u odnosu na dokument i pretraživač.

Tok sadržaja se odnosi na CSS tehniku koja element

postavlja sa leve ili desne strane, tako da tekst onda može

da se postavlja oko različitih elemenata. Tok se proširuje

unošenjem elementa <div>.

Pozicioniranje je jezgro CSS-a koji daje kontrolu nad

vizuelnim izgledom strane. Za postavljanje pravougaonika

(šeme) na određeno mesto, koriste se rastojanja u odnosu

na gornji, levi, desni i donji deo.

Apsolutno pozicioniranje

Apsolutno pozicioniranje odnosi se na postavljanje elementa u

odnosu na blok u kome se taj element nalazi. To znači da će

svaki pravougaonik koji se postavi uvek biti pozicioniran u

odnosu na svoj kontejner u kome se nalazi ili na svoj koreni

(osnovni) html element.

Apsolutno pozicioniranje pozicionira element u odnosu na

prvi nadređeni pozicionirani blok. Ovakav element iskače iz

normalnog toka - njegove dimenzije i prisustvo više ne utiču

na druge elemente.

Primer. Postavljanje zaglavlja i pasusa u blok. Blok se postavlja

u odnosu na koreni html element (jer nije napravljen nijedan

drugi blok):

Element stranice sa relativnim pozicioniranjem daje kontrolu

nad apsolutnim pozicioniranjem elemenata naslednika

unutar njega.

Apsolutno pozicioniranje sadržaja (u odnosu na blok koji ga sadrži)

U sledećem primeru će se videti glavni blok (kontejner) koji

sadrži drugi blok (sadržaj). Blok za navigaciju u primeru nije

pozicioniran, ali pošto se nalazi u okviru glavnog bloka, on

će biti uobičajeno prikazan. Blok sadržaj se pozicionira

prema glavnom bloku.

Širina bloka se može

odrediti prema:

<p style="width:

126px">

Relativno pozicioniranje

Relativno pozicioniranje je postavljanje blokova u odnosu

na uobičajeni izgled strane, tačnije postavljaju se elementi

u odnosu na poziciju koju imaju u normalnom toku.

Primer relativno pozicioniranog bloka u odnosu na

paragrafe koji su napisani bez posebnog pozicioniranja:

Stil:

Blok i

prikaz:

Fiksno pozicioniranje

Fiksno pozicioniranje omogućava da se blok postavi bilo

gde na strani.

Primer. Fiksno postavljanje bloka za navigaciju. Apsolutno

postavljanje bloka sadržaj.

Stilovi:

Blokovi i

prikaz:

Rasporedi omogućavaju kreiranje rasporeda po

kolonama.

Primer tri kolone. Ovaj raspored se može napraviti pomoću

apsolutnog pozicioniranja za pozicije leve i desne kolone.

Srednja kolona je deo za sadržaj:

Rasporedi u CSS-u

Stilovi:

Blokovi i

prikaz: