Kod slaganja html elemenata, treba znati da se oni inicijalno ponašaju po principu parent - child. Da bi napravio sivu podlogu, treba ti parent element. On može biti <body> ili unutar body-ja div. div služi za grupiranje elemenata i na njemu se mogu primjeniti sve vrste stilova. Iz iskustva ti preporučam da složiš izgled sa div elementima.
Unutar body elementa napraviš
div po defaultu ima širinu i visinu postavljenu na auto, pa ako se unutar njega ne nalazi ništa, bit će širok i visok 0px.
Za dodavanje srednjeg elementa, potreban nam je još jedan div ali unutar parent div-a.
Kod: Označi sve
<div class="parent"><div class="child">Ovo je centralni dio stranice</div></div>
U css-u ćemo zadati da je parent širok preko cijelog ekrana i tamno sive boje. Zbog toga što visinu poprima prema popunjenosti drugim elementima i njigovom visinom, postavit ćemo za ilustraciju minimalnu visinu od 500 px
Kod: Označi sve
.parent {background-color:#313131;width:100%;min-height:500px;}
Za child div ćemo postaviti svijetlo sivu boju, da je uži i manji od parent div-a.
Kod: Označi sve
.child {background-color:#cecece;width:80%;min-height:400px;}
Kad ovo primjeniš u html-u, dobit ćeš child pozicioniran lijevo. Za trik da ga pozicioniraš u centar parenta, bez obzira na
širinu parenta, dodaj childu
Često se stranica sastoji od headera, body-ja i footera i najčešće je zadatak da footer bude na dnu bez obzira na visinu stranice. Za to postoji trik. Opet su potrebni parent i child element. Za ilustraciju ću navesti i header i body.
Kod: Označi sve
<div class="parent">
<div class="child header">Header</div>
<div class="child body">Body</div>
<div class="child footer">Footer</div>
</div>
Namjerno su postavljene takve visine da footer nije na dnu parent div-a
Kod: Označi sve
.parent {background-color:#313131;width:100%;height:1000px;}
.child {background-color:#cecece;width:80%;margin:auto;}
.header {background-color:#acadfc;height:200px;}
.body {background-color:#ffffff;height:400px;}
.footer {background-color:#787878;height:100px;}
Kako bi footer bio na dnu, potrebno je parent divu dati parametar padding bottom i to u željenoj visini footera i dati mu apsolutnu poziciju:
Kod: Označi sve
padding-bottom:100px;position:absolute;
a footeru je potrebno reći da mu je bottom udaljenost 0 i također zadati apsolutnu poziciju
Kod: Označi sve
.footer {background-color:#787878;height:100px;bottom:0;position:absolute;}
Apsolutno pozicioniranje footer div-a je poremetilo njegovu poziciju pa ga sa parametrom
vratimo na željeno mjesto.
Sad se možeš igrati sa parametrima visine, širine, bojama, dodavati elemente, itd.
