Pozdrav webmajstori!

Tema ovoga broja newslettera je CSS positioning - tehnologija s kojom mozete precizno pozicionirati elemente na stranicama bez upotrebe tablica. Nije rijec samo o sminki i povodjenju za novim trendovima, vec njegovom uporabom mozete drasticno ustediti na velicini HTML kôda.

Ukoliko zadnjih dana niste bili na siteu, pogledajte nedavno objavljeni vodic Izbornik "Vi ste ovdje" bez programskog jezika autora Tomislava Serega.

I za kraj uvoda, u newsletter smo dodali rubriku sa zadnjih 10 postova s foruma te mini mapu weba sa linkovima na najvaznije cjeline Webmajstora. Kao i uvijek, voljeli bismo cuti vase misljenje tome - bilo pozitivno ili negativno :)

Uvod u CSS positioning (CSS-P)
Napisao: Nikola Plejic - Zweistein © 2001 - 2003

S pojavom XHTML-a, nasljednika HTML-a, W3C je poceo raditi na izdvajanju izgleda stranice (tj. prezentacije) od kôda, tj. sadrzaja. Kad su se uvidjele prednosti takvog odvajanja, nastao je CSS positioning (skraceno CSS-P) koji nam omogucava tocno pozicioniranje elemenata na stranici. Pomocu njega u pikselima mozemo odrediti tocne koordinate nekog elementa na stranici. CSS-P omogucava bolje pozicioniranje i vecu kontrolu nad izgledom nego sto to mogu tablice koje su se do sad koristile. Zapravo, jednom kad svladate CSS-P, tablice vam mozda vise nece ni trebati.

Mozda vam to zvuci nevjerojatno, ali tablice nisu uvedene u HTML standard da biste ih koristili za razmjestanje slicica i teksta po web stranici kao sto je to danas uobicajeno. One su trebale posluziti za bolji prikaz strukturiranih podataka, recimo kao u Excelu i u prvih nekoliko mladih godina weba one su tome uglavnom i sluzile.

Dizajneri su vrlo brzo sve "pokvarili" jer su otkrili da tablice mogu posluziti kao kostur njihovog dizajna. Tako su stvarane sarene web stranice kojima je trebala citava vjecnost da se ucitaju. Pogadjate: HTML kôd iza tablica postajao je sve zamrseniji, a ni dizajneri nisu s vremenom bili marljiviji (o softveru koji generira neuredni kôd da ni ne govorimo). Izazivam vas da otvorite HTML kôd vase web stranice i da se zamislite nad hrpom <TABLE>, <TD> i <TR> tagova koji cine barem 50% vaseg HTML kôda.

Ako vas pricica o tablicama nije uvjerila, onda znajte da CSS-P koriste najvece face medju webmajstorima, pa ga i vi morate znati ako zelite biti cool :-)

Buduci da se pozicioniranje radi u CSS-u, bit ce vam potrebno osnovno znanje CSS-a i HTML-a. Takodjer bi bilo pozeljno da imate instalirano barem par poznatijih browsera u zadnjim izvedbama (Internet Explorer, Mozilla, Opera). Malo zdravog razuma i volje nece naskoditi :).

Kompatibilnost browsera sa CSS-P tehnologijom veci je problem nego sto se to na prvi pogled cini. Da nam ne bi bilo dosadno, Microsoft i ostali proizvodjaci browsera pobrinuli su se da se neki kompliciraniji stilovi ne prikazuju isto u svim browserima. Tako na primjer mozete dozivjeti da IE i Mozilla prikazu sve kako treba, a da Opera jednostavno uzme jedan element i baci ga par piksela lijevo, narusavajuci izgled stranice. Srecom, postoje decki koji su se dosadjivali, pa su nasli neka zaobilazna rjesenja (koja i nemaju bas uvijek smisla :)).

Iako mozemo pozicionirati bilo koji element na stranici, najcesce se pozicioniraju layeri koji sadrze slike i tekst koji se prilagodjavaju layeru.

Napravimo za pocetak jednostavan layer koji cemo moci micati po stranici iskljucivo za demonstraciju:

<div class="layer1">tekst... tekst<br />
<img src="slika.gif" alt="slika" /></div>

Pretpostavljam da znate cemu sluzi class i sto odredjuje - ako ne znate, svakako procitajte CSS vodic.

Napravimo sada jednostavan stil za taj layer:

div.layer1 { position: absolute;
		   left: 150px;
		   top: 30px;
		   padding: 10px;
		   border: 1px #000000 solid; }

Stavili smo okvir (border) oko layera da bismo mogli vidjeti pozicioniranje na djelu. Ja sam u ovom primjeru dodao i padding (razmak) od 10 piksela kako sve ne bi izgledalo tako zbijeno, no to nije vazno za CSS-P (bez uvrede korisnicima Intelovih proizvoda zbog slike :D).

Position: absolute govori browseru da mi sami zelimo odrediti apsolutnu poziciju layera na stranici. Atribut position moze imati i vrijednosti fixed, absolute i relative, ali o tome u drugom dijelu.

Left: 150px oznacava udaljenost od lijevog ruba stranice. Tome treba pridodati i margine (koje je prije toga pametno odrediti u <BODY> sekciji buduci da razliciti browseri imaju razlicitu pocetnu vrijednost margine. Takodjer je vazno znati da browser racuna poziciju pocevsi od margine, a ne od samog ruba. Marginu taga <BODY> najbolje mozete odrediti CSS-om:
body { margin: 0px; })

Top: 30px ima istu ulogu kao left, samo sto on odredjuje udaljenost od vrha (savjet za odredjivanje margina primijenite i ovdje).

Ukoliko ste se malo poigrali s ovim primjerom i mozda ubacili drugi layer, vidjet cete mnoge mogucnosti koje cemo objasniti u iducem nastavku.

Glazbu iz X-Files, molim:

To be continued…

Nikola Plejic a.k.a zweistein (zweistein@net.hr) - posjeduje vlastitu web stranicu na adresi http://zweistein.averi.hr/ vec dvije godine i na njoj daje savjete o izradi web stranica, glazbi, znanosti... Obozava Photoshop s kojim, u kombinaciji s Dreamweaverom, radi svoje siteove uz 1,2GB MP3-a koje ima na svom racunalu.