Skola CSS-a

[jasmanac]

Pozicioniranje

 

U CSS-u postoje tri nacina za pozicioniranje elemenata. To su:

 

1. Staticko pozicioniranje (Static)

2. Apsolutno pozicioniranje (Absolute)

3. Relativno pozicioniranje (Relative)

 

Staticko pozicioniranje (Static)

Kada postavite neki element u okviru stranice i pri tom ne definisete njegovu poziciju (npr. position: absolute), onda se taj isti element prostore kroz dokument u njegovom "normalnom toku". To znaci da ako imate neki element 1 ispred i element 2 iza gore pomenutog elementa n, vizuelno njihov raspored bice kao na slici 1. Ovakav raspored elemenata ostaje isti sve dok elementi 1 i 2 nemaju definisane svoje pozicije (absolute ili relative).

 

 

Staticno pozicioniranje (Static) je inicijalna vrednost za poziciju (position property) nekog elementa i ono se desava po default-u. Znaci nije potrebno da se posebno deklarise.

 

Takodje, bilo koji pokusaj pozocioniranja statickog elementa po left ili top vrednostima bice ignorisano. Zasto? Zato sto pozicija statickog elementa na stranici je odredjena pozicijom u normalnom toku dokumenta a ne vrednostima za top ili left. Na primer, ako bismo elementu n na slici 1 dodali top: 2em on bi i dalje ostao na istom mestu jer je po default-u staticki element koji lezi u normalnom toku dokumenta.

 

Ukoliko pak zelite da pozicionirate vas staticki element u o odnosu na neku drugi staticki objekat, onda iskoristite margine (npr. margin: 0 5px).

 

 

 

Apsolutno pozicioniranje (Absolute)

Prilikom apsolutnog pozicioniranja, element izlazi iz normalnog toka dokumenta i biva postavljen u odnosu na gornji levi ugao, kao na slici 2, svog parent-a.

 

 

Znaci ukoliko imamo neki element na stranici koji sadrzi nas element n, element n bice pozicioniran u odnosu na gornju levu tacku (top left corner) svog kontejnera. Pri tom, nas parent element mora biti pozicioniran odnosno ne sme biti staticki. Ukoliko element n nema svoj parent odnosno nije ugnjezden, bice pozicioniran u odnosu na levi gornji ugao samog dokumenta.

 

Najbolji nacin za apsolutno pozicioniranje, jeste da kontejner koji sadrzi element n pozicionirate relativno (position: relative) bez ikakvih vrednosti za top, right, bottom i left i na taj nacin ga zadrzite u normalnom toku dokumenta a ugnjezdeni element n apsolutno sa proizvoljnim vrednostima za top, right, bottom i left. Na taj nacin element n bice pozicioniran u odnosu na gornji levi ugao svog kontejnera (parent).

 

 

Relativno pozicioniranje (Relative)

Kod relativnog pozicioniranja element ostaje u normalnom toku dokumenta i pozicionira se u odnosu na mesto gde se nalazi u dokumentu. Ovo moze dovesti do preklapanja sa drugim elementima sto predstavlja mozda zeljeni efekat. Relativno pozicioniranje pozicionira element po top, right, bottom i left vrednostima u odnosu na poziciji u kojoj se nalazi.

 

Ono sto je vazno napomenuti kod relativnog pozicioniranja jeste to da mesto na kome se element prethodno nalazio, pre pozicioniranja, ostaje zauzeto. To znaci da prostor u kome je element bio pre pozicioniranja ostaje popunjen kao da je element jos uvek tu bez obzira sto je element pozicioniran na drugom mestu u dokumentu. Vidi sliku 3.

 

 

 

Postoje tri stvari koje treba zapamtiti kod relativnog pozicioniranja:

 

1. Element se pozicionira u odnosu na mesto gde se nalazi u dokumentu.

2. Prostor koji element zauzima u normalnom toku dokumenta ostaje zauzet.

3. Dolazi do pojave preklapanja elemenata.

[jasmanac]

Slomljeni box model (broken box model)

 

 

IE5, IE5.5 i IE6 u takozvanom quirks modu koriste dobro poznati slomljeni box model (broken box model). Za razliku od navedenih, svi moderniji Web čitači koriste pravilan box model. Box model ustvari predstavlja kako su definisane dimenzije nekog elementa. Quirks mod u IE se javlja kada Doctype uopšte nije definisan ili kada je nepotpun. Takođe se javlja kod xhtml dokumenata kada se koristi xml prologue.

 

