Pomoć - pozicioniranje sadržaja pomoću CSS-a

[Markez]

Pocetnik sam sa CSS-om pa mi je potrebna mala pomoc oko okvira <div> tag za pozicioniranje sadrzaja na strani. Napravio sam glavni okvir u kome ce se nalaziti sav sadrzaj 640x480. I posto sam koristio rezoluciju 1024x768 pozicionirao sam ga 192 pixela od leve strane. U Operi to tako i prikazuje medjutim u IE ga lepi za levu stranu. Zbog cega se to desava i kako da to resim. I kako da kazem okviru da se uvek nalazi na sredini strane bez obzira na rezoluciju monitora?

I jos jedno pitanje, u tom glavnom okviru sam ubacio jos jedan okvir koji bi trebao da se nalazi na dnu, stavio sam relativ poziciju na 465px od vrha misleci da ce da ga pozicionira na dno jer je on visok 15px medjutim on ga stavlja na neko, meni, nelogicno mesto, gde gresim?

[Jenkiduduldu]

Markez kaže:

Pocetnik sam sa CSS-om pa mi je potrebna mala pomoc oko okvira <div> tag za pozicioniranje sadrzaja na strani. Napravio sam glavni okvir u kome ce se nalaziti sav sadrzaj 640x480. I posto sam koristio rezoluciju 1024x768 pozicionirao sam ga 192 pixela od leve strane. U Operi to tako i prikazuje medjutim u IE ga lepi za levu stranu. Zbog cega se to desava i kako da to resim. I kako da kazem okviru da se uvek nalazi na sredini strane bez obzira na rezoluciju monitora?

I jos jedno pitanje, u tom glavnom okviru sam ubacio jos jedan okvir koji bi trebao da se nalazi na dnu, stavio sam relativ poziciju na 465px od vrha misleci da ce da ga pozicionira na dno jer je on visok 15px medjutim on ga stavlja na neko, meni, nelogicno mesto, gde gresim?

Stariji browseri razlicito tumace CSS i zbog toga postoji ovaj problem. Njega ces resiti citanjem tutorijala na ovu temu, ali evo jednog od nacina da resis problem, napravis CSS fajl koji ce sadrzaj lepo prikazivati u mozilli, pa onda napravis css fajl koji ce sadrzaj lepo prikazivati u IE-u, zatim na stranici koja ce koristiti ove CSS-ove, prvi linkujes recimo css za mozillu a onda ispod njega u uslovnom komentaru (informisi se o ovome) ubacis lin za IE-ov CSS. Ovo u prevodu znaci, mozila ce videti svoj CSS link, dok ce IE videti oba ali ce procitati drugi, jer se nalazi ispod prvog, a drugi stavljas u uslovni komentar da ga mozila ne bi video. Ali kao sto rekoh kada ovo savladas, postaces vrhunski web programer.

Nisam siguran za relative poziciju ali uradi uz pomoc absolute, ona ce raditi sigurno, i ne zaboravi Z-Index.

[holodoc]

Jenkiduduldu kaže:

Ovo u prevodu znaci, mozila ce videti svoj CSS link, dok ce IE videti oba ali ce procitati drugi, jer se nalazi ispod prvog, a drugi stavljas u uslovni komentar da ga mozila ne bi video.

U stvari i Mozilla i Explorer će pročitati kompletan CSS sadržaj u eksterno linkovanom fajlu ali caka je u tome da CSS ima tu osobinu da je CSS osobine bilo kog selektora kasnije moguće u svakom trenutku redefinisati. Trik sa uslovnim komentarom je u tome da samo Explorer koji ga razume učita drugi fajl koji prepisuje postojeće opise selektora za Explorer i samo za Explorer.

U suštini uslovni komentari su nepoželjni a posebno kompletno definisanje dva potpuno različita eksterna CSS fajla. Razlog je jednostavan.... Nepotreno dupliranje selektora koje može da izazove zbrku. Ako se selektori već redefinišu onda treba uslovno uključeni CSS koristiti samo kao neku vrstu patch-a originalnom koji će "patch-ovati" izgled pojedinih selektora tako da odgovaraju Explorer-u.

E sad... Pravi profesionalci znaju kako da izbegnu potrebu da koriste dovijanja tipa uslovnih komentara da bi postigli "sličan" izgled stranica u browserima. U prethodnoj rečenici sam namerno rekao "sličan" zato što sam zastupnik ideje da ne treba manijakalno težiti da u svim browserima jedna te ista stranica mora da izgleda apsolutno stopostotno isto. Po meni sasvim su dozvoljena odstupanja koja ne utiču na funkcionalnu i estetsku vrednost. Dakle, cilj je naučiti kako sa što manje muka napraviti što kompatibilniji (ne mora da bude stopostotno kompatibilan) kod za sve browsere. Kada se nauče cake tipa da se na kontejnerima nad kojima su definisane dimenzije nikada ne definiše padding ili margina, kada se nauči da se nad float-ovanim objektima nikada ne koriste margine, kako se koriste "faux" modeli itd. lakše je

