Cilj predmeta jeste dizajn dinamičkih veb strana koje uključuju interakciju korisnika. Cilj predmeta jeste dizajn dinamičkih veb strana koje uključuju interakciju korisnika

Celine se prikazuju pomoću osobine display koji može biti block, inline, inline-block, list-item...

• Celine se prikazuju pomoću osobine display koji može biti block, inline, inline-block, list-item...

• Inline element se nastavlja u istom redu kao i prethodni

• Block počinje u narednom redu, gura naredni element u naredni red, i ima definisane dimenzije

• Inline-block se nastavlja u istom redu i ima dimenzije

Primeri inline elemenata po difoltu: a, img, b, i, object, span, sub, sup, input, button, label, select, textarea, ...

• Primeri inline elemenata po difoltu: a, img, b, i, object, span, sub, sup, input, button, label, select, textarea, ...

• Primeri block elemenata po difoltu: p, ol, ul, pre, div, form, table, h1, h2, ...

• Lista svih block i inline elemenata

• http://www.w3.org/TR/1999/xhtml-modularization-19990406/module_defs.html#a_dtdblock

stil1.css

• stil1.css

• #div_levi {

• display:inline;

• width:200px;}

• #div_desni {

• display:inline;

• vertical-align:top;

• width:300px;}

stil2.css

• stil2.css

• #div_levi {

• display:inline-block;

• width:200px;}

• #div_desni {

• display:inline-block;

• vertical-align:top;

• width:300px;}

Elementi se omogućavaju da lebde, tj. prolaze kroz tekst i druge elemente pomoću osobine float koji ima vrednosti left i right, u zavisnosti od strane na kojoj element lebdi.

• Elementi se omogućavaju da lebde, tj. prolaze kroz tekst i druge elemente pomoću osobine float koji ima vrednosti left i right, u zavisnosti od strane na kojoj element lebdi.

• #kalendar {background:#339; color: white; width: 150px; float: right;}

• Pomoću osobine clear koji ima vrednosti left, right, both, i none, može se zabraniti prolaz kroz dati element sa njegove odgovarajuće strane.

• #tekst {color: white; width: 150px; clear: left;}

Elementi koji lebde narušavaju normalan tok teksta, odnosno block i inline elemenata. Samo inline elementi vide lebdeće elemente.

• Elementi koji lebde narušavaju normalan tok teksta, odnosno block i inline elemenata. Samo inline elementi vide lebdeće elemente.

• Dva ili više elemenata sa istom vrednošću atributa float se naslanjaju jedan na drugi prema redosledu pojavljivanja na odgovarajućoj strani.

• Da bi se povratio normalan tok dokumenta posle elemenata koji lebde potrebno je uvesti element, makar i fiktivni, koji će da zabrani prolaz prethodnih elemenata kroz njega koristeći osobinu clear, npr:

• .clearfix::after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}

• Tekst

stil3.css

• stil3.css

• #div_levi {

• width:35%;

• float:left;

• }

• img{

• float:right;}

• #div_desni {

• float:right;

• width:45%;}

stil4.css

• stil4.css

• #div_levi {

• width:35%;

• float:left;

• }

• img{

• float:right;}

• p{

• clear:right;}

• #div_desni {

• float:right;

• width:45%;}

Poziciju određuju zatim osobine top, bottom, left, right koji određuju

• Poziciju određuju zatim osobine top, bottom, left, right koji određuju

• rastojanje početka bloka od odgovarajuće ivice prvog pretka elementa koji koristi osobinu position, kada je osobina position absolute,
• ekrana kada je osobina position fixed,
• svoje prirodne pozicije kada je osobina position relative.

• Kada se koristi position osobina za pozicioniranje, onda se naruši normalan tok elemenata. Nepomereni sadržaj ili dimenzije relative elemenata su vidljivi.

Primer:

• Primer:

• #pozadina {position: absolute; top: 250px; left: 2%;}

• #sadržaj {position: absolute; top: 0px; left: 25%;}

• #navigacija {position: absolute; top: 10px; left: 2%}

• h2, h3 {position: relative; left:-25px}