Kod pravilnog box modela, realna širina nekog elementa definisana je kao zbir stvarne širine + padinga + bordera. Dok je kod slomljenog box modela, realna širina elementa predstavlja stvarnu širinu u kojoj su uračunati pading i border.

 

Uzmimo sledeći primer kao referencu

 

.elementsyle {
width:200px;
padding:50px;
border:2px solid #000;
}

 

Kod pravilnog box modela, realna širina elementa biće: 2px + 50px + 200px + 50px + 2px = 304px. (Upamtite da imamo border i pading i sa leve i sa desne strane i otuda se računaju po dva puta)

 

Kod slomljenog box modela, realna širina je jednaka stvarnoj širini koja u ovom slučaju iznosi 200px. Što znači da je border i pading mora biti uračunat u tih 200px.

 

Iz toga proizilazi da je kod slomljenog box modela širina elementa 200px dok je kod pravilnog box modela širina elemnta 304px što za posledicu ima nepravilno prikazivanje u pomenutim Web čitačima sa slomljenim box modelom.

 

Najbolji način za prevazilaženje ovog problem jeste da širinu elementa zadamo odvojeno od padinga i bordera. Pading (i ponekad border) mogu se zadati child elementu. U tom slučaju glavni element zadržava svojih 200px ali unutrašnji element dobija pading od 20px koji ne utiče na realnu širinu glavnog elementa. Pri tom, unutrašnji element ne sme imati definisanu širinu!

 

Primer:

// CSS kod
.outer {
width:200px;
}
.inner {
padding:50px;
}

 

<!-- HTML kod -->
<div class=”outer”>
<div class=”inner”><p>Some text</p></div>
</div>

 

U navedenom primeru, .outer zadržava širinu od 200px dok .inner u isto vreme dobija pading od 50px koji ne utiče na realnu širinu .outer elementa. Ovo je ujedno i najjednostavniji način savladavanja slomljenog box modela.

 

Naravno, da bismo izbegli ugnježdavanje elemenata ponuđeni kod možemo uprostiti:

// CSS kod
.outer {
width:200px;
}
.outer p {
padding:50px;
}

 

<!-- HTML kod -->
<div class=”outer”>
<p>Some text</p>
</div>

 

Međutim, šta se dešava sa borderom? Ponekad se javlja potreba da border bude postavljen na glavnom (.outer) elementu. U tom slučaju javlja se potreba upotrebe takozvanih hakova u CSS-u (hacks). Pomenućemo takozvani uprošćeni box model hack (Simplified Box Model Hack (SBMH)).

 

Ovaj hack nam omogućava dve stvari:

 

1. Da zadamo vrednosti koje će se odnositi samo na IE i

2. I da razdvojimo vrednosti koje se odnose na ie6 i ie5/5.5

 

Pitate se zašto bismo razdvajali IE 5.5 i IE6? Zato što se kod IE6 slomljeni box model javlja samo u quirks modu dok u standard modu on ima pravilan box model. Da biste inicirali standard mod kod IE6 dovoljno je samo da koristite ceo Doctype dok kod xhtml izbegavajte xml prologue.

 

Pomenuti hack koristi univerzalni selektor * u kombinaciji sa html elementom kako bi poslao određeni stil samo Exploreru. Drugi hack koristi takozvani backslash (escape karakter) kako bi odvojio vrednosti ie5.5 od ie6.

 

Primer:

.elementname {
width:400px;
padding:50px;
}
* html .elementname{
width:500px;/*for ie5.x win */
w\idth:400px;/*for ie6*/
}

 

Ukoliko pak ie6 radi u quirks modu onda pomenuti primer izgleda ovako:

.elementname {
width:400px;
padding:50px;
}
* html .elementname{
[B]width:500px;/*for ie5.x win and ie6*/[/B]
}

 

Samo smo sklonili backslash kako bi ie6 u quirks modu dobio iste vrednosti kao i ie5.

 

Što se tiče Explorera za Mac, on ima pravilan box model kada se koristi Doctype međutim kada Doctype nije pravilan ili kada se koristi xml prologue IE mac ne zalazi u quirks mod. U tom slučaju potrebno je sakriti univerzalni selektor * za ie mac.

 

