Float

Float – DIV tutorijal
Pomoću DIV tagova u HTML I float vrednosti u CSS stilovima možete pozicionirati elemente na vašoj internet
stranici onako kako vi želite I time dobijete željeni izgled jednog dela ili cele stranice. Da bi smo to uspeli da
uradimo moramo se upoznati sa osnovnim elementima
Šta je to DIV tag

DIV tag je je HTML element koji se koristi za označcavanje odredjenog dela ili regiona na stranici. Koristi se
obićno kako bi se uokviru njega grupisali drugi HTML elementi (tagovi) nad kojima se želi primeniti odredjeni stil.
Npr:
ako na HTML stranici napisemo nesto oblika:
<div style=“font-size:14px“> .........</div>
onda će svi elementi koje smo postavili uokviru tog diva imati velicinu slova 14px, bez obzira kolika su slova na
celoj stranici ili na drugom delu stranice.
Div ,kao što se vidi iz primera mora biti otvoren sa <div> i zatvoren sa </div>. Obično se o DIV tagu govori kao o
odredjenom sloju na stranici koji može imati svoje elemente u okviru njega. Svaki DIV (sloj) je tada odgovoran za
svoje elemente.
Osnovni atributi DIV elementa:
align left, right, center,justify Poravnanje elemenata unutar DIV-a

class ime klase stavlja se ime CSS klase koja se primenjuje
id identifikator Jedinstveno ime DIV elementa
style definicija stila Stil elementa
Šta je to CSS stil

CSS je jedna vrsta skript jezika kojom se dodaju odredjene osobine HTML elementima. Pod tim se na primer
podrazumevaju: boja i veličina slova, boja pozadine, boja linije... Slične stilove srećemo u WORD dokumentima
Implementaciju stila na neki HTML element smo imali i u rethodnom primeru kad smo DIV sloju dodelili stil –
velicina slova 14px. Da bismo bolje objasnili stil pokazaćemo to na primeru:
Recimo da hocemo tri DIV elementa gde jedan ima crvenu boju, pozadine drugi ima plavu i treci ima zelenu boju
pozadine. Na ovom primeru ćemo pokazati i sva tri načina pozivanja stila:
1. Pozivanje stila unutar samog elementa
Da bismo na ovaj način pozvali stil za element dovoljno je da taj stil upisemo u okviru taga elementa
pozivom atributa STYLE :
<div style=“background-color:red“>Ovo je stil sa crvenom pozadinom </div>
Kad imamo ovo dobijamo sledeci izgled:

Ovo je stil sa crvenom pozadinom
2. Pozivanje stila sa CSS klasom koja je na stranici gde se element nalazi
<div class=“pozadina_plava“>Ovo je stil sa plavom pozadinom </div>
Ovde smo pozvali CSS klasu .pozadina_plava koju pre toga moramo da definišemo na HTML
stranici. Stil se obično definiše iznad BODY taga na HTML stranici i to na sledeći način:
<style type=”txt/css”>
. pozadina_plava
{
background-color:blue;
}
</style>
Na ovaj način smo napravili klasu kolu posle poyivamo zya odredjeni element. Mogli smo takodje da
stavimo da atribut ID DIV elementa bude npr id=”pozadina_plava” pa da za njega definišemo stil, tj
klasu ali u tom slučaju klasa če se u CSS stilu definisati sa # ispred, A ne sa . kao što je bilo u
prethodnom primeru, tj u obliku:
<style type=”txt/css”>
#pozadina_plava
{
background-color:blue;
}
</style>
Div sada izgleda ovako
<div id=“pozadina_plava“>Ovo je stil sa plavom pozadinom </div>
U tom slučaju se u DIV tagu ne navodi atribut CLASS već atribut ID. Velika razlika tu postoji jer ako
se formira stil po CLASS-i onda svaki element može da pozove tu klasu I ta se taj stil primeni na
njega , ali ako se poziva po ID onda odredjena # CSS klasa važi samo za element koji ima taj ID.(dva
elementa na stranici ne mogu imati iste ID atribute - to je jedinstveni identifikator elementa)
U oba ova slučaja dobijamo :

Ovo je stil sa plavom pozadinom
3. Pozivanje stila sa CSS klasom koja je u posebnom dokumentu
<div class=“pozadina_zelena“>Ovo je stil sa zelenom pozadinom </div>
U ovom slučaju priča je ista kao u slučaju 2, sa razlikom što se prvo napravi poseban dokumenat
recimo Stilovi.css a zatim se navodi referenca tj putanja do tog dokumenta na HTML stranici. To se
radi tako što se uokviru <head></head> taga HTML stranice stavi sledeci tag
<link href=”Stilovi.css” rel=”Stlesheet” />
Dalje se stil poyiva na isti na;in. Ovde dobijamo:

Ovo je stil sa zelenom pozadinom
Šta je to FLOAT
FLOAT je css atribut koji označava da li će element na koji je primenjen stil da bude postavljen na odredjeni
način. Float u principu znaci da nešto nije fiksirano nego može slobodno da se kreće ili postavlja u odredjenom
prostoru.
Osnovne vrednosti:
left Element je postavljen na levoj strani, ide na levo

