mi3dot bez tablica - right here :)

[Sulien]

Daklem, ovo bi bio moj božićni poklon našem Dimitriju i svima vama... Budući da se toliko navlačimo sa tim CSS-om na forumima, raspravljamo o korištenju tablica ili css-a, prepucavamo se tko što može i tko što zna, kakvih hackova ima i da li se uopće isplati (a i žao mi je što se ne priča o accessibility-u previše), prezentiram vam ovo kao polu-dokaz i ohrabrenje svima što se tiče korištenja css-a.

Prezentiram vam Dimitrija samog (točnije, jednu stranicu - galeriju) kompletno u CSS-u. Tables thrown out the window Interesiralo me da li se može, kako će izgledati, koliko će biti manji itd. The result is here:

Sulien painfully wrote:

http://nippur.irb.hr/~mislav/mi3dot_makeover/ - browseri koji nisu Firefox neka čitaju niže prije klikanja - ne klikajte na linkove... ništa ne vrijede (osim par u footeru) - no SWF... another time

Ne vjerujete? CTRL+SHIFT+D ako imate Developer Toolbar
Ni ja više nisam znao koji je koji kad sam radio zadnje preview-e

Report:

Code:

Browser friendliness: testirano u Firefoxu, IE/Win 6 prolazi koliko toliko    Netscape, Opera, Safari: nemam ih... sorry :(    IE 5.x: nemojte ni pokušavati - to će biti užas    IE 6: naći ćete neke ružnoće, pogotovo na pozadini 'featured' radova... blame M$, not me Size reduction: veličina html-a smanjena na manje od trećinu, CSS se povećao za svega 2KB CSS level: bio bi level 1 da nije dva elementa koja imaju apsolutno pozicioniranje mi3 banners: apsolutno sam ih pozicionirao u dno gdje originalno i jesu, no ipak, ova metoda je skroz glupa i ne preporučam je... ako netko zna bolje, neka mi pliz javi Hack count: 2    razlog: izbjegavao sam hackove sve do samog kraja kad sam bio prisiljen napisati *dvije* linije posebno za IE6 da se ipak potpuno ne raspadne Accessibility: morao sam napraviti par sitnih kompromisa kako bih zadržao originalan izgled dimitrija, što je bio prioritet... Najviše pljujem po accessibility-u što i dalje koristim 11px fixni font - ali vjerujte, drugačije nije moglo, barem ne u ovom slučaju... Unatoč svemu vjerujem da je sajt sada prilično accessible, prolazi većinu točaka 508 i wcag-aaa, a ostale neću ispravljati jer je ovo samo test Hours spent: many... dva dana rada (uglavnom prepisivanje sadržaja, c&p doesn't quite cut it from tabled layout :)

Eto Svi komentari su poželjni, svaka primjedba dobrodošla. Volio bih vas moći ohrabriti da naučite nešto iz ovog CSS-a, ali toliko se na kraju izdužio da će ga samo oni najuporniji (i najmazohističniji) moći stvarno proučiti... Inače, elementi se u CSS-u pojavljuju kako dolaze i u HTML-u, to možda malo olakša stvar.

I da... Merry xmas

[emptyhead]

THX!

Genijalno, ali... (ovakav pocetak recenice obozavam... )... saxa u IE6 kao sto si i napisao - ne tolko kolko u ie5 al ipak je neiskoristivo ko cjelina.

Ono sto je najvise mrak je to sto si vjerojatno bacio rukavicu u lice ostatku css bulterijera i mahaca rukama i da ce na kraju se mi3 prebacit kao "open source css" projekt ... erm... u css skroz .

Jos jednom, svaka cast na trudu, hrabrosti i rezultatu!

[Peewee]

je ti se seksualni zivot poboljso nakon ovog?
trebo bi sigurno!!!
svaka ti dala....

zakon su teme na forumu

[identity]

brawo majstore!
Cak sam sad nesto od tebe naucio ..
ja se vec jedno vrijeme zajebavam sa css-om za jedan malo poveci site - portal ... tako da te u potpunosti kuzim .. u svakom slucaju brawo.

[ante]

"1450 registriranih i jedan gost (looser "

[F@NTOM]

Svaka cast!
Dobio sam tolko nadahnuce da i ja nest ovako napravim.
You d man!

[Sulien]

emptyhead wrote:

...ali saxa u IE6 kao sto si i napisao...

Ako treba dokazati da se može sredit, mogu probat
Sad nisam jer, rekao sam, ne volim hackiranje

Mene zanima da li se drži u Opera/Safari

[maratz]

emptyhead wrote:

Ono sto je najvise mrak je to sto si vjerojatno bacio rukavicu u lice ostatku css bulterijera i mahaca rukama i da ce na kraju se mi3 prebacit kao "open source css" projekt ... erm... u css skroz .

Ma nemrem vjerovat zar na praznik??!!1

Sulien wrote:

Ako treba dokazati da se može sredit, mogu probat Sad nisam jer, rekao sam, ne volim hackiranje

Dokazao si well enough. Prvo što bi trebalo popraviti je promjeniti <hr/> u <hr />, a nakon toga kompletno izbaciti <hr /> Pošto je Krismas -- clearanje floata se radi definiranjem floata za parent element, dakle umjesto

Code:

.nutra { float: left; } <div class="vani">    <div class="nutra">    </div>    <hr /> <!-- <br /> or similar trendy shit --> </div>

treba

Code:

.vani { float: left; } .nutra { float: left; } <div class="vani">    <div class="nutra">    </div> </div>

, pa će ovaj 'nutra' širiti ovog 'vani'

Nemoj se toliko zamarati prilagođavanjem, nego još malo popravi sve to skupa za FF. Npr. puca kod resizeanja slova.

Sulien wrote:

Mene zanima da li se drži u Opera/Safari

Ne, a vjerovatno ne radi niti na IE5.2

[vedran]

Sulien wrote:

Daklem, ovo bi bio moj božićni poklon našem Dimitriju i svima vama...

Respect

[Sulien]

marac wrote:

dakle umjesto Code: .nutra { float: left; } <div class="vani">    <div class="nutra">    </div>    <hr /> <!-- <br /> or similar trendy shit --> </div> treba Code: .vani { float: left; } .nutra { float: left; } <div class="vani">    <div class="nutra">    </div> </div> , pa će ovaj 'nutra' širiti ovog 'vani'

HR-ovi nisu za clear Ali jedan paragraf ("All clear") i jedan list item (&nbsp;) jesu, probat ću ovo tvoje - thnx

Quote:

Nemoj se toliko zamarati prilagođavanjem, nego još malo popravi sve to skupa za FF. Npr. puca kod resizeanja slova.

Pokušao sam, ali ne može se sve do beskonačnosti... No, dva puta se ipak može povećati font da layout ostane skupa, nakon toga se naravno raspadne kad svaki drugi element brejka iz svog containera - čak i da se ne raspadne, ne bi više bilo čitljivo

Najnezgodnije sređeni elementi su, naravno, radovi (thumbovi uz informaciju ispod) - bilo bi jednostavnije da nisam htio paziti kako bi to izgledalo bez css-a (text-based browseri), ali budući da jesam kombinirao sam spanove i divove tako da je css na tom dijelu dosta kompliciran, npr. IE totalno poludi sa marginama (smanjio ih prvim hackom) a vjerujem i drugi browseri

[Ivan Brezak Brkan]

Bravo Mislave!! Mislim, lud si ko šiba ali volimo te mi svi ma kakav bio ^^

[ars]

Fortius wrote:

Bravo Mislave!! Mislim, lud si ko šiba ali volimo te mi svi ma kakav bio ^^

[njava]

emptyhead wrote:

Ono sto je najvise mrak je to sto si vjerojatno bacio rukavicu u lice ostatku css bulterijera i mahaca rukama

gg sulien!

[zweistein]

Eeeeeerm... Massive respect i nek' ti za ovo ispod bora osvane nešto jaaaaaako lijepo . Lud lud lud lud .

[kelso]

Svaka čast!

[random]

Peewee wrote:

je ti se seksualni zivot poboljso nakon ovog? trebo bi sigurno!!! svaka ti dala....

[Sulien]

Peewee wrote:

je ti se seksualni zivot poboljso nakon ovog? trebo bi sigurno!!!

Ne, pogoršao se

Ne kužim, zar ne vrijedi ono "chicks dig CSS"

[/dev/null]

Malo se ovaj CSS ne voli sa operom 7.54, ne da ga ne renda dobro nego je malo reci...

[djuk17]

Respect

[bozob]

nAhSud wrote:

Respect

[aesqe]

opera (8 beta i 7.23) - manje vise izgleda dobro, par sitnica je mozda drugacije alignano ali to ne utjece na cjelinu, tako da sve izgleda "k'o pravo"

ie6 (xpsp2) - ja vidim samo dva problema: ne prikazuje se pozadina ispod prvog reda "izdvojeno" i "pretrazi" box se nakon loadanja stranice cini raspadnut, a onda se sam sredi (?). sve ostalo mi je ok.

ovo gore sve na 'od oka' procjeni, nisam htio bio picajzla

mac nemam, ali ak se netko moze sjetit onog sajta za testiranje prikaza u raznoraznim browserima... ?

svaka cast, sulien! odlican posao

[Sulien]

/dev/null wrote:

Malo se ovaj CSS ne voli sa operom 7.54, ne da ga ne renda dobro nego je malo reci...

aesqe wrote:

opera (8 beta i 7.23) - manje vise izgleda dobro, par sitnica je mozda drugacije alignano ali to ne utjece na cjelinu, tako da sve izgleda "k'o pravo"

e sad... tko je u pravu?

vidim da ću ubuduće morat imat instalirano što više browsera ako hoću radit nešto ozbiljno, neću uvijek moći pitat vas za feedback

Quote:

mac nemam, ali ak se netko moze sjetit onog sajta za testiranje prikaza u raznoraznim browserima... ?

e, da, pliz

[Peewee]

Sulien wrote:

Peewee wrote: je ti se seksualni zivot poboljso nakon ovog? trebo bi sigurno!!! Ne, pogoršao se Ne kužim, zar ne vrijedi ono "chicks dig CSS"

coece ja sam dobio samo zato jer sam to vidio i reko da te znam s foruma

[maratz]

Safari: http://www.danvine.com/icapture/

[Sulien]

@peewee:

@marac: whee!