/* commented backslash mac hiding hack \*/ 
* html #test {width:300px}
/* end hack */

 

U pomenutim primerima koristili smo samo širinu međutim ista je stvar i prilikom zadavanja vrednosti za visinu. Ali visina u večini slučajeva i nije toliko važna kao što jeste širina.

[jasmanac]

Centriranje stranice po horizontali

 

Da biste izvrsili centriranje stranice po horizontali, morate najpre kreirati jedan kontejner koji ce stranicu drzati horizontalno poravnatu. U tom slucaju, ukoliko ste u kontejneru neke od elemenata pozicionirali apsolutno, potrebno je da ih pozicionirate relativno u odnosu na kontejner koji je, naravno, parent u odnosu na element/e u istom.

 

E sada, to i nije neki problem ako postoje samo par elemenata u kontejneru ali ako je izgled stranice kompleksan to je onda veliki problem. Ali nemojte brinuti o tome ;) Primenicemo trik sa takozvanim apsolutno-relativnim pozicioniranjem. Naime, potrebno je samo da kontejner koji drzi sve elemente horizontalno centriranim, relativno pozicionirate bez ikakvih koordinata. Znaci samo dodajte position: relative; bez ikakvih vrednosti za top, right, bottom ili left. U tom slucaju, glavni kontejner je relativno pozicioniran dok su ostali parent elementi pozicionirani apsolutno u odnosu na glavni kontejner sto za posledicu ima to da vas layout ostaje nepromenjen.

 

Najbolji nacin za centriranje glavnog kontejnera, koji treba da bude blok element (obicno div), jeste da mu vrednosti za levu i desnu marginu budu auto (margin: 0 auto;). Takodje je potrebno da istom zadate i sirinu (width) kako bi sve funkcionisalo kako treba. Naravno, kada racunate sirinu obavezno povedite racuna o margin-ama i pading-u. Nakon toga, potrebno je dodati text-align: center; body tagu zbog Explorera v5.0. Medjutim, to ce dovesti do toga da svi elementi sada naslede text-align: center;. Potrebno je samo glavnom kontejneru vratiti text-align: left; kao u primeru.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Headline</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body {
text-align: center;
margin: 0px;
padding: 0px;
min-width:775px;/* stop mozilla sliding off the edge */
}
.central {
margin-right: auto;
margin-left: auto;
position: relative;
width: 775px;
text-align: left;
}
-->
</style>
</head>
<body>
<div class="central"> 
all the rest of your page.....
</div>
</body>
</html>

 

Kao sto primecujete, ceo sadrzaj je sada centriran. Da biste vratili poravnanje teksta potrebno je samo glavnom kontejneru vratiti poravnanje text-align: left; koje je nasledio od svog parenta odnosno body tag-a.

[jasmanac]

Koriscenje fontova koji nisu standardni

 

Ovo vam uopste ne preporucujem ali ukoliko vec zelite da eksperimentisete, onda bi to trebalo da ide ovim redom.

 

Potrebno je najpre definisati familiju kojoj ce prizvoljni font pripadati a zatim i mesto gde se nalazi isti. Ovde je vazno da putanja do fonta bude apsolutna.

 

 <style type="text/css" media="screen, print">
@font-face {
font-family: "Formata";
src: url("http://site/fonts/formata")
}
</style>

 

Nakon toga, samo primenimo font ciju smo familiju prethodno definisali.

 

h1 { font-family: "Formata", "arial", "verdana", "helvetica" }

 

I to bi bilo sve!

 

Jos jednom da napomenem, ovu tehniku nije preporucljivo koristiti za blokove tekstova vec samo za pojedine citate ili naslove.

 

Pored ove gore navedene varijante, postoji bolje resenje SIFR (Scalable Inman Flash Replacement). Naime, ovde se koristi Flash i njegovo dinamicko tekst polje kako bi putem njega dodali proizvoljan font. Reseje jeste elegantno samo sto zahteva Flash plugin. Inace, predstavlja pravu revoluciju i za neke manje prezentacije gde je izgled na prvom mestu, tehnika koja moze dosta doprineti kreiranju istog.

 

Za razliku od prethodnog resenja, ovo mozete primeniti i na blokove teksta.