VAZNO: nakon slanja zadnjeg newslettera nam se dogodila havarija sa bazom clanova, tako da je podignut backup nesto starijeg datuma - konkretno to znaci da ce ovaj newsletter dobiti i dio pretplatnika koji su zatrazili ispis iz newslettera. Ukoliko ste vi medju njima, molimo vas da ponovite ispis. Zahvaljujemo na razumijevanju!

Pozdravljamo vas pri kraju ovog vruceg ljeta. Dobro bi vas bilo i sve vidjeti, pa da vidimo tko se suncao na moru i sada ima preplanuli ten, a tko je programirao i dizajnirao cijelo ljeto i ima lijepu sirastu boju tena :-)

Ako niste upoznati, na siteu je aktivna nagradna igra. Pozivamo vas za sudjelujete u igri, u mogucnosti ste osvojiti PHP tecaj koji daruje tvrtka Agnitio iz Zagreba.

Ako su vam promakli sadrzaji objavljeni tijekom ljeta, pogledajte ove clanke:

• Upload datoteka na server pomocu ASP.NET-a (autora Nikole Ristica),
• JPEG u praksi (clanak iz serije o grafici i grafickim formatima na webu Borisa Senkera),
• Tipovi podataka i Data Definition Language (DDL) (drugi i treci dio iz SQL serije Blanke Matkovic).

Savjet tjedna: Da li ste posjetili example.com?

Kada pisete tekstove ili dokumentaciju u kojima trebate navesti web ili e-mail adresu samo kao primjer, sigurno se zapitate sto izabrati, a da izgleda normalno i ne stvori nekome nepozeljni spam.

Pa, kako navodi RFC 2606, IANA je mislila na vas. Cetiri vrsne domene (TLD) (".test", ".example", ".invalid" i ".localhost") i tri "drugostupanjske" domene ("example.com", "example.net" i "example.org") rezervirane su za ovakvu upotrebu. Tako je sasvim OK upotrijebiti npr. www.example.com ili netko@example.com. Probajte kliknuti, uostalom!

Ako ste se zapitali sto je s www.primjer.hr ili www.primjer.com.hr, odgovor je ne.

Tomislav Sereg - (tsereg@net.hr)

Uvod u CSS Positioning (2. dio)
Napisao: Nikola Plejic a.k.a. zweistein © 2001 - 2003

U proslom clanku vidjeli smo neke mogucnosti CSS-P-a. Danas nastavljamo s dodavanjem drugog layera u dokument i s malo teorije o pravilnom pozicioniranju layera.

Dodajemo drugi layer

Ukoliko do sada niste, iskreno vam preporucujem da procitate prvi dio tutoriala o CSS-P-u. U protivnom mozda necete razumjeti sve sto je opisano u clanku.

U prvom dijelu imali smo samo jedan layer i s njim smo se razbacivali po ekranu. To je cool (vise-manje), ali prava moc CSS-P-a vidi se tek kad se doda vise layera. Mozda vec vidite mogucnosti - preklapanje, tocno pozicioniranje, potpuna kontrola dizajna...

i dodajmo mu jos jedan layer:

<div class="layer2">Jos malo teksta. Ovdje mora biti malo vise teksta. Morate voljeti filler tekst. Filler tekst koristan je tekst koji dizajneri koriste da bi prikazali dizajn bez sadrzaja od strane klijenta <br /> Ja ga ovdje koristim da popunim ovaj layer jer nemam nista pametnije cime bih ga popunio.</div>

Buduci da se citavo pozicioniranje radi CSS-om, moramo dodati i malo CSS-a, zar ne? ;-)

CSS iz prethodnog dijela izgleda nam ovako:

Buduci da smo dodali jos jedan layer, bilo bi pristojno i njemu dodijeliti neki stil:

Border sam dodao iz istog razloga kao i prosli put: da se vide granice layera.

Pogledajmo krajnji rezultat:

