Kurs HTML, CSS i Javascript web tehnologija
4. predavanje - Napredni CSS - pozicioniranje elemenata
Kurs je održan u okviru projekta besplatne obuke građana i u organizaciji Startit centra - više informacija na www.startit.rs
Dizajn chatbotova: Nešto više od "poruka u balonu"
HTML, CSS i Javascript Web tehnologije - 4. predavanje - Startit.rs
1. HTML, CSS i JAVASCRIPT
WEB TEHNOLOGIJE - PREDAVANJE 4.
SEEICT - STARTIT CENTAR
2. PROGRAM PREDAVANJA I VEŽBI
● Slike kao pozadinska dekoracija elemenata
● Visina i širina “block” elemenata
● Inline-block: Najbolje od oba sveta
● Raspoređivanje i slaganje elemenata u slojevima
8. HTML ELEMENTI - WIDTH I HEIGHT
article.news {
width : 400px;
height : 200px;
}
but the company's services and cloud products
continue to help generate new revenue. The earnings
won't please Wall Street investors though, many of
whom were hoping to see Microsoft's stock surge and
reclaim its 1999 record.
HEIGHT
WIDTH
ELEMENTIMA SE RETKO ZADAJE FIKSNI HEIGHT - ZBOG SADRŽAJA KOJI NE MOŽEMO DA PREDVIDIMO!
9. CSS PRIKAZIVANJE ELEMENATA: INLINE, BLOCK
IMG, A, SPAN - INLINE ELEMENTI
Poznavanje kodiranja je dobra početna
pozicija za kvalitetan posao ovih dana. Pročitajte više...
H1, P, UL - BLOCK ELEMENTI
13. CSS - INLINE-BLOCK
● Elementi se ređaju jedan pored drugog (slično kao
inline elementi)
● Elementima se može davati fiksna širina i visina
ul.gallery li {
display : inline-block;
}
INLINE-BLOCK : PRAKTIČNO REŠENJE ZA ELEMENTE KOJI SE SLAŽU JEDAN DO DRUGOG
19. RELATIVNO POZICIONIRANJE
● Zgodno kada je potrebno “fino” podešavanje
pozicije nekog elementa
● Nije za kompleksnije raspoređivanje elemenata
● Ne menja “tok” strane niti utiče na druge
elemente
21. NAVIGACIJA (MENI) NA STRANI - REŠENJE!
APSOLUTNO POZICIONIRANJE - ELEMENT NE UTIČE NA DRUGE ELEMENTE
NAV
SECTION.CONTENT
UL.MENU
ul.menu {
position : absolute;
left : 90px;
top : 20px;
}
22. OSOBINE APSOLUTNOG POZICIONIRANJA
● Top, bottom, left, right - računaju se u odnosu na parent element
● Ne utiče na raspored okolnih elemenata - browser nije “rezervisao” mesto na strani za
njega
APSOLUTNO POZICIONIRANJE - ZA ELEMENTE KOJI SE SLAŽU U “SLOJEVIMA”
23. OSOBINE APSOLUTNOG POZICIONIRANJA
ELEMENT POZICIONIRAN U ODNOSU NA BODY
index.html:
<body>
<nav> . . .</nav>
<article> . . . </article>
<div class=’modal’> . . . </div>
</body>
Style.css:
.modal {
position : absolute;
left : 40%;
top : 20px;
}
24. OSOBINE APSOLUTNOG POZICIONIRANJA
ELEMENT POZICIONIRAN U ODNOSU NA MODAL!
index.html:
<div class=’modal’>
<h1>Modal Title</h1>
<p class=’body’>One fine body...</p>
<a href=’#close’>Close</a>
<a href=’#save’>Save Changes</a>
<div class=’close’></div>
</div>
Style.css:
.modal {
position : absolute;
left : 40%;
top : 20px;
}
.close {
position : absolute;
top : 10px;
right : 10px;
}
25. OSOBINE APSOLUTNOG POZICIONIRANJA
APSOLUTNO POZICIONIRAN ELEMENT - ISCRTAVA SE U ODNOSU NA SVOJ RELATIVNI KONTEJNER!
index.html:
<header>
<nav>
MAIN NAVIGATION
</nav>
<section class='subnav'>
SUBNAVIGATION
</section>
</header>
style.css:
header {
position:relative;
}
.subnav {
position:absolute;
top:30px;
}
27. ● Background - CSS svojstvo za kreativne stranice
● Dimenzionisanje elemenata - width i height
● Inline-block kao jednostavan alat za raspoređivanje elemenata
● Apsolutno i relativno pozicioniranje
ŠTA SMO DANAS NAUČILI?
28. ČEGA JOŠ SVE IMA A NISMO POMENULI?
● HTML: SVG, VIDEO, OBJECT, Forme, Tabele, RGBA boje…
● CSS Animacije
● HAML, SASS i LESS preprocesori - olakšanje u pisanju HTML-a i CSS-a
● CSS Biblioteke - Normalize.css, Bootstrap, Foundation...
● Responzivni dizajn i FlexBox pozicioniranje
● Kompleksniji CSS selektori i pseudo selectori, tipografija, Email kodiranje, CSS
optimizacije, Pisanje CSS-a u velikim projektima, CSS nasleđivanje...
30. ● Prethodne sajtove koje smo radili: CV, Sajt za Piceriju, Blog, Galeriju, Test Sajt
- pregledati i preraditi da koriste sve pogodnosti novonaučenih stvari: HTML5
tagova i CSS deklaracija
● Intervjuisati preduzetnika koji nema sajt i napraviti mu sajt - od početka
● Slack Channel - kursindjija.slack.com
DOMAĆI ZADATAK
31. ● Smashing Magazine - magazin o web designu - https://www.smashingmagazine.com
● A List Apart - Web dizajn magazin - http://alistapart.com
● Normalize.css - https://necolas.github.io/normalize.css/
● Twitter Bootstrap CSS Framework - http://getbootstrap.com
● Foundation CSS Framework - http://foundation.zurb.com
● HTML5 Demos - http://codepen.io/ge1doot/pens/popular/
KORISNI LINKOVI