Dreamweaver CSS

8/19/2019 Dreamweaver CSS

1/22

8.1 CSS I DREAMVVEAVER

8.1.1 UVOD

CSS (Cascading Style Sheets) tehnologija je za dizajniranje HTML dokumenata.Potreba za CSS om pojavila se zbog nemogućnosti odvajanja strukture sadržajaod prezentacije istog, što nam CSS omogućuje.

CSS om određujemo pravilo koje definira na koji način će neki element stranice prikazan. CSS pruža mnogo više fleksibilnosti i kontrole nad sadržajem kojiprikazujemo na web stranici nego HTML. Primjenom CSS stila na neki diodokumenta možemo mijenjati cjelokupni dizajn istog. Prednost korištenja CSSstilova jest u tome što isti CSS stil može biti primijenjen na više različitih elemenistog dokumenta, te tako, promijenite li stil, do promjene će doći na svim mjestimgdje je CSS primijenjen.

Definiranje CSS pravila i njihova primjena na HTML elemente u Dreamvveaveru

moguća je na nekoliko različitih načina; Upotrebom CSS Stvles panela, Propertiepanela, Code Navigatora ili pisanjem koda.

8.1.2 CSS STYLES PANEL

CSS Stvles panel je središnje mjesto za uređivanje CSS a u siteu. Daje nammogućnost uređivanja postojećih i kreiranja novih CSS pravila.Također omogućapregled svih CSS pravila u siteu ili stavljanje fokusa na svojstva određenog pravCSS Stvles panel moguće je otvoriti iz glavnog izbornika:

Panel nam omogućava pregled svih postojećih pravila primijenjenih na aktivnidokument (Ali) ili mogućnost pregleda pravila na trenutno označenom elementu(Current).U donjem dijelu panela omogućen je pregled, ali i uređivanje odabranog pravila.


2/22

8.1.2.1 Kreiranje novog CSS pravilaKreiranje novog CSS pravila u CSS Stvles panelu omogućeno je klikom na opcijuNew CSS Rule na dnu panela.

