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 class id style left, right, center,justify ime klase identifikator definicija stila Poravnanje elemenata unutar DIV-a stavlja se ime CSS klase koja se primenjuje Jedinstveno ime DIV elementa 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>

A ne sa . sa razlikom što se prvo napravi poseban dokumenat recimo Stilovi. tj klasu ali u tom slučaju klasa če se u CSS stilu definisati sa # ispred. kao što je bilo u prethodnom primeru.css” rel=”Stlesheet” /> Dalje se stil poyiva na isti na.Na ovaj način smo napravili klasu kolu posle poyivamo zya odredjeni element. u sledećem delu ovog tutorijala . 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. tj u obliku: <style type=”txt/css”> #pozadina_plava { background-color:blue. To se radi tako što se uokviru <head></head> taga HTML stranice stavi sledeci tag <link href=”Stilovi. ide na levo Element je postavljen na levoj strani. Mogli smo takodje da stavimo da atribut ID DIV elementa bude npr id=”pozadina_plava” pa da za njega definišemo stil. 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 .(dva elementa na stranici ne mogu imati iste ID atribute .in. ide na levo 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. Osnovne vrednosti: left right none Element je postavljen na levoj strani. Float u principu znaci da nešto nije fiksirano nego može slobodno da se kreće ili postavlja u odredjenom prostoru.css a zatim se navodi referenca tj putanja do tog dokumenta na HTML stranici.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. } </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. ali ako se poziva po ID onda odredjena # CSS klasa važi samo za element koji ima taj ID.

Heder – vrh strane sa naslovom 2. Glavni deo – u sredini druga kolona 4. Futerom i tri kolone Cilj nam je da dobijemo ovako nesto: Na slici vidimo da imamo: 1.PRIMER: Kompletna HTML stranica sa Hederom. Futer – dno stranice Na sledecoj slici je prikazana ista ova stranica zli dekomponovana na HTML DIV elemente od kojih ce se sastojati: . Desni deo – treca kolona koja ima float stil vrednost na desno 5. Levi deo – prva kolona koja ima float stil vrednost na levo 3.

Kompletan kod našeg HTML dokumenta sada izgleda ovako: <div id="okvir"> <div id="heder"> <h1>Moj prvi sajt sa Div . Da bi dobili ono što vidimo na slikama gore tj sav onaj tekst i naslove treba da dodamo jos neke tagove.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 </p> </div> 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 tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst <div id="desni_deo"> <h3>Desni 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 </p> </div> <div id="glavni_deo"> <h3>Glavni 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 <br /> Tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst </p> </div> 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 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 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 tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst <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. <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. tj za tekst i naslov.da ne bi navodili kompletan html dokument ovde ćemo ispisivati samo kod koji ide uokviru <body></body> taga. tj ono sto se prikazuje korisniku.Naš SOURCE kod HTML stranice izgledaće sada ovako napomena -. .

To ćemo uraditi tako što ćemo našem Divu OKVIR dodeliti stil po ID: <style type="text/css"> #okvir { margin:5px auto. right=auto. Recimo da želimo da nam širina naše stanice bude 900px i da bude centrirana u pretraživaču. tj uokviru stranice pa se zato svi stilovi navode u okviru <style type="text/css"></style> taga iznad <body > taga. sans-serif. background-color:#004080. padding:10px. HEDER DIV heder je na samom vrhu stranice i tu želimo da stavimo ime sajta i neki naslov ili šta god želimo kao vrh. } . uz njega dolazi i krace uputsvo o CSS stilovima. width:900px. height:100px. Helvetica.OKVIR Prvo ćemo srediti DIV tag OKVIR koji obuhvata sve ostale elemente. Arial. width:100%. Šta smo ovde uradili? Prvo stavili smo da div #okvir ima sirinu 900px i da njegove margine imaju sledecu vrednost redom : top=5px. 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. } </style> Mi ćemo koristiti drugi način postavljanja stila . color:#DFEFFF. To ćemo uraditi na sledeći način: #heder { font-family:Verdana. • NAPOMENA – da ne bi pričali zasebno o svakom od CSS atributa tokom ovog tutorijala. Recimo da sad želimo da nam ovaj div bude odredjene širine i visine i da su predefinisana slova kao i boja pozadine.

Sign up to vote on this title
UsefulNot useful