Dnevnik eklektika - Piše Dragan Babić

Layout - tri kolone i mnogo više problema

Šta je meni trebalo?

Bio sam u potrazi za layoutom koji ima tri kolone (sidebar + glavna + sidebar), s tim što je samo glavna kolona (srednja) fluidna – dakle širi se i skuplja u zavisnosti od širine viewporta browsera. Ovo nije toliko zeznuto napraviti, znam, ali takođe jedan od zahteva mockupa je bio i full width footer. U drugim okolnostima bih dao levu i desnu marginu glavnoj (srednjoj) koloni u vrednosti širina sidebarova, a same sidebarove bih pozicionirao apsolutno, ali kada je u pitanju full width footer bilo bi problema u slušaju kada glavna kolona nije najduža, tj. sidebar (ili oba) bi se „prelili” preko footera što očito nije prihvatljivo. Ovu metodu (sa apsolutnim pozicioniranjem) sam koristio ranije, i koristim je vrlo često kada to dizajn dozvoljava jer je ona po meni najčistije rešenje ovog problema, ali ovde to nije bilo moguće.

I tako nađem ti ja željeni layout, pregledam kôd i čudim se kako je tako jednostavno rešen ovaj problem i kako se ja nisam toga setio – ili kako barem ne znam za tu metodu pozicioniranja elemenata. Sve je savršeno – i markap, kao i savršeno logičan, ali pomalo neobičan CSS. Tehnika koristi dosta negativnih margina na koje se zaista treba navići, a ja ih baš u poslednje vreme dosta koristim i mogu reći da baratam prilično dobro sa njima. Utom se setim da mi je ova tehnika čak i poznata od negde i setim se da sam nešto slično već koristio, i to na herbiv.orgu. Princip je isti, možda se malo razlikuje negde, i onda se setim da taj princip ne funkcioniše u IE. Maler… Iz tog razloga herbiv.org u pregledan iz IE ima totalno drugačiji layout. Da bih proverio pogledam primer sa LayoutGala u IE i vidim sve radi, kontam mora da sam ja nešto zeznuo kada sam kodirao herbiv.org.

Problemi – here we go…

Krenem ja da „primenjujem” svoj dizajn ovom layoutu i sve ide lepo u Firefoxu, uvek sve prvo komplet napravim u Fx i tek onda peglam za IE. Završim ja sve u Fxu i otvorim templet iz IE da vidim kolika je šteta – kad imam šta da vidim. Isti problem koji sam imao ranije na herbiv.orgu, preslikana situacija. Pogledam originalni primer iz IE – sve radi savršeno. Uopšte mi nije jasno o čemu se radi. Da bih ilustrovao pogledajte originalni primer, a potom pogledajte isto to samo malo prilagođeno mojim potrebama.

Posle malo proučavanja skontam da je problem u stvari u horizontalnom paddingu koji sam dodao na body. Posle još malo proučavanja i igranja, dođem do zaključka da IE neće da se igra uopšte kada se horizontalni padding doda na bilo koji „wrapper” element (pokušao sam da dodam i div odmah posle body).

Tu sam se totalno iznervirao jer sam očekivao „out of the box” rešenje koje će mi olakšati problem i skinuti muku s vrata – a pokazalo se da mi je samo nabacilo još veće probleme. Utom krenem da hakujem kôd za IE i naravno pronađem rešenje. Pogledajte primer koji radi i u IE bez problema, horizontalnih scrollbarova i ostalih kompromisa.

Objašnjenje rešenja

Evo za vas koje mrzi da kopate po kôdu (znači 99% ljudi, uključujući mene – nema ništa gore od članka bez demoa ili primera).

