NAZIV OBJEKTA ZNANJA *
CSS Pozicioniranje
PROLOG
Autor *
Klasifikacija *
Težina *
Ključne reči *
Ko sluša *
Trajanje *
Komentari autora
dr Katarina Kaplarski
osnovni nivo
SADRŽAJ
Apstrakt
Cilj *
Uvodne napomene
Naziv sekcije (1)
CSS pozicioniranje
Sadržaj sekcije (1)
CSS pozicioniranje vam omogućava da pozicionirate elemet u odnosu na browser ili web stranicu.
Takođe možete staviti elemente jedan iza drugog i odreiti šta će se desiti ako je sadržaj elementa
prevelik.
Elementi se mogu pozicionirati korišćenjem top, bottom, left i right propertija koji neće raditi ako niste
prethodno odredili POZICIJU.
CSS dozvoljava 4 tipa pozicioniranja:
•
•
•
•
Statičko
Relativno
Apsolutno
Fiksno
NORMALAN TOK HTMLa podrazumeva da se elementi pojavljuju na stranici onim redom kojim ste ih pisali.
BLOKOVI SA ELEMENTIMA – DIV
<div id=“main”>
<div id=“content”>
…….
</div>
</div>
STATIČKO pozicioniranje je default pozicija u HTMLu. Koja renderuje stranicu po normalnom redosledu stvari.
Na statičke elemete ne utiču propertiji top, left, right, bottom.
RELATIVNO pozicioniranje je slično statičkom, ali box može biti pomeren (offset) od svoje originalne pozicije sa
propertijima top, right, bottom, left.
CSS
#content {
position:relative
left: 45px
top: 10px
width: 400px
border: 1px solid red;}
HTML
<body>
<h1>Relativno pozicioniranje</h1>
<p>……………….text………….</p>
<div id=“content”>
<p>……………….text………….</p>
</div>
<p>……………….text…………..</p>
</body>
PRIMER:
http://www.w3schools.com/css/tryit.asp?filename=trycss_position_relative
FIKSNO POZICIONIRANJE
Slično je apsolutnom pozicioniranju- jer se element zakucava na mestu koje odredimo , bez obzira na
normalan tok HTMLa. Element se odnosi na prozor browsera, tako da će uvek stajati fiksiran, čak i
kada skrolujemo stranicu.
Primer:
http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed
APSOLUTNO POZICIONIRANJE
Apsolutno pozicioniranje izvlači box iz normalnog toka HTMLa i postavlja ga bilo gde na stranicu uz
pomoć propertija top, bottom, left, right. Element se pozicionira u odnosu na web stranicu (na parent
ili root element)
Apsolutno pozicioniranje nije sasvim svet za sebe, jer se uodnošava sa parent elementom kome
pripada , a koji nema static poziciju. Ako nema takvog elementa, onda je kontejner root element
<html>
PRIMER 1
http://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute
PRIMER 2 – layout sa 2 kolumne
HTML
<div id="navigation">
<ul>
<li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href="theOther.html">The Other</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra
banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>
CSS
#navigation {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
#content {
margin-left: 200px;
}
U ovom primeru smo postavili navigaciju na levo i širinu na 200px. Zato što je navigacija apsolutno
pozicionirana, nema ništa sa tokom ostalih elemenata na stranici, tako da na sadržaj možemo dodati
marginu od 200px koja odgovara širini navigacije.
Problem sa apsolutnim pozicioniranje može biti u određivanje gde se završavaju ti elementi, pa je
stavljanje footera ispod velike količine bolokva kontenta gotovo neizvodljivo.
POKRETNI ELEMENTI FLOATING ELEMENTS
CSS float gura element po horizontalnoj liniji u levu u desnu stranu, dozvoljavajući drugim
elementima da ga okružuju.
Float se često koristi sa slikama, ali je koristan i sa radom na layoutima.
float vrednosti
float: left
float: right
Na prethodnom primeru možete još desnu navigaciju "navigation2" dodati u CSS
#navigation {
float: left;
width: 200px;
}
#navigation2 {
float: right;
width: 200px;
}
#content {
margin: 0 200px;
}
A ako ne želite da se sledeći box uokviri oko plutajućih objekata možete dodati clear properti:
clear: left će očistiti plutajuće boxeve sa leve strane
clear: right će očistiti plutajuće boxeve sa desne strane
clear: both će očistiti leve i desne boxeve will
tako da možemo dodati u primer:
HTML:
<div id="footer">
<p>Footer! Hoorah!</p>
</div>
CSS:
#footer {
clear: both;
}
I onda će se footer pojaviti ispod svih kolumni nezavisno od njihove dužine.
PREKLAPANJE ELEMENATA (overlapping)
Kada su elementi pozicionirani izvan normalnog toka oni mogu da prelaze jeni preko drugih.
Properti z-index određuje redosled gomilanja elemenata (koji će element biti ispred ili iza drugih)
Element može imati pozitivan ili negativan z- index:
Element koji ima veći broj je ispred elementa sa manjim brojem indexa
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
PRIMER:
http://www.w3schools.com/css/tryit.asp?filename=trycss_zindex
PRIMER LAYOUTA U CSS
Layout u CSS:
Tri kolone sa fiksnim bočnim menijima:
#nav {position:absolute; left: 10px; top: 50px; width: 200px;}
#content {margin-left: 200px; margin-right: 200px; margin-top: 10 px;}
#sidebar {position:absolute; right: 10px; top: 10px; width: 200px;}
Tri kolone sa zaglavljem o podnožjem:
#masthead {width:768px}
#nav {float:left; width:200px;}
#content {float: left; width: 368px;}
#sidebar {float: left; width: 200px;}
#footer {width: 768px; clear: both;}
Ukoliko upotrebimo procente dobijamo promenjivi raspored ovih elemenata.
Ugnježdeno tečenje:
Kod ovog rasporeda pravouganik teče u oblasti sadržaja. Ovaj pravouganik se
može koristiti za navigaciju., slike ili nešto drugo.
#content {margin: 10 px; border: 1px solid orange; }
#content #nav {float: right; width: 150px; border: 1px solid orange; margin-left: 5px;}
Naziv sekcije (2, ...n)
Sadržaj sekcije (2, ...n)
LINKOVI SA SLIČNIM SADRŽAJEM
Opis
URL
http://www.w3schools.com/css/css_float.asp
REČNIK POJMOVA I SKRAĆENICA
Termin
Opis
.
PODOBJEKTI ZNANJA (slučajevi korišćenja, procedure korak po korak, reference, itd.)
Naslov podobjekta znanja
Sadržaj podobjekta znanja
OSTALI PREDLOŽENI SADRŽAJ OD STRANE AUTORA
Naslov
Sadržaj
Download

NAZIV OBJEKTA ZNANJA * CSS Pozicioniranje PROLOG Autor * dr