Početna vrijednost za sve elemente, znači da se element pozicionira na stranici u odnosu na druge elemente. Ako imamo element div-2 unutar div-1:
<!DOCTYPE html>
<html>
<head>
<style>
.div-1 {
background-color: #0000ff;
color: #ffffff;
width: 500px;
height: 400px;
position: static;
}
.div-2 {
background-color: #ff0000;
color: #ffffff;
width: 200px;
height: 200px;
position: static;
}
</style>
</head>
<body>
<div class="div-1">
div-1
<div class="div-2">
div-2
</div>
<p>
div-2 je unutar div-1
</p>
</div>
</body>
</html>
Rezultat (klikni me!)
Elementi se ponašaju kao da nismo niti postavili position.
Početna vrijednost za sve elemente, znači da se element pozicionira na stranici u odnosu na druge elemente (jednako kao static), ali omogućuje i korištenje top, right, bottom, left svojstava. S tim svojstvima možemo pomaknuti element u nekom smjeru. Ako u prethodnom primjeru ubacimo "position: relative;" za div-2:
position: relative; left: 50px;
Dobit ćemo: Rezultat (klikni me!)
Element ignorira ostale elemente stranice i pozicionira se u odnosu na parent element (element kojem pripada) ako parent element ima postavljen position: relative. Ako nema takvog elementa pozicionira se u odnosu na body stranice.
Ako dodamo u div-2 "position: absolute;" i "right: 0;" div-2 će ignorirati ostatak stranice i premjestiti se prema body
Tekst unutar div-1 će se također pomaknuti, jer div-2 mu više ne smeta:
position: absolute; right: 0;Rezultat (klikni me!)
Ako želimo da se div-2 pozicionira unutar div-1, potrebno je za div-1 dodati "position: relative;"
position: relative;Rezultat (klikni me!)
Element ostaje uvijek na istoj poziciji na stranici. Kao i kod "position: absolute;" možemo koristiti top, right, bottom, left. Primjer sa "position: fixed; bottom:0; left:10%; width:80%;"
Primjer (klikni me!)Zadatak 1
Potrebno je poredati elemente kao na slici. Za izradu zadatka potrebno je koristiti div elemente sa proizvoljnim nazivima klasa, te position svojstvima (ne fixed) za te klase (CSS external zapis).
Napomena! Kako bi se jedan prazani div element prikazao, potrebno mu je odrediti visinu, širinu i pozadinsku boju.
Svojstvo float omogućuje da element postavimo lijevo (vrijednost left), desno (vrijednost right), inherit (nasljeđuje od parent elementa) i none (početna vrijednost) u odnosu na sljedeći element.
Primjer:
<div id="div-1" style="background-color:#0000ff; width:50px; height:50px; float:left;"> </div> <div id="div-2" style="background-color:#ff0000; width:50px; height:50px; float:left;"> </div> <p>Plavi i crveni div su float left u odnosu na ovaj tekst</p>
Rezultat:
Plavi i crveni div su float left u odnosu na ovaj tekst
Ako želimo da tekst ide u sljedeći red potrebno mu je postaviti svojstvo clear. Svojstvo clear ima vrijednosti both (obje strane), left, right i none (početna vrijednost).
<div id="div-1" style="background-color:#0000ff; width:50px; height:50px; float:left;"> </div> <div id="div-2" style="background-color:#ff0000; width:50px; height:50px; float:left;"> </div> <p style="clear: both;">Ovaj tekst je u novom redu</p>
Rezultat:
Ovaj tekst je u novom redu
Zadatak 2
Zadatak je identičan prethodnom, samo je elemente potrebno poredati (kao na slici) koristeći float svojstva.
Svojstvo @media omogućuje postavljanje drugačijeg ponašanja stranice ako se ispune određeni uvjeti. U naš static primjer dodali smo:
<style>
@media screen and (min-width:400px) and (max-width:799px) {
/*ako je velicina ekrana između 400px i 799px*/
#div-2 {
background-color: #ffff00; /*promijeni boju*/
}
}
@media screen and (max-width:399px) {
/*ako je velicina ekrana manja ili jednaka 399px*/
#div-2 {
background-color: #00ff00; /*promijeni boju*/
}
}
</style>
I dobili: Rezultat (klikni me!)
Zadatak 3
Potrebno je napraviti stranicu kao na slici. Za izradu zadatka potrebno je koristiti float i clear svojstva (CSS external zapis).
Za uključiti Bootstrap potrebno je u dokument unijeti:
<!-- informacije o širini stranice i približavanju, potrebno za Bootstrap --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- uključivanje Bootstrap CSS-a putem web linka --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- uključivanje JQuery framework-a putem web linka --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <!-- uključivanje Bootstrap framework-a putem web linka --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Najvažniji dio Bootstrap-a je grid sustav koji omogućuje da se stranica pri izradi prilagodi svim rezolucijama ekrana. Grid sustav dijeli stranicu na 12 dijelova i svaki element može uzimati 1 ili više dijelova (do 12). Npr. ako se odlučite da tri elementa uzimaju po 4 dijela, time dijelite stranicu na 3 jednaka dijela (12/4=3).
| 3 | 3 | 3 | 3 |
| 4 | 4 | 4 |
| 6 | 6 |
| 12 |
Grid ima četiri klase za prilagodbu prema četiri vrste ekrana:
Klase se pridružuju u formatu col-*-*, gdje je prva zvjezdica veličina ekrana (xs, sm, md ili lg), a druga broj (od 1 do 12) koliko dijelova element zauzima na stranici. Nekoliko primjera:
class="col-xs-3" class="col-sm-6" class="col-md-6" class="col-lg-3"
Obično se više klasa pridruži jednom elementu za više tipova ekrana, npr.
<div class="col-xs-3 col-sm-6 col-md-6 col-lg-3">
Time dobijemo div koji se ponaša drukčije ovisno o rezoluciji ekrana.
Svaka postavljena veličina vrijedi i za sve više, npr. ako se postavi sm, vrijedi za sm, md i lg, ili ako se postavi md vrijedi i za lg. Manje veličine, ako se ne navedu, koriste cijeli redak (12 stupaca).
Grid sistem ima nekoliko pravila:
Primjer:
<div class="container">
<div class="row">
<div class="col-md-6">
...
</div>
</div>
</div>
Čest primjer Boostrap-a je stacked-to-horizontal. Koriste se dva div-a sa col-sm-6.
sm, md i lg su time postavljeni da divovi koriste po 6 dijelova ekrana, a za xs koriste puni redak (12).
Zadatak 4
Poredati elemente kao na slici, ali koristeći Bootstrap.
Zadatak 5
Napraviti stranicu kao na slici. Za izradu zadatka potrebno je koristiti Bootstrap.