right Element je postavljen na levoj strani, ide na levo
none Nema float i element ce se postaviti tu gde je smesten na stranici
O floatu ćemo više pričati kad krenemo sa konkretnim primerom, u sledećem delu ovog tutorijala
PRIMER: Kompletna HTML stranica sa Hederom, Futerom i tri kolone
Cilj nam je da dobijemo ovako nesto:
Na slici vidimo da imamo:

1. Heder – vrh strane sa naslovom
2. Levi deo – prva kolona koja ima float stil vrednost na levo
3. Glavni deo – u sredini druga kolona
4. Desni deo – treca kolona koja ima float stil vrednost na desno
5. Futer – dno stranice
Na sledecoj slici je prikazana ista ova stranica zli dekomponovana na HTML DIV elemente od kojih ce se
sastojati:
Naš SOURCE kod HTML stranice izgledaće sada ovako
napomena -- da ne bi navodili kompletan html dokument ovde ćemo ispisivati samo kod koji ide uokviru
<body></body> taga, tj ono sto se prikazuje korisniku.
<div id="okvir">
<div id="top_heder"></div>
<div id="levi_deo"></div>
<div id="desni_deo"></div>
<div id="glavni_deo"></div>
<div id="footer"></div>
</div>
Ovo je samo okvir našeg dokumenta. Da bi dobili ono što vidimo na slikama gore tj sav onaj tekst i naslove treba
da dodamo jos neke tagove, tj za tekst i naslov. Kompletan kod našeg HTML dokumenta sada izgleda ovako:
<div id="okvir">
<div id="heder">
<h1>Moj prvi sajt sa Div - Float</h1>
</div>
<div id="levi_deo">
<h3>Levi deo</h3>
<p>
Tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
</p>
</div>
<div id="desni_deo">
<h3>Desni deo</h3>
<p>
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
</p>
</div>
<div id="glavni_deo">
<h3>Glavni deo</h3>
<p>
<br />
</p>
</div>
<div id="futer">Ovo je futer</div>
</div>
Kada ovu našu ovakavu HTML stranicu pogledamo u nekom od pretraživača ona izgleda ovako nekako :
>> Prva html stranica
Sada ćemo polako uresjivati stranicu primenom CSS stilova.
OKVIR
Prvo ćemo srediti DIV tag OKVIR koji obuhvata sve ostale elemente. Recimo da želimo da nam širina naše
stanice bude 900px i da bude centrirana u pretraživaču. To ćemo uraditi tako što ćemo našem Divu OKVIR
dodeliti stil po ID:
<style type="text/css">
#okvir
{
margin:5px auto;
width:900px;
}
</style>
Mi ćemo koristiti drugi način postavljanja stila , tj uokviru stranice pa se zato svi stilovi navode u okviru
<style type="text/css"></style> taga iznad <body > taga.
Šta smo ovde uradili?

Prvo stavili smo da div #okvir ima sirinu 900px i da njegove margine imaju sledecu vrednost redom : top=5px,
right=auto, bottom=auto, left=auto
 NAPOMENA – atribut margin je CSS stil ciji je osnovni oblik:
margin:[top][right][bottom][left] i moze se pisati ovako ili se moze dekomponovati na:
margin-top
margin-right
margin-bottom
margin-left
i tada se svakom delu dodeljuje željena vrednost.
 NAPOMENA – da ne bi pričali zasebno o svakom od CSS atributa tokom ovog tutorijala, uz njega
dolazi i krace uputsvo o CSS stilovima.
HEDER
DIV heder je na samom vrhu stranice i tu želimo da stavimo ime sajta i neki naslov ili šta god želimo kao vrh.
Recimo da sad želimo da nam ovaj div bude odredjene širine i visine i da su predefinisana slova kao i boja
pozadine. To ćemo uraditi na sledeći način:
#heder
{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#DFEFFF;
height:100px;
width:100%;
padding:10px;
background-color:#004080;
}

Float

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Float

Uploaded by

Copyright:

Available Formats

Float – DIV tutorijal

Šta je to DIV tag

<div style=“font-size:14px“> .........</div>

align left, right, center,justify Poravnanje elemenata unutar DIV-a

Šta je to CSS stil

1. Pozivanje stila unutar samog elementa

<div style=“background-color:red“>Ovo je stil sa crvenom pozadinom </div>

Kad imamo ovo dobijamo sledeci izgled:

2. Pozivanje stila sa CSS klasom koja je na stranici gde se element nalazi

<div class=“pozadina_plava“>Ovo je stil sa plavom pozadinom </div>

Div sada izgleda ovako

<div id=“pozadina_plava“>Ovo je stil sa plavom pozadinom </div>

U oba ova slučaja dobijamo :

3. Pozivanje stila sa CSS klasom koja je u posebnom dokumentu

<div class=“pozadina_zelena“>Ovo je stil sa zelenom pozadinom </div>

<link href=”Stilovi.css” rel=”Stlesheet” />

Dalje se stil poyiva na isti na;in. Ovde dobijamo:

left Element je postavljen na levoj strani, ide na levo

Cilj nam je da dobijemo ovako nesto:

Na slici vidimo da imamo:

<div id="futer">Ovo je futer</div>

Šta smo ovde uradili?

i tada se svakom delu dodeljuje željena vrednost.

You might also like