Iz nekog razloga IE nije dozvoljavao horizontalne paddinge i margine na „wrapper” elementima koji bi trebali da obezbede malo razmaka od ivica viewporta browsera (uključujući i body element na koji sam ja primenio padding). Uz malo čačkanja video sam da kretenski browser dodaje ovoj margini od -100% tačno duplu vrednost paddinga od „wrappera” (u ovom slučaju body) koji sam stavio da bude 30px – dakle 60px. IE računa tu marginu kao -100% i na tih -100% doda još 60px. Isprva sam pomislio da je do double float margin buga, ali nije to, kada se primeni display:inline; na #extra i dalje ostaje 30px viška. Kada sam video da nije to, jednostavno sam dao sledeće na #extra:

#extra{ position:relative; right:-60px; }

Potom sam skinuo padding sa body i dodao jedan element #content pomoću kondicionalnih komentara tako da ih vidi samo IE6, i na njega primenio margine u vrednosti paddinga koji je prethodno dodat na body – margine jer je padding proizvodio horizontalni scroll.

Voila – rešen problem!

Zaključak

Ne verujem da su sva gotova rešenja loša, samo 99% njih jeste. Jednostavno mislim da su većina njih pisana samo da bi bila napisana, to nije kvalitetan kôd i nije testiran. Za ovo kratko vreme koje sam proveo sa ovim layoutom sam siguran da radi u IE6 ( najverovatnije i 7 +upravo potvrđeno, radi IE7, hvala Aci+), Firefox i Opera. Ako neko ima pristup drugim browserima molim da pogledate i eventualno pošaljete neki screenshot ako ima problema. Slobodno možete koristiti ovu korigovanu verziju holy grail layouta ukoliko imate zahteva za njim.

• « Blogodak preview
• Trulexana »

Komentari na ovaj unos 8

1. Marko Bijelić kaže 20/11/06 09:26 PM

   Tu predefinisani layoutovi su užas, ja sam ih se odavno ostavio. Uglavnom, ista priča kod mene. Imaš blank ekran u editoru, frka je vremenska, smara te da “pišeš” layout izpočetka, pogledaš na tim layout sajtovima šta ima, izaberaš onaj koji ti odgovara i kreneš. Svi oni po defaultu izgledaju dobro i u IE6 i FF, ali brate, ja promjenim jednu stavku totalno mi se zezne layout, pa onda hakujem CSS dva sata i razmišljam jer sam ja toliko nesposoban, ili šta je. Onda milion drugih problema kad koristiš tuđi kod, od načina zapisivanja, korišćenja jedinica, sortiranja svojstava, i svašta još nešto. Imam osjećaj da su oni po defaultu svi ušminakini da izgledaju dobro dok ne kreneš da ga edituješ.

   Meni u kodiranju neki CSS znalci zamjeraju što koristim previše floatovanje i nekad pišem nešto u tri linije, što se može napisati u jednoj. Ja poučen svojim iskustvom kodiram na sebi karakterističan način, čime u startu svedem IE6 probleme na minimum, jer već po navici znam kad će se koji problem pojavitii i kako da ga eliminišem. Ali IE6, ne bi bio IE6, tako da bukvalno na svakom projektu koji sam kodirao, uvijek mi se pojavi jedna-dva novih problema u IE6 koji produže proces za 50-100%.

   Da citiram sebe iz jednog skorašnjeg chata: ” CSS je hack na hacku. U suštini čitav CSS proces jeste hakovanje, a naučio si ga kad podrazumijevano odma pišeš hackove i misliš da je to normalno kodiranje.”

2. Nikola Denić kaže 21/11/06 12:56 AM

   ^ dobra definicija, ti se recimo Marko secas mene u skorasnjem css projektu gde sam gubio zivce i zamalo da sednem i napisem sve od nule za neki drop down problem koji mi je mrljavio layout i onda sam pribegao u js hack …to je u sustini hack nad hackom ….

   Ma sta ces kad smo obicni zidari ( jos kad bi bili slobodni :D)