Dosta mog mudrovanja.

@Markez

#glavniKontejner {
    position:absolute;
    top:50%;
    left:50%;
    width:640px;
    height:480px;
    margin-left:-320px;
    margin-top:-240px;
}

ili recimo ako ti je potrebno samo horizontalno centriranje

#glavniKontejner {
    width:640px;
    height:480px;
    margin:0 auto;
}

Što se objašnjenja tiče preporučio bih ti stvarno da veoma pažljivo proučiš kako se koriste različite vrste pozicioniranja.

[Jenkiduduldu]

Holodoc je kazao:

#glavniKontejner {
    position:absolute;
    top:50%;
    left:50%;
    width:640px;
    height:480px;
    margin-left:-320px;
    margin-top:-240px;
}

li recimo ako ti je potrebno samo horizontalno centriranje

#glavniKontejner {
    width:640px;
    height:480px;
    margin:0 auto;
}

@Holodoc
Da li bi mogao da objasnis razlike (prednosti i mane ako ih ima) ova dva primera koja si naveo. Ja licno nikada nisam koristio ovaj prvi primer sa negativnim marginama, sta se dobija ako koristimo prvi primer a sta ne i obradno?
Sta su "faux" modeli?

[holodoc]

Osnovna razlika između prvog i drugog primera je u tome što prvi primer vrši i horizontalno i vertikalno centriranje dok drugi vrši samo centriranje po horizontali.

Generalno, prvi primer sa apsolutnim pozicioniranjem je dobar iskljčivo kada su poznate dimenzije bloka koji se centrira. Dakle, u gornjem primeru je dato da je blok 640x480 piksela i u tom slučaju je moguće koristiti ovakav vid pozicioniranja. Ovo je tzv. relativno pozicioniranje tj. sadržaj se uvek nalazi u strogom centru stranice i nije kao što sam rekao pogodan kada nisu poznate dimenzije bloka koji se centrira.

Drugi primer centrira stranicu isključivo po horizontali koristeći opciju automatskog definisanja margina levo i desno na vrednost auto. Prisetite se skraćenog oblika definisanja margina u obliku margin:0 auto. Ovaj oblik skraćeno kaže da je gornja margina 0, desna auto, donja 0 i leva auto (redosled je izuzetno važan).

Kod "faux modela" je najpozantiji "faux column". Model se koristi kada se u kreiranju CSS layout-a koristi float-ovanje div-ova. Problem sa float-ovanim kontejnerima je da oni izlaze iz konteksta stranice i uopšte ne utiču na ostatak "flow-a" stranice pa recimo kontejner koji ih sadrži se ne širi po visini automatski. Tada se primera radi koristi "faux column" gde se kao pozadina kontejnera koji sadrži float-ovane kontejnere postavlja slika koja "lažira" pozadinu kolone koja treba da prati visinu ostalih kolona Možda je ovo zvučalo malo komplikovano ali evo par primera i objašnjenja.

http://www.ilovejackdaniels.com/css/...iquid-layouts/
http://www.communitymx.com/content/a....cfm?cid=afc58

"Faux columns" ima i mana zbog kojih nije pogodan za korišćenje u mnogim situacijama. Primera radi kod tzv. liquid dizajna sa izmenjljivim dimenzijama prozora nije pogodan.

U suštini najbitnija stavka u celoj priči je početi razmišljati na CSS način kod dizajna layout-a tj. pokušati pobeći od potrebe da se layout "slice-uje" pa uklapa u jednu celinu i tako to. CSS može umnogome da olakša rad na izgledu sajta ali ako se ne koristi na pravi način web dizajner jednostavno neće videti sve njegove prednosti. Takođe... Neiskusni ili za njihovo dobro previše iskompleksirani web dizajneri imaju običaj da bez ikakvog argumenta pljuju po tabelama pa tako i sebi i drugima (nekorisnim savetima) zagorčavaju žovot pokušavajući po svaku cemu da imitiraju tabele CSS-om. To je ogromna greška! Tabele ponekad umeju da umnogome olakšaju rad ali ih treba koristiti isključivo za tabelarni prikaz sadržaja koji bi po prirodi bilo lakše na taj način predstaviti.

Toliko od mene za sad