Primjer: drugilayer.html (link za download datoteke na kraju je clanka)

Jos jednom - korisnici Intelovih procesora, NHF za sliku ;-).

Najbolje je sto sada te layere mozemo i preklapati jednostavnim mijenjanjem left: atributa unutar stila jednog od layera. Ja sam odlucio promijeniti atribut drugog layera, tj. smanjiti left za 140px:

Rezultat je preklapanje layera:

Primjer: preklapanje.html (link za download datoteke na kraju je clanka)

Jedna stvar koju smo koristili u ovom clanku, a jos je nismo spomenuli, jest atribut width. Kao sto ste vjerojatno vec shvatili, on odredjuje sirinu naseg layera.
Njemu srodan atribut height odredjuje visinu layera. Visina i sirina mogu se definirati u pikselima (px), centimetrima (cm) i postocima (%). Postoji jos par jedinica u kojima se moze definirati sirina i visina, npr. point (pt), em (em) i sl.

Sirinu (i visinu) pametno je definirati jer je na stranici sve smjesteno apsolutno, pa ako ne zelimo nezeljena preklapanja, cudne efekte i sl., na stranicama obavezno definiramo barem sirinu.

U odnosu na sirinu prethodnog layera odredjujemo i left atribut iduceg layera koji postavljamo na stranicu.

Recimo da je sirina prethodnog layera bila 300 piksela i da je bio udaljen od ruba stranice za 10 piksela (bilo zbog margine stranice ili samog layera). Layer koji mislimo postaviti desno od tog layera treba biti udaljen minimalno 310 piksela (znaci, atribut left mora iznositi najmanje 310 piksela) da ne bi doslo do preklapanja izmedju ta dva layera.

Ovo je lakse shvatiti ako se napravi jedan primjer, moze? ;-)

Imamo dva layera na stranici. Prvi je pozicioniran ovako:

Za one koji su se tek sad ukljucili, ovaj layer od ruba je margine stranice odmaknut 10 piksela, ima sirinu 130 piksela i od vrha je margine odmaknut 10px.

Prilikom pozicioniranja drugog layera moramo uzeti u obzir tri stvari:

• sirinu margine same stranice (tj. one koju definiramo unutar body selektora),
• sirinu margine layera (tj. one koju definiramo u selektoru samog layera) i
• sirinu samog layera (tj. sirinu layera "prvilayer").

U nasem slucaju:

• sirina margine same stranice iznosi 0 piksela, tj. nema je (body {margin: 0px;})
• sirina margine layera iznosi 10 piksela
• sirina samog layera iznosi 130 piksela

Zbrojimo prvu, drugu i trecu vrijednost (0+10+130 = 140) i dobit cemo najmanju vrijednost left atributa drugog layera ako ne zelimo da se layeri preklapaju. Ako vam je preklapanje cilj, zanemarite ovo cijelo poglavlje ;-)))).

Pozicionirajmo drugi layer:

Sada ce layeri biti tocno jedan do drugog ako smo unutar body selektora odredili marginu na 0 piksela.

Primjer: widthheight.html (link za download datoteke na kraju je clanka)

Da biste se mogli poigrati s njima, primjere smo zazipali za download. Slobodno mijenjajte vrijednosti i igrajte se s time jer je to jedini nacin da naucite primjenjivati CSS-P na vasim stranicama. Dalje layere mozete dodavati sami - princip je isti, sve su ostalo nijanse :).

Nakon sto ste se poigrali s ovim primjerima, pokusajte napraviti nesto svoje, a ako ne ide, vratite se natrag na clanak i primjere ili postavite pitanje na forumu.

O autoru:

Nikola Plejic a.k.a. zweistein (zweistein@net.hr) - posjeduje vlastitu web stranicu na http://zweistein.cjb.net. Bavi se web dizajnom i programiranjem, proucava nove tehnologije i programski jezik Python. Od glazbe najvise slusa metal gdje i trazi inspiraciju za sve sto radi.