HTML/CSS za početnike #6 - Oblikovanje dokumenta

Pošto smo u prethodnoj lekciji (koja je bila pre mesec dana jer sam preskočio jedan termin zbog praznika) napravili uvod u korišćenje CSS-a, vreme je da nešto od toga primenimo na naš sajt. Ono što bi ja prvo uradio jeste oblikovanje dokumenta, odnosno pozicioniranje sekcija na HTML stranici.

Za početak napravite novi CSS dokument. Ja sam moj nazvao style.css. Sada treba povezati ovaj dokument sa HTML dokumentima unošenjem sledećeg koda u glavu dokumenta kako je objašnjeno u prethodnoj lekciji:

<link rel="stylesheet" type="text/css" href="style.css" />

Ne zaboravite da unesete ovaj kod u sve tri stranice našeg sajta.

Sada otvorite CSS dokument i prva stvar koju bi ja uneo je instrukcija koja resetuje margine HTML dokumenta i tela dokumenta koje se pojavljuju u nekim pretraživačima. Unesite sledeću instrukciju na samom početku CSS dokumenta:

html, body {
margin: 0; padding: 0;
}

Margin predstavlja prostor izvan ivica dokumenta i služi kada želimo da odvojimo element od drugih elemenata. Može se pisati na više načina. Kada stoji samo jedna vrednost kao na primer margin: 10px; znači da su sve margine iste i da iznose 10px. Kada se nalaze dve vrednosti margin: 10px 20px; prva vrednost definiše gornju i donju marginu a druga levu i desnu, znači gornja i donja margina bi bile 10px a leva i desna 20px. Kada imamo četiri vrednosti unutar margin atributa margin: 5px 10px 15px 20px; svaka vrednost definiše po jednu marginu u pravcu kazaljke na satu počev od gornje, znači gornja je 5px, desna 10px, donja 15px i leva 20px. Margin atribut može se zameniti i sa četiri atributa  koja definišu po jednu marginu pa prethodni primer sa četiri vrednosti može da se napiše i na sledeći način:

Element {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}

Ovaj način pisanja koristim kada želim da podesim samo jednu marginu a da ostale ne diram, međutim kada podešavam više margina koristim gornji način.

Padding predstavlja prostor između sadržaja dokumenta i ivica dokumenta i služi kada želimo da odvojimo sadržaj od ivica dokumenta. Svi načini pisanja koji važe za margin atribut važe i za padding.

Pre nego što krenemo da pozicioniramo sekcije promenićemo boju tela dokumenta:

body {
background-color: #222222;
}

Sa ovim primerom smo se već susretali u prethodnoj lekciji pa ga neću objašnjavati. Reći ću samo da #222222 predstavlja heksadecimalni kod za tamno sivu nijansu boje. Dok se ne uhodate sa heksadecimalnim kodovima možete da koristite sajt colorpicker.com.

Sada mošemo da pređemo na prvu sekciju i to je header. Unesite sledeću instrukciju u nastavku CSS dokumenta:

#header {
height: 160px; width: 800px;
background-color: #dddddd;
margin: 10px auto 0 auto; padding: 20px 0;
}

Height predstavlja visinu elementa a width širinu. Ovde su obe vrednosti u pikselima a mogu da budu i u procentima. Pikseli predstavljaju "fiksnu" dimenziju dok procenti predstavljaju dimenziju koja se menja u zavisnosti od veličine ekrana. Ostali atributi su manje-više poznati, jedino ste primetili da leva i desna margina imaju vrednost auto, to znači da se one automatski podešavaju tako da element uvek bude na sredini.

Sledeći element je nav: instrukcija će biti ista samo sa drugim vrednostima:

#nav {
height: 40px; width: 800px;
background-color: #dddddd;
margin: 5px auto 0 auto; padding: 5px 0;
}

Sada ide glavni deo stranice koji je podeljen na sadržaj i bočni deo. Prva instrukcija je za main element i slična je kao i prethodne samo bez boje pozadine jer ćemo to podesiti u content i sidebar elementima:

#main {
height: auto; width: 800px;
margin: 5px auto 0 auto; padding: 0;
}

Height ima vrednost auto što znači da se visina automatski povećava kako ubacujemo elemente u ove sekcije. Sada pošto nemamo ništa u ovim sekcijama visina će biti 0.

Sada treba main element podeliti na dva elementa koja će biti jedan pored drugog a ne jedan ispod drugog. Ukupna širina je 800px, mi ćemo uzeti da content bude 600px a sidebar 200px stim što ćemo sidebar umanjiti za vrednost njegove leve margine. Unesite sledeće dve instrukcije:

#content {
height: auto; width: 600px;
background-color: #dddddd;
margin: 0; padding: 10px 0;
float: left;
}

#sidebar {
height: auto; width: 195px;
background-color: #dddddd;
margin: 0 0 0 5px; padding: 10px 0;
float: left;
}

Float atribut ima vrednost left što znači da se ovi elementi ne ređaju jedan ispod drugog nego sa leva na desno. Float može imati i vrednost right i tada bi elementi išli sa desna na levo.

Bitna stvar kod float atributa je da mora biti prekinut sledećim elementom. Dodaćemo jedan prazan div element na html stranici unutar main elementa i ispod sidebar elementakoji će vršiti funkciju prekidanja float atributa. Dodajte sledeći element na sve tri stranice sajta:

<div class="clear"></div>

Elementu sam dao klasu clear jer se i css atribut koji vrši prekidanje zove clear. Sada u CSS dokumentu dodajte:

div.clear {
clear: left;
}

Znači rekli smo da clear prekida float pa zato ima i istu vrednost kao i float stim što clear može da imai vrednost both kada prekida i left i right.

I na samom kraju dodaćemo još jednu instrukciju za footer koja izgleda ovako:

#footer {
height: 40px; width: 800px;
background-color: #dddddd;
margin: 5px auto 0 auto; padding: 5px 0;
text-align: center;
}

Ovde je sve poznato osim atributa text-align koji služi za poravnanje teksta. Vrednost left ravna tekst na levoj ivici, right na desnoj, justify na obe ivice i center centrira tekst.

Ako ste sve odradili kako treba sve sekcije bi trebalo da budu na svom mestu i vaša stranica sada treba da izgleda ovako:

Toliko u ovoj lekciji, ako ima bilo čega nejasnog ostavite komentar. U sledećoj lekciji nastavićemo sa CSS-om.