3. Dragan Babić kaže 21/11/06 10:36 AM

   

   Ne bih se složio nikako sa konstatacijom da je CSS hack za hackom. Mislim i meni se tako činilo ranije, ali sada kada ga mnogo bolje poznajem, i kada sam radio neke daleko komplikovanije stvari od kodiranja običnih Web stranica (MiNGGL), ovo sve mi je “savršeno logično”. Mislim, vrlo dobro poznajem ponašanje IE6, i u mnogome znam šta da očekujem od njega u datim situacijama. Od početka pišem CSS takoreći sa predumišljajem da će to trebati da radi i u IE6, i gotovo po pravilu u 98% slučajeva ( statistički podaci su glupost – 88.5% ljudi zna to. – Homer Simpson ) jedini sadržaj IE specific stylesheetova su mi clear fixevi (famozni height:1% uz overflow:hidden), dodatne osobine za triggerovanje hasLyout – koji je ujedno i uzrok za ogroman procenat svih bugova vezanih za IE6.

4. Igor kaže 25/11/06 06:35 PM

   Nakon što sam se mučio i namučio s par stranica ( ovdje je IE u pitanju ) nekako sam skonto šta smijem radi a šta ne. Imam taj jedan način na koji mi radi stranica, da li je to sada 100% korektno s kôdom ili ne. . . ne zanima me . . . radi u FF-u, radio u IE-u i to je dovoljno. Sad kad mi netk kaže radi to ovako i radi to onako, ovoga je suviše onoga fali . . . onda probam šta od toga mogu izbacit, stavit tako da bude kako treba a da si se smučkam sve što sam napravio.

   Problemi koji se često pojalvjuju se rješavaju kod mene s clear fixom, da li je to pametno ili ne, da li se može kodirati drugčije . . . je pitanje. Sigurno se može, ali ako mi treba nešto brzo i znam kako da popravim porblem zažto da se mučim s potragom za pravim kôdom, ako imam clear opciju.

5. Goran Ratković kaže 29/11/06 03:46 PM

   Nikada ne bih rekao da ti nemaš iskustva sa IE-om koji duplira definisanu marginu ili padding, odnosno da se nisi suočavao sa tim da definišeš margin: 30px ili padding: 30px a da IE jednostavno to čita kao 60px, odnosno da iz onih razloga koje si naveo – on duplira definisane vrednosti.

   Začudilo me je zato što sve sajtove koje sam video da si uradio – pedantno su iskodirani, pedantno je urađen CSS i smatram te za čoveka koji ima dosta iskustva. Stoga, ne mogu da verujem da te je ovo začudilo :) Nadam se da nisi pogrešno shvatio.

   Elem, jedna kratka napomena – levi narandžasti box u fixed verziji malo flickuje prilikom resize-a, i hoće da potpuno nestane u određenim situacijama. Pogledaj u IE6, mislim da ćeš videti istu situaciju.

6. Dragan Babić kaže 29/11/06 04:12 PM

   

   @ Goran:
   Naravno da sam upoznat sa double float margin bug-om, ali to ovde nije bio problem. :)

   Problem je u tome što narandžasti box (extra) nema horizontalnu marginu, već je ona “nasleđena” od wrapper-a.

   Inače padding se ne duplira nikada – samo margina i to uvek ona u kom smeru je element floatovan. Ako se neko prvi put susreće sa ovim problemom – rešenje je jednostavno dodavanjem display:inline osobine na problematični element.

7. Goran Ratković kaže 30/11/06 08:03 AM

   Eh, znači u tom grmu leži zec. Onda sam ja pogrešno razumeo tvoj post :) A trudio sam se da ga pročitam što je detaljnije moguće, ali eto šta se dešava kada ljudi vrlo brzo kliknu na example koji si dao i zaključe pogrešno stvari, jel’te?

   Sorry :)

8. Dragan Babić kaže 30/11/06 09:15 AM

   

   Ma nema problema, sve je dobro. ;)

Komentari su zatvoreni za ovaj unos.