Click here to load reader

CSS Pozicioniranje

  • View
    36

  • Download
    1

Embed Size (px)

DESCRIPTION

Kako raditi pozicioniranje u css-u

Text of CSS Pozicioniranje

  • SADRAJ

    1. Uvod ................................................................................................................................................ 1

    1.1. Normal Flow ............................................................................................................................ 1

    1.2. CSS display i visibility svojstvo ................................................................................................. 2

    1.3. HTML i element ................................................................................................ 5

    1.4. CSS model kutije (box model) .................................................................................................. 5

    Visina i irina ....................................................................................................................... 7

    Margine i padding ............................................................................................................... 7

    Margine ............................................................................................................................... 7

    Padding ............................................................................................................................... 7

    Ivice ..................................................................................................................................... 7

    1.5. Pseudoklase i pseudoelementi ................................................................................................ 8

    Overflow svojstvo ............................................................................................................... 8

    1.6. Uslovni komentari za IE ........................................................................................................... 9

    2. Pozicioniranje HTML elemenata upotrebom CSS-a....................................................................... 10

    2.1. Float CSS svojstvo .................................................................................................................. 10

    Sintaksa ............................................................................................................................. 10

    Osobine plutajudih elemenata .......................................................................................... 11

    Float u praksi ..................................................................................................................... 12

    Problemi u primjeni float svojstva .................................................................................... 14

    2.2. Position CSS svojstvo ............................................................................................................. 17

    Position: static ................................................................................................................... 17

    Position: relative ............................................................................................................... 18

    Position: absolute ............................................................................................................. 19

    Position: fixed ................................................................................................................... 20

  • Web programiranje CSS pozicioniranje

    1

    1. Uvod

    Jezik za obiljeavanje CSS znai Cascading Style Sheets. Dijeli se na dvije verzije 2.1 i 3, a u ovoj

    skripti bavimo se iskljuivo CSS-om 2.1 koji je, uprkos postojanju verzije 3, jo uvijek u irokoj

    upotrebi, mada polako svoje mjesto ustupa novijoj verziji standarda.

    CSS svoj naziv zahvaljuje svojoj osobini odreenosti prioriteta u prikazu bududi da CSS-ovi selektori

    na raznim razinama i razliitim prioritetima mogu oblikovati isto mjesto. CSS je usmjeren za prikaz

    (X)HTML-a, ali ne nuno samo njega nego i bilo kojeg drugog jezika za obiljeavanje (npr. XML).

    Bududi da je preuzima funkciju grafikog oblikovanja sadraja, (X)HTML-u ostaje ono za to je

    prvobitno i zamiljen za opis strukture elemenata. Radimo li u striktnom modu HTML-a 4.1 ili

    XHTML-a 1.0, njegova je upotreba obavezna.

    Odvajanjem sadraja od izgleda generira se manje koda, a on je bitno pregledniji te ga je lake

    naknadno ureivati.

    Svaki se element (X)HTML-a moe modificirati CSS-om ime moemo govoriti o univerzalnosti CSS-

    ovih selektora (za razliku od HTML-ovih atributa).

    Popisi selektora (selectors) je podugaak i on se ne mora uiti napamet, ali se mora znati za to slui i

    kako se upotrebljava. U ovim se skriptama oni nede taksonomski nabrajati, nego de se ukazati na

    osnovnu sintaksu i mogudnosti, a uenicima se ostavlja da dodatne informacije pronau na tutorijalu

    iz CSS na stranicama W3Schoolsa http://www.w3schools.com/css/. Zbog svoje univerzalnosti

    selektori su primjenjivi za brojna mjesta tako da je uenje time jednostavnije svojstvo padding,

    margin, align moe imati i odlomak, div, slika, naslov itd.

    U ovoj skripti biti de dat kratak opis nekih naprednih CSS selektora i njihovi naini primjene prilikom

    izrade web stranica.

    1.1. Normal Flow

    Prije negoli preemo u pregled i opisivanje pojedinih CSS selektora bitni za nae izuavanje CSS-a ,

    vano je razmotriti ogranienja odnosno osobine prostora u kojem CSS funkcionie. Osnovna

    karakteristika za koju se veu sve osobine CSS-a zove se normal flow ili normalni tok dokumenta.

    Prema CSS 2.1 specifikaciji svaki element unutar CSS posmatra se kao kutija (box) na koji se

    primjenjuju razliita CSS svojstva.

    Ako su elementi kutije, normal flow dokumenta analogan je zakonu gravitacije u stvarnom svijetu.

    Normalni tok definie nain na koji redamo kutije elemenata jedan na drugi, jedan ispod ili pored

    drugog, u onom redu u kojem se pojavljuju u (X)HTML kdu. Osnovna pravila koja nam zakon

    gravitacije dozvoljava u nainu redanja obinih kutija, vae i u svijetu CSS-a s tom razlikom da nam

    CSS nudi naine i mogudnosti da prkosimo zakonu gravitacije ukoliko to elimo.

  • Web programiranje CSS pozicioniranje

    2

    1.2. CSS display i visibility svojstvo

    Da bi smo razumjeli kako funkcionie display/visibility svojstvo pogledajmo osnovnu podjelu HTML

    elemenata na dvije skupine:

    1. block-level elementi

    Poinju i zavravaju sa novim redom (line break) u prikazu browsera

    , , , ,

    2. inline elementi

    prikazuju se jedan za drugim, bez prelaza u novi red

    , , , ,

    Bez obzira na ovu podjelu, mogude je promijeniti inline element u block-level i obrnuto, ime se moe

    postidi specifian prikaz stranice a jo uvijek biti u okviru web standarda.

    Sljededi primjer prikazuje elemente liste kao inline elemente.

    Rezultat unutar browsera

    Sljededi primjer prikazuje element kao blok element:

  • Web programiranje CSS pozicioniranje

    3

    Rezultat unutar browsera

    Display osobina definie kako i da li se upote element prikazuje, a visibility osobina definie da li bi

    elemenat trebao biti vidljiv ili ne. Pogledajmo na sljededem primjeru.

    Element stranice moemo sakriti tako to postavimo svojstvo display na none ili visibility na

    hidden. Meutim, postoji razlika u krajnjem prikazu ostalih elemenata stranice.

    Visibility:hidden sakriva element, ali predvieni prostor za taj element u prikazu stranice jo uvijek

    je zauzet. Element de biti sakriven, ali de jo uvijek uticati na izgled stranice.

  • Web programiranje CSS pozicioniranje

    4

    Display:none sakriva element ali ne zauzima prostor unutar stranice. Element de biti sakriven, a

    stranica de se prikazati kao da on uopte i ne postoji.

  • Web programiranje CSS pozicioniranje

    5

    1.3. HTML i element

    je block-level element koji se moe koristiti kao kontejner za grupisanje drugih HTML

    elemenata. Nema posebnog znaenja, osim tog da s obzirom da predstavlja block-level element,

    browser prikazuje po jedan prazan red prije i poslije elementa.

    U kombinaciji sa CSS-om, element se koristi za postavljanje stilova na vedi broj elemenata.

    Druga esta upotreba elementa prilikom definisanja izgleda (layouta) stranice. Zamjenjuje

    danas prevazienu metodu upotrebe elementa za definisanje izgleda stranice.

    element predstavlja inline element koji se moe koristiti kao kontejner za tekst. Element

    nema posebnog znaenja, a u kombinaciji sa CSS-om moe se upotrijebiti za postavljanje odreenih

    stilova na dijelove teksta.

    Tag Opis

    Definie sekciju u dokumentu (block-level)

    Definie sekciju u dokumentu (inline)

    1.4. CSS model kutije (box model)

    Vrlo bitna osobina za razumjevanje HTML-a i CSS-a jeste tzv. Box model.

    Box model definie svaki element na HTML stranici (block ili inline level) kao pravougaonu kutiju,

    koja pored visine i irine moe (ali i ne mora) ukljuivati margine (margins), popune (padding) i ivicu

    (border).

    Da naglasimo jo jednom

    Vrlo je bitno znati odrediti tane dimenzije kutije pojedinog elementa kako bi se prilikom njegovog

    pozicioniranja znala potrebna veliina prostora u kojem se on mora nalaziti. U suprotnome moe dodi

    do pomjeranja elemenata koji moe imati nepredvidive posljedice na na dizajn i oteati mogudnosti

    pronalaenja greke prilikom njegovog kreiranja.

    Dimenzija kutije zapoinje sa irinom i visinom elementa koja moe biti definisana njegovim tipom,

    njegovim sadrajem ili vrijednostima CSS svojstava width i height.Visina i irina se zatim sabiraj

Search related