U prvom izletu u CSS Zen Garden istaknuli ste naslove te promijenili fontove ili boju znakova. Osim toga, još ste obojili pozadinu div elemenata koji sadrže popise dodatnih linkova.

U ovom ćemo se zadatku prvo poigrati sa smještavanjem elemenata na stranici, a zatim ćemo, još malo prema želji urediti pojedine dijelove stranice.

Otvorite CSS datoteku koju ste pripremili u prvom izletu u Zen Garden te otvorite HTML datoteku u web pregledniku. Tijekom rada ćete nakon svake promjene CSS datoteke samo osvježavati prikazanu stranicu.

Krenimo prvo sa smještavanjem pojedinih kutija:

1. pronađite div element u kojem se nalaze div elementi s popisima linkova i zapamtite mu ime
2. nađeni div element suzite tako da je širine 300px i da se nalazi desno na stranici (po potrebi ponovno pročitajte niz lekcija o pozicioniranju)
3. spremite stil te pogledajte stranicu u web pregledniku
4. suzite div element imena supportingText tako da mu širina bude 700px, te postavite tako da se na stranici nalazi lijevo
5. spremite stil te pogledajte stranicu u web pregledniku.

Ako želite, poigrajte se još malo sa smještavanjem kutija. Precizno smještavanje bit će lako tek kad ćete raditi s izvornim HTML kôdom (no tamo je i puno više elemenata, pa je teže snaći se).

Slijedi uređivanje okvira. Isprobajte sljedeće mogućnosti, pa se odlučite za neku ili neke od njih:

• stavite vodoravnu crtu u boji naslova ispod svakog naslova
• stavite sličicu u podlogu okvirića s popisima – prvo tako da se ponavlja, zatim uz desni rub, pa na kraju samo u desni gornji kut
• isprobajte svojstva margin i padding na kutijama s popisima linkova te na naslovima
• mijenjajte širinu prozora preglednika dok gledate svoj uradak te promatrajte dvije širine kutija koje ste definirali; pokušajte definirati širine pomoću piksela te ponovite pokus
• stavite div element s imenom footer na dno ekrana s fiksiranom pozicijom.

Primjer izgleda stranice.
Slika je kao podloga uključena također u CSS.

Isprobajte i druga svojstva!

Kao uzor vam već može poslužiti galerija najboljih radova poslanih u CSS Zen Garden. Pokušajte otkriti kako su dobiveni efekti na stranicama koje vam se sviđaju te pokušajte sami primijeniti efekte slične viđenima. Možete se pokušati ugledati i na izgled nekih drugih web stranica i za vježbu oponašati njihov stil.

Važno je napomenuti da sad, dok još radite s pojednostavljenim HTML dokumentom, nećete moći postići sve efekte koje vidite na stranici CSS Zen Garden-a. No, sad je cilj da isprobate što je moguće više raznih svojstava i vrijednosti na relativno malom broju elemenata i relativno jednostavnoj strukturi dokumenta.