Potom se otvara dijaloški okvir New CSS Rule.[ f e w CSS Rule [

U okviru je potrebno odabrati tip selektora i odabrati mu ime.

Uz uobičajena i poznata nam tri tipa selektora (Class, ID i Tag) nudi se iCompound, složeni selektor koji se temelji na našoj selekciji elementa nadokumentu. Selektoru će biti dodijeljeno ime ovisno o strukturi dokumenta i pozicijiodabranog elementa. Moguće je odabrati više (More Specific) ili manje precizno(Less Specific) imenovanje selektora, o čemu će poslije ovisiti i djelovanje samogpravila.


3/22

U istom dijaloškom okviru potrebno je odabrati i mjesto definiranja novog CSSpravila.

This Document Only u zaglavlju aktivnog dokumentaNew Style Sheet File u novom CSS dokumentuili u postojećem CSS dokumentu čije ime će se u tom slučaju pojavitina dnu izbornika

Po zatvaranju dijaloškog okvira New CSS Rule otvorit će se novi dijaloški okvirCSS Rule Definition u kojem se definiraju svojstva i primjenjuju im se određene vrijednosti.

8.1.2.2 CSS Rule Definition

S lijeve strane dijaloškog okvira CSS Rule Definition nalaze se kategorije u koje

su smještena određena CSS svojstva. Odabirom određene kategorije s desnestrane okvira vidjet će se pripadajuća svojstva kojima je moguće dodijeliti određe vrijednosti.Ponuđene su sljedeće kategorije:

Type svojstva teksta (tipografija)Background svojstva pozadina (pozadinske boje i slike)Block svojstva vezana uz razmake i poravnanjaBlock svojstva za uređivanje tzv. Box modela (širina, visinpadding, margin itd.)


4/22

Border svojstva obruba elemenataList svojstva za uređivanje listaPositioning svojstva vezana uz pozicioniranje elemenataExtensions svojstva za uređivanje prijeloma stranice, izgledakursora i filteri

U nastavku je popis svojstava u određenoj kategoriji:

TypeFont Familv Obitelji fontova (font liste). Određuje grupu fontovapomoću kojih se prikazuje zadani tekst. Znamo da se tekst prikazujezadanim fontom samo ako je on instaliran na računalu korisnika kojistranice pregledava. Zato se u principu zadaje grupa fontova, tekst seprikazuje prvim fontom iz grupe, a ako on nije instaliran, nastupasljedeći iz zadane grupe itd.Font Siže Veličina fonta. Veličina se može zadati na nekoliko različitih načina u različitim jedinicama.Preporučuje se izbjegavanje zadavanja fiksne (apsolutne) veličinefonta (u pointima [pt], milimetrima [mm], centimetrima [cm] itd).Poželjno je korištenje relativnih veličina, jer tada korisnici moguprilagoditi veličinu slova na stranici svojim potrebama.Naročito često se koristi zadavanje veličina u ems (1emsnajjednostavnije je opisati kao veličinu slova M u određenom fontu,

relativna je u odnosu na sam font) ili postocima (100 % značistandardnu, inicijalnu veličinu, npr 200 % su dvostruko veća slova...)Korištenje piksela [px] (mada je relativna jedinica) nije preporučljivozbog njihove ovisnosti o ekranskoj rezoluciji na klijentskom računaluStarije verzije browsera imaju problema s prilagodbom veličine tekstačija je veličina zadana u pikselima.Font Style Stil fonta tj. primjena kurziva.Moguće vrijednosti Italic iOblique razlikuju se u teoriji tipografije ali većina browsera će ih

prikazati na identičan način.Line Height Udaljenost između linija teksta (prored).Font VVeight Istaknuti tekst.Moguće vrijednosti: normal, bold, bolder, lighter, 100, 200, 300, 400,500, 600, 700, 800, 900.

Font Variant Jedina vrijednost small caps prikaz teksta velikimtiskanim slovima, s time da su velika slova prikazana veća od malih.

Text Transform Transformacija teksta, kontrola velikih i malih slovCapitalize prva slova riječi prikazana kao velikaUppercase sva slova prikazana velika

Lowercase sva slova prikazana kao malaColor Boja teksta.Uglavnom se primjenjuje heksadecimalni zapisboje.

Text Decoration Dekoracija tekstaUnderline podcrtan tekstOverline nadcrtan tekstL/ne through precrtan tekstBlink trepereći tekstNone tekst bez ikakve dekoracije

BackgroundBackground Color Pozadinska bojaBackground Image Pozadinska slikaBackground Repaeat Način ponavljanja pozadinske slike


5/22

No Repeat pozadinska slika se ne ponavljaRepeat x pozadinska slika se ponavlja samo vodoravnoRepeat y pozadinska slika se ponavlja samo vodoravno

• Background Attachment Ponašanje pozadinske slike u odnosu nasadržaj, specificira prati li pozadinska slika pomak stranice pomoćuklizne trake (fixed) ili ne (scroll)Background Position (x) Pozicija učitavanja pozadinske slike naosi x

» Background Position (y) Pozicija učitavanja pozadinske slike naosi y

Block Word Spacing Razmak između riječiLetter Spacing Razmak između riječiText Align Vodoravna poravnanja Vertical Align Vertikalna poravnanja kojima određujemo kako je

element na kojeg je primijenjeno pravilo vertikalno poravnat u odnosna ostale elemente u redu ili u odnosu na stanje zadanonasljeđivanjem

baseline inicijalna vrijednost, element se poravnava u istu razinispisa kao i roditeljski elementmiddle vertikalnu sredinu elementa poravnava s vertikalnomsredinom roditeljskog elementa (teksta)sub element postavlja u nižu razinu ispisa (indeks)super element postavlja u višu razinu ispisa (eksponent)text top gornji rub elementa poravnava s gornjim rubom tekstaunutar roditeljskog elementatext bottom donji rub elementa poravnava s donjim rubom tekstunutar roditeljskog elementatop gornji rub elementa poravnava s gornjim rubom roditeljskogelementabottom donji rub elementa poravnava s donjim rubom roditeljskoelementa

Text Indent Uvlaka teksta, uvlačenje prvog reda teksta u odlomku nekom dijelu teksta. VVhite Space Prostor između elemenata na web stranici, prostorizmeđu slova

Pre preformatirani tekst (preformatted) Nowrap isključenje automatskog prelamanja linije teksta

Displav Način prikaza elementa

Box VVidth Širina elementaHeight Visina elementaFloat Definira poravnanje tj. smještaj elementa (lijevo ili desnounutar roditeljskog elementa) i pozicioniranje elemenata koji slijede uodnosu na istiClear Sprječava pozicioniranje block elementa u horizontalnuravninu sa susjednim elementima koji imaju određeni Float.Padding Udaljenost sadržaja od ruba elementa.

Margin Udaljenost elementa od susjednih elemenataBorderStyle Vrsta linije obruba

• VVidth Debljina linije obrubaColor Boja linije obruba.

ListList Style Type Tip bulletaList style Image Primjena slike kao bulletaList Style Position Pozicija bulleta u odnosu na listu


6/22

PositioningPosition Način pozicioniranja elementa.Postavlja element ustatičku, relativnu, apsolutnu ili stalnu, fiksnu poziciju

VVidth Širina elementaHeight Visina elementa

Visibilitv Vidljivost AP elementaZ Indeks Pozicija AP elementa na osi z (dubina)Overflovv Prikaz sadržaja AP elementa koji svojim dimenzijamaprelazi dimenzije samog elementaPlacement Pozicioniranje AP elementa (koordinate)Clip Definiranje vidljivog dijela sadržaja AP elementa

ExtensionsPagebreak Prijelom stranice prije ili poslije elementaCursor Promjena izgleda pokazivača miša dok je iznad elementaFilter Filteri

8.1.2.3 Povezivanje sa CSS doku men tom (primjena vanjskog CSSa)

Prednost kreiranja CSS pravila uzasebnom CSS dokumentu (vanjski CSS) je ta što ta ista pravila možemo primijenitina neograničen broj dokumenata, npr. na

sve dokumente u siteu. Tako postižemo jedinstven izgled dokumenta u siteu i vrlo jednostavno poslije možemo raditiodređene izmjene.

HTML koji želimo urediti s već postojećimCSS pravilima treba povezati sa CSSdokumentom u kojem se nalaze ta pravila.

U aktivnom dokumentu na dnu CSSStvles panela potrebno je odabrati opciju

Attach Style Sheet.

U dijaloškom okviru Attach External Style Sheet koji se potom otvara potrebno jenavesti stazu do željenog CSS dokumenta (Browse).

Potom u kategoriji Add As odabrati način povezivanja sa CSSdokumentom.Preporučuje se inicijalno odabrana vrijednost Link.


7/22

U kategoriji Media moguće je odabrati tip medija. Medijski tipovi omogućujudefiniranje izgleda dokumenta u različitim medijima (npr. dokument se možerazličito prikazati na zaslonu, papiru, projektoru i si.)Neka svojstva, npr. veličina slova (font size) mogu se koristiti u različitim tipovimedija. Budući da dokument obično treba veću veličinu fonta za prikaz na zaslonnego za ispis na papiru, "font size" svojstvo može se upotrebljavati s različitim vrijednostima za zaslon i za papir. Slično se sans serif fontovi lakše čitaju na

zaslonu, dok se šerif fontovi lakše čitaju na papiru.

8.1.3 CSS PROPERTIES PANEL

Odabirom kategorije CSS u Properties panelu dobivamo mogućnost primjene jednostavnih i brzih promjena postojećih CSS pravila.Da bismo se kvalitetno mogli koristiti CSS Properties panelom, potrebno je dobropoznavati logiku i način primjene CSS pravila, razumjeti nasljeđivanje stilova i

primjenu svojstava u hijerarhiji elemenata. U suprotnom, vrlo je lako postićineželjene efekte.

Pozicioniranjem kursora miša na određeno mjesto na dokumentu, CSS Propertiespanel pokazat će nam svojstva CSS pravila primijenjenih na taj element. Ako toniste učinili prije, u panelu treba odabrati kategoriju CSS.

Targeted Rule nam pokazuje pravilo primijenjeno na odabrani element. S obziromna veličinu tekstualnog okvira nećemo uvijek dobro vidjeti o kojem pravilu se radPrelaskom miša preko tekstualnog okvira otvoriti će se tooltip u kojem ćemo pravilo

vidjeti u potpunosti i na taj način dobiti točnu informaciju.

Otvaranjem padajućeg izbornika TargetedRule, vidjet ćemo hijerarhiju primjenjenihpravila (Cascade).Kategorija New Rule daje nam mogućnostkreiranja novog pravila, a Apply Classmogućnost primjene postojećih klasa.Ispod padajućeg izbornika Targeted Rulenalazi se opcija Edit Rule koja nam dajemogućnost uređivanja odabranog pravila.Klikom na tu opciju otvorit će se dijaloški okvirCSS Rule Definition u kojem možemo ureditiodabrano CSS pravilo.S desne strane panela nalaze se svojstva zauređivanje teksta u odabranom pravilu (font

family, font size, color, text align, bold (strong),italic (emphasis))


8/22

Na dnu Properties panela nalazi se kategorija Page Properties koja omogućavauređivanje svojstava dokumenta.

8.1.3.1 Page Propert ies

Klikom na kategoriju Page Properties u Properties panelu otvara se dijaloški okviristog imena.

S njegove lijeve strane nalaze se kategorije:

Apperance (CSS) uređivanje svojstava stranice CSSom Apperance (HTML) uređivanje svojstava stranice HTMLomLinks (CSS) uređivanje linkova na stranici CSSomHeadings (CSS) uređivanje naslova CSSomTitle/Encoding uređivanje osnovnih svojstava dokumenta (title,encoding, DTD)Tracing Image primjena predloška za dizajn


9/22

8.1.4 CODE NAVIGATOR

Za lakše i jednostavnije uređivanje CSS pravila možemo se poslužiti i CodeNavigatorom.U složenim siteovima zbog nasljednosti CSS pravila i strukture dokumenataponekad nije jednostavno procijeniti koje pravilo i na koji način djeluje na određeelement.Korištenjem Code Navigatora, pronalaženje, identificiranje i uređivanje CSSpravila može biti vrlo jednostavno.

Nakon što pozicioniramo kursor na određeno mjesto u dokumentu, nakon kraćeg vremena na tom mjestu pojavit će se ikonica koja simbolizira Code Navigator.

Klikom na istu ikonicu otvoriti će se prozor sa CSS pravilima koja djeluju naelement u kojem se kursor nalazi.Pravila su prikazana slijedom djelovanja tj. pohijerarhiji djelovanja na element.

Kada kursor pozicioniramo iznad određenog pravila pojavit će se tooltip sasvojstvima i vrijednostima koja sačinjavaju to pravilo.Na taj način dobivamoinformaciju kako to pravilo djeluje na element.


10/22

Main Content

Ako želimo urediti pravilo, dovoljno je kliknuti na isto i Dreamvveaver će nam otvoritiCSS kod i pozicionirati kursor na pravo mjesto.


11/22


12/22

9.1 STRUKTURA DOKUMENTA

9.1.1 UVOD

O važnosti strukture dokumenta već smo govorili u ovome priručniku. Strukturadokumenta definira što određeni dio sadržaja predstavlja u dokumentu i kako će gbrowser prikazati.Kako bismo mogli napraviti kvalitetnu strukturu, potrebno je razumjeti međusobneodnose HTML elemenata u strukturi XHTML dokumenta odnosno njegovu DOMmodelu.

9.1.2 HTML DOMHTML Document Object Model (HTML DOM) određuje standardan način zapristupanje i upravljanje HTML dokumentima odnosno definira objekte i svojstvaHTML elemenata kao i metode pristupa istima. DOM predstavlja HTML dokumeu obliku obrnutog stabla {upside down tree) sa svim elementima, atributima isadržajem. Jednostavan HTML dokument može se vizualizirati na ovaj način:

Korijenski element (root element) ht mlSvi ostali elementi su djeca ovog elementa

Element predak ili roditelj (ancestor element)' head je roditelj elementima t i t l e i meta• body je roditelj elementima hl i p

Element potomak ili dijete {descendant element)• t i t l e i mete su djeca elementa head

• hl i p su djeca elementa bodyelementi a i strong su djeca elementa p, pradjeca elementa body iprapradjeca elementa html, ali nisu djeca elementa hlelementi a i strong su susjedni elementi, potomci istog roditelja (adjacent siblings)


13/22

9.1.3 CSS BOX MODEL

Za izradu kvalitetne strukture osim razumijevanja HTML DOM modela bitno jerazumjeti i i koncept tzv. CSS Box Model koji predstavlja same temeljerazumijevanja CSS a odnosno razumijevanja koncepta pozicioniranja elemenatana dokumentu, njihovih dimenzija i međusobnih odnosa.Brovvseri pomoću svojstava box modela određuju koliko prostora u strukturidokumenta zauzima pojedini element.

Svaki element na web stranici je pravokutnog oblika koji se sastoji od: sadržaja,pozadine (background), paddinga, ruba (border) i margina (margin).

Sljedeća slika prikazuje elemente box modela:

• Sadržaj elementa (content)Tekst ili neki html elementPozadina {background)Pozadinska boja ili slika.Nalazi se "ispod" sadržaja i paddinga,dodiruje rub elementa. Na slici pozadina predstavlja tamnosivopodručje (solidno i s teksturom).Svaki element može imati pozadinu, koja tehnički nije dio box modela

jer ne utječe na dimenzije objekta.• Padding udaljenost sadržaja elementa od ruba elementa.(sivo

područje sa teksturom).» Rub elementa (border)• Margine (margin) udaljenost elementa od susjednih elemenata.

Osim navedenih svojstava svaki element ima i širinu (width) i visinu (visinu).Važno je znati da definirana širina i visina predstavljaju samo dimenzije sadržaja.Ukonačne dimenzije uključene su i vrijednosti paddinga i bordera (sa svih strana), a valja imati naumu i margine kojima se element distancira od okoline.

Kao što u HTML u postoje tzv. block level elementi (p, h1 h6, table, div) i ielementi (a, em, img, špan, strong), tako i CSS ima dva glavna tipa box ova: blobox i inline box. Block boxove generiraju HTML elementi kao što su npr. p, ditable, dok inline boxove generiraju HTML elementi kao što su npr. img, em ili špCSS box je uvijek pravokutnog oblika.Svi HTML elementi mogu biti prikazani na jedan od sljedećih načina:

Block (display:block)block level element zauzima cijelu širinu slobodnog (raspoloživog)prostora elementa unutar kojeg se nalazi, i počinje uvijek u novomretku u normalnom toku HTML a

Inline (display:inline)


14/22

inline level element zauzima samo onoliko prostora koliko mu jepotrebno za prikazivanje u elementu u unutar kojeg se nalazi, i neprekida normalan tok HTML a, već se nalazi u liniji npr. sa ostalimtekstom.

1.1.4 ELEMENT DIV'a izradu osnovne strukture dokumenta najčešće se koristimo elementom d i v .•Jjime definiramo osnovna područja dokumenta (zaglavlje, stupci, izbornik itd.), ainutar tih područja smještamo sadržaj strukturiran na različite načine (naslovi,idlomci, liste itd.)

Element d i v (eng. division) je blok level element koji se koristi za definiranjesekcija ili područja u (X)HTML dokumentu. Element d i v može sadržavati sveiruge HTML elemente, uključujući i druge block level elemente (za razliku od svih)stalih block level elemenata).


15/22

Ako element d i v ubacujemo na prethodno odabrano mjesto pojavit će se dijalošokvir sljedećeg izgleda:

U kategoriji Insert biramo mjesto ubacivanja elementa.Inicijalno ponuđena vrijednost je At Insertion Point što div ubacuje na odabrano mjesto(pozicijakursora).Kategorijama Class i ID elementu možemo pridružiti postojeću CSS klasu ili CSSpravilo s id selektorom.New CSS Rule daje nam mogućnost kreiranja novog CSS pravila za element kojiubacujemo.

U slučaju da smo prije ubacivanja elementa označili dio sadržaja, u kategorijiInsert bit će ponuđena vrijednost Wrap around selection. Time će se prethodnooznačeni sadržaj naći unutar div elementa.


16/22

9.2 IZRADA CSS LAYOUTA

9.2.1 KREIRANJE OSNOVNE STRUKTURE DOKUMENTAU ovoj lekciji opisat ćemo kako izraditi osnovnu strukturu dokumenta i kako jeurediti pomoću CSS a.Struktura koju ćemo napraviti vrlo je jednostavna i vrlo česta. Sastojat će se odnekoliko osnovnih elemenata:zaglavlje {header), stupac s lijeve strane (sidebat), sadržaj (content) i podnožje (footer). Svi elementi nalazit će se u osnovnom strukturnom elementu (vvrapper).

Počet ćemo s kreiranjem i otvaranjem novog dokumenta. Novokreiranomdokumentu napravit ćemo pravilo za zasada jedini element sadržaja body.Pravilo za body izgledat će ovako:

Tijelo dokumenta imat će sivu pozadinu, a sadržaj u njemu bit će poravnat posredini.Takvo poravnanje pomoći će nam kod pozicioniranja sadržaja u starijim

verzijama IE.

Potom ćemo u dokument ubaciti prvi d i v element.Ubacit ćemo ga na mjesto gdjese nalazi kursor (At Insertion Point), dodijeliti mu id wrapper i odabrati kreiranjenovog CSS pravila New CSS Rule.


17/22

VVrapperće biti osnovni strukturni element i svi ostali elementi nalazit će se unjemu.Dodijelit ćemo mu širinu u kojoj će se optimalno vidjeti sav sadržajdokumenta, pozadinsku boju, margine, padding i vodoravno poravnanje sadržaja.

Vodoravno poravnanje omogućit će da se sav sadržaj ovog elementa poravna polijevoj strani, a automatske margine s lijeve i desne strane jednako će gadistancirati od tijela dokumenta tj. smjestiti na sredinu.Gornja i donja marginapostavljene su na Opx.

Unutar ubačenog elementa ispisat će se privremeni sadržaj "Content fond"vvrapper" Goes Here".Obrisat ćemo ga i ubaciti novi d i v element.Pri ubacivanju u dijaloškom okviru u kategoriji Insert odabrat ćemo vrijednost Afterstart of tag . Odabrana vrijednost omogućit ćeubacivanje elementa unutar elementa wrapper.Novom elementu dodijelit ćemo ime header'i odabrati kreiranje novog CSS pravila.


18/22

Dodijelit ćemo mu pozadinsku boju, margine, padding i visinu.

Nakon headera slijedi sidebarUbacit ćemo ga nakon headera, dakle u dijaloškom okviru Insert Div Tag odabratćemo vrijednost Aftertag o < d i v id = " h e a d e r " > .Kreirat ćemo pravilo i zanjega:

Na ovaj način dobili smo vrlo jednostavnu i čistu HTML strukturu.

Potom slijedi content koji ćemo ubaciti nakon elementa sidebar.U dijaloškom okviru Insert Div Tag odabrat ćemo vrijednost Aftertag => i kreirati CSS pravilo:

Primijetimo kako margine i padding uglavnom na osnovnim postavljamo na vrijednost Opx.Time sprječavamo postavljanje tih vrijednosti od strane brovvsera.

I na kraju ostaje još jedan element footer. U bacit ćemo ga na isti način izaprethodnog i dodijeliti mu CSS pravilo.


19/22

Content for id "footer" Goes He re < /d iv >

| < /body>

Boje koje smo koristili kao pozadine elemenata ne moraju biti i konačne boje. Onesu u ovom trenutku važne da bismo vizualno lako razlikovali pojedine dijelovestrukture dokumenta. Poslije ih možemo promijeniti i prilagoditi dizajnu.

Za sada bi naš dokument prikazan u brovvseru izgledao ovako:

9.2.2 FLOAT Većina CSSom kontroliranih struktura su tzv. float strukture (float layout)To značida je većina elementa u njima "plutajuća" tj da primjenom CSS svojstva floatdosežu svoju konačnu poziciju u strukturi.Dokumenti bez primijenjenih CSS stilova koriste tzv. normalni tok dokumenta zapozicioniranje elemenata.U normalnom toku elementi se pojavljuju jedan ispod

drugog slijedom kojim su kreirani."Plutajući", floated elementi pomaknuti su iznormalnog toka, a elementi koji dolaze nakon njih pomiču se gore da zauzmunjihovo mjesto.To dovodi do situacije u kojoj floated elementi mogu preklapatiostale elemente na dokumentu.

Pomoću svojstva float nastavit ćemo strukturiranje našeg dokumenta.

Elementu sidebar definirat ćemo širinu i visinu (samo da bismo ga izjednačili selementom content) te primijeniti svojstvo float s vrijednosti left.


20/22

^sidebar {background; =FC9:margin: Opx;padding: Opx; vvidth: 120px;height; 300px;float: left;

Potom ćemo sljedećem elementu content također definirati širinu i floaf s vrijednosti right.

Time su oba elementa dobila širinu i smještena su sa svake strane roditeljskogelementa.Pri tome moramo paziti da zbroj sveukupnih širina (vvidth +padding x 2 +border x 2 + margin x 2) ne bude veći od širine elementa u kojem se nalaze (vvrapper).

Pomicanjem ta dva elementa iz normalnog toka dokumenta, element koji slijedinakon njih (footer) podiže se i zauzima njihovo mjesto te dolazi do preklapanja.Footerse sada nalazi ispod elemenata sidebarl content.


21/22

9.2.3 CLEAR Ako ne želimo da floated elementi utiču na elemente koji im slijede, primjenjujemoCSS svojstvo clear.Primjenom tog svojstva na neki element, nakon njega elementi se vraćaju unormalni tok. Vrijednosti svojstva clear su left, righti both.Left i right spriječiti će smještanje elemenata s lijeve tj. desne strane u odnosu naelement na koji je primijenjeno svojstvo. Both će spriječiti smještanje s obje strane.

U konkretnom slučaju nema smisla da sidebari content preklapaju element fooferida se on nalazi ispod njih.Da bismo dovršili strukturu ovog dokumenta, elementu footer primijenit ćemosvojstvo clear s vrijednosti both. To će ga smjestiti ispod preostala dva elementa i

vratiti u normalni tok.


22/22

Documents

Dreamweaver CSS