DevProTalk

DevProTalk (http://www.devprotalk.com/index.php)
-   (X)HTML, JavaScript, DHTML, XML, CSS (http://www.devprotalk.com/forumdisplay.php?f=8)
-   -   CSS vs Table - old story, but (http://www.devprotalk.com/showthread.php?t=653)

misk0 10. 02. 2006. 18:46

CSS vs Table - old story, but
 
...
Oki, vjerovatno smaram ali mozda se nekome i bude dalo odgovoriti.
Naime, procitao sam i citam kako tabele ne treba koristiti za definisanje dizajna sajta, vec za ono sto su namjenjene tj tabelarni prikaz podataka.
CSS opet postoji bas za vizuelnu prezentaciju i tako to.
E sad, sve je to super medjutim u zadnje vrijeme se intenzivnije bavim HTML kodiranjem i pokusavam 'pratiti standarde' pisuci kod u CSS only, tj tabele bas upotrebljavam gdje im je mjesto.
Medjutttttttimmmmmmm
Ja se ubijem dok napravim da to jednako izgleda u svim browserima, da se jednako rasteze, skuplja, siri ... dok bih sa tabelama to rijesio za mnogo manje vremena i sto je najgore - izgledalo bi ISTO.
E sad, dajte mi vashe razloge zasto CSS a ne tabele? Ali molim prakticne razloge, vrijeme, efikasnost a ne 'to je po standardu ispravno'. J%$#%# standard kad ga niko ne postuje (mislim na browsere) i moramo opet vracati se 10 godina unazad kad je bilo IF IE then, else NN then.
Na kraju krajeva klijentu ce izgledati isto, nisam jos naishao na zahtjev CSS only (dobro, jesam na nekim konkursima, ali rijetkkooooo) a meni ce zivot biti laksi.

Buduci da ovde ima poprilicno ljudi koji zive od web-a nadam se da ce neko smoci snage da napishe koji red.

pozdrav

nixa 10. 02. 2006. 18:53

pa ako protalasaš forum ,videćeš da ovde postoje 2 struje ... oni koji žive da im kod bude validan .. i oni koji žive od toga kako im sajt izgleda ....

u suštini .. moj ti je savet da radiš kako ti je najlakše .. meni u nekom delu Css ubraza rad , i toliko ..ali ako baš zapnem oko nečega ... tu je stara dobra tabela ..

Pedja 10. 02. 2006. 18:53

Imam potpuno ista isksutva. Koriscenje CSS-a je nevidjeno maltretiranje. CSS je u principu OK, ali cela stvar sve vise lici na kodiranje nego na dizajn. Kod lici kao da je predvidjen da ga generise neki vizuelni alat, a ne da treba ziv covek da ga ukucava.

U svakom slucaju, mnogo je lakse tabelom resiti neke stvari nego se petljati sa CSS-om. Ja i inace nemam problem fiksacije na CSS, i ne smatram da je pogresno korstiti tabele, ako se to radi na opravdan nacin.

misk0 10. 02. 2006. 19:11

Mislim na kraju uspjevam da rijesim da napravim kako sam zamislio, rijetko kad pristajem na kompromise, ali za svaki jebeni browser moram praviti hackove, te verzije kod IE-a su prica za sebe, \{} !important, html>element ....
Imam osjecaj da previshe vremena gubim da bih napisao kod koji ce biti isto interpretiran u svim browserima, a na kraju taj kod je pun nekih zbunjoza, ponavljanja stavki, predefinisanja, drugacijih dimenzija, overridovanja prethodni vrijednosti - poslednje na sta lici je 'cist, ispravan kod'.

Dragan Babić 10. 02. 2006. 19:13

Ukratko:
- "agilniji" markup, fleksibilniji je
- daleko lakše snalaženje po istom i njegovo održavanje
- mogućnost lakog manipulisanja vizuelnim dizajnom lokacije, podložan je promenama koje se daju napraviti sa malo dodatnog rada
- kada koristiš tabele (i tabele u tabelama) na kraju završiš sa više markupa nego sadržaja
- lokacija kod koje imamo jasnu separaciju tri osnovna sloja (prezentacija, sadržaj i ponašanje) je preglediva od strane svakog uređaja koji ume da parsira HTML
- pretraživači više vole lokacije koje sadrže semantički korektan markup
- povećava se dostupnost i ljudima sa specijalnim potrebama i disabilitetima (pitanje koliko je ovih, ali ja ne volim diskriminaciju, a bilo bi mi drago da znam da sam na primer nekom slepom omogućio pregledanje nekog sadržaja)

Do tebe je kada i u kojoj meri ćeš usvojiti i dalje primenjivati ove preporuke w3 konzorcijuma.

Ako te nedoslednosti u browserima brinu, imaj u vidu da kada se savlada CSS, one i nisu toliki problem jer su baš dobro dokumentovane. Znaš od koga šta da očekuješ i kako da prilagođavaš. Dokle god je IE-a imaćemo "if IE > this, else > that", sedmica (IE7) obećava, ali definitivno neće imati zavidnu podršku standarda.

Ilija Studen 10. 02. 2006. 19:26

"Kick ass" veštine dolaze sa iskustvom, a frustracije dolaze iz odsustva (dovoljne količine) istog. Samo polako ;)

Pravi problemi među browserima nastaju onog trenutka kad hoćeš nešto što nije implementirano u sve (ili dominantne) browsere. Primer je alpha kod PNGova, neki zanimljivi selektori, background sastavljen od više slika, napredniji border itd. Ostalo je sve stvar rutina, poznavanja mesta gde se broseri "sapliću" (šta je peekaboo i šta raditi kad naletiš na njega, kako izbeću ružne box model hackove itd.) i sitnih trikova koje pohvataš radom.

Prednosti CSSa u odnosu na tabele?

1. Markup je čist.
2. Sutra se naljutiš i razbacaš blokove na sve strane uz pomoć par jednostavnih pravila. Ili dođe klijent i zatraži to od tebe (da pretumbaš stranicu do neprepoznavanja)...
3. Kad dođeš u kick ass fazu onda vidiš koliko je stvarno drugi pristup teži i nezgodniji. Ne može se objasniti, mora se dotle doći...

Samo jednostavan savet: polako i sve će doći na svoje.

PS: Baš juče sam ubacivao banere u jedan PHPBB forum. Ne mogu da razumem ljude kojima je To jednostavnije i logičnije. Uvrnuto ;)

misk0 10. 02. 2006. 20:08

Hm ... 'kick ass' i iskustvo ..... ne znam koliko zezanja jos moram da prodjem da bih se osjecao tako.

Slozio bih se sa nekim stvarima, ali sa nekim bash i ne bih.
Da je sve 'preglednije' jeste, ako si ti pisao, ali ako citas tudji kod daleko se teze snaci (bar meni) sa CSSom nego sa tabelama.
Sa tabelama znas da je prvi <td> uvijek prva lijevo celija te tabele, a kad naletis na nekoliko <div> elemenata u zavisnosti od float i display parametara moze biti ko zna gdje na ekranu. Znaci meni je lakse skontati tabelarnu nego CSS strukturu.
Slazem se da je lakse izmjeniti izgled sa CSSom nego sa tabelama, ali ako te klijent dovede do toga isto tako moze znaciti da ste nesto prethodno zeznuli u izgradnji sajta, jer se klijentu prvo pokaze dizajn na koji pristane pa tek onda ide na HTML kodiranje.

Isto tako, mogu da primjetim da u poslednje vrijeme svi ti browser-hackovi imaju neka svoja imena i lakse ih je 'upoznati' jer postoje vec tone clanaka na netu. Prije godinu - dvije osim box-hack modela ne sjecam se da su postojali izrazi poput peekaboo... (i jos mozda 2-3 koja ne mogu trenutno da se sjetim).

Mada, to dovijanje me nekako najvishe zivcira. Trudis se da napravis nesto kako spada, napravis nekako i onda se pojavi korisnik sa IE 5.0 ili nekim starim NN, Safarijem ili ko zna cime i pogledas da to u tom browseru izgleda uzassno.

Na koliko se browsera limitirate pri izgradnji CSS? Mislim i na razlikama u verzijama koje su recimo najvishe izrazene u IE.

Zero-Cool 10. 02. 2006. 20:28

Znaci Dragan i Ilija su ti dali konkretne primere, tj razloge zbog cega je bolji CSS u odnosu na Tabele, ti mislis da je brze napraviti dizajn sa tabelama, ali se mnogo varas, jer kad udjes malo u fazon sa CSS-om tj kad bolje ovladas njime shvatices da se neke stvari ponavljaju, pa ces moci da ih koristis na vise mesta i time ces ubrzati svoj rad, a da ne govorim o tome sto za odrzavanje tabela treba jako puno vremena, a da prebacis blok sa jednog mesta na drugo ponekad zahteva i pisanje tabele ispocetka. Dok je CSS mnogo laksi po tom pitanju i ne stvara glavobolje.

Sto se tice browsera mislim da je dovoljno da pokrijes 2-3, eventualno 4 browsera, neki ljudi proveravaju kroz daleko vise, ali sto vise browsera za proveru koristis to ce ti se desavati da ces terati sebe da ti sajt bude perfektan u svima, sto je mozda dobro.

Tako ces nauciti dobro da hackujes CSS :D

Dragan Babić 10. 02. 2006. 21:42

@ Misk0:

Mogu ti reći (pretpostavljam) Miško da sam ja totalno izbacio hackove iz upotrebe. Mora uleteti kad-tad posebna osobina (ili stylesheet :)) za IE, ali ostalo je sve čisto. I to za IE se odvoji u poseban fajl sa uslovnim komentarima i nema zezanja. Središ svoje skilove, cepaš CSS onako kako ti je najlakše i sve će ići i brže i lakše.

Što se tiče onog što si napisao (parafraziram) "uvek znaš da je prvi td prvi s leva", to je do tvog načina razmišljanja koji mora da e promeni ukoliko želiš da pređeš na tableless dizajn.

Nedavno sam napisao nešto što bi se moglo pomenuti, a to je da treba razmišljati u "golom sadržaju", znači nestilizovanom. Logički ređati elemente po "težini" redom i onda nema da brineš. Isto tako uvek gledaš koji element je najprikladniji za predstavljanje kog sadržaja. To je ono što se zove semantika, sa čim ljudi imaju problem i što teško prihvataju.

Ne govorim ja da je moraš prihvatiti, nemoj me shvatiti pogrešno, Goran (bluesman) prvi nije pristalica tog principa i vidi gde ga je sada--čovek kupio gajbu, ima svoj biznis, k'o bubreg u loju. :)
Off Topic: (ovo je šala malo da razbijem tehnikalije u ovom odgovoru, nadam se da niko neće shvatiti ozbiljno) ;)

misk0 10. 02. 2006. 22:08

Dragane hvala i tebi i ostalima na odgovoru, meni treba samo malo vishe motivacije da nastavim da se borim do kraja. Problem je sto svoje rezonovanje svodim na razumno a ne 'kako selo prica', pa zbog toga pokusavam naci neka realna i uvjerljiva opravdanja.

Zero-Cool 10. 02. 2006. 23:10

Ja mislim da realnija opravdanja nisi mogao dobiti u samo 6 odgovora :D

Ilija Studen 10. 02. 2006. 23:40

Jako bitna stvar koju je Dragan spomenuo: prirodan tok dokumenta koji je podređen sadržaju, ne dizajnu (najklasičniji oblik odvajanja sadržaja od prezentacije). U poslednje vreme uzmem stranicu, isključim stilove i ako dokument izgleda normalno sa pravilnim rasporedom sadržaja, naslova, formi tek onda krećem sa dodavanjem / izmenom stilova. U suprotnom prvo tumbam markup da bi dobio dokument koji bez stilova izgledao kako mislim da je najprirodnije.

Tako nešto sa tabelama nije moguće postići, a bitno je kako zbog pretraživača tako i zbog različitih uređaja i preglednika.

Što se tiče toga da se teško snaći jer često ne znaš koji blok šta predstavlja i čemu služi za rešavanje tog problema postoje alati tipa WebDeveloper. Samo pogledaj stavke iz Outline menija i nema zime (kombinacija Outline block level elements i Outline current element jako lepo fercera).

Pedja 11. 02. 2006. 08:22

Ma dobro ste rekli, rad sa CSS-om mu dodje ko hakovanje.... :)

bojan_bozovic 11. 02. 2006. 10:15

Brze se napravi sajt tabelama, i opet je brze napraviti sajt bez obzira na semantiku (da vidim ovde one koji koriste abbr, cite i pre tagove, molim) a valja misliti na vreme. Vreme je najdragocenije.

Ilija Studen 11. 02. 2006. 10:38

Iskreno? Sad si lupio.

Peđa je izneo svoj stav (s kojim se btw ne slažem) što je OK, ali ti izlaziš sa konstatacijom da je brže raditi sa tebalama nego sa blokovima. Imaš li čime da potkrepiš tu svoju tvrdnu? Recimo, par godina rada sa oba pristupa? Ili pak nešto ozbiljnije (neku studiju, slično...)? Sve mi se čini da izlaziš sa tvrdnjom baziranom na dva sata nerviranja oko CSSa i 3 godine rada sa tabelama što ja definitivno ne smatram kao dovoljno za izvlačenjem bilo kakvog zaključka...

CSS se čini kao jednostavan, ali zahteva vreme da bi se dobro usvojio i da bi se mogao primeniti kako treba. Stvari postaju još teže kad se prebacujete sa nekog metoda koj vam je "ušao pod kožu". To je jedna od njegovih mana. Druga velika mana je što još nije u potpunosti prošao period potpunog usvajanja od strane browsera (zahvaljujući jednom browseru koji nije doživeo update 5 godina), ali i to se menja...

Zato uvek svima ponavljam: "Polako. Sve će doći na svoje kako budete sticali iskustvo".

PS: Ova tema počinje da gubi smisao (po Xti put u istoriji čovečanstva). Svi razumemo da za prebacivanje na CSS treba vremena, da stare navike teško umiru, da tabele rade posao (novost je da kupuju stanove ;) ) itd. Ali, nemojmo se bacati sa kojekakvim tvrdnjama koje jednostavno ne stoje...

PPS: Tabele su brže kad ne znaš isto da odradiš pomoću blokova i CSSa ;)

Dragan Babić 11. 02. 2006. 10:38

Citat:

Originalno napisao bojan_bozovic
(da vidim ovde one koji koriste abbr, cite i pre tagove, molim)

Sta je s tobom covece?

bojan_bozovic 11. 02. 2006. 10:48

@Dragan

A to znaci da ih ne koristis, sto je OK (bas kao sto je OK i da ih koristis) - ako to ne uzimas u obzir ide brze, ipak :)

@Ilija

Kad imas vec gotov layout. Kad nemas pocinje hakeraj koji ja mrzim, jer nije kreativan posao.

Dragan Babić 11. 02. 2006. 10:56

Bojane, prosetaj mojim blogom i videces ih sve, ako ne i na samo jednoj stranici ako ti to ista dokazuje. Inace hocu samo da kazem--da, trudim se da oznacim (markapujem) svoj sadrzaj sto je bolje i adekvatnije moguce.

Opet ponavljam, i sebe i Iliju. Mozda (posto ste pretpostavljam programeri) se niste dovoljno udubljivali u CSS i tebleless tehnike pa tvrdite da je brze tabelama, to je logicno kada ih koristite godinama.

Evo, ilustrovacu. U mojoj nesretnoj skoli iz predmeta koji se zove (uvod u internet ii tako nesto, pazi kad ne znam ni ime predmeta) smo kao deo ispita (posto je sad kao Bolonja pa sesve polaze iz 100 puta) dobili da napravimo "sajt" od tri stranice sa linkovima izmedju "and all that crap". Kao za malu decu. I izmedju ostalog, posto profesorka koja je drzala taj predmet, uz svoje temeljno pokrivanje HTML3.2 u dvaa predavanja kaze da mora da se radi preko tabela. Jel mi verujes da sam ja to radio 30-45 minuta? Dobro nije sve otislo na baktanje sa tabelama, ali ilustruje kako se nacini razmisljanja razlikuju i kako su pristupi drugaciji.

bojan_bozovic 11. 02. 2006. 11:03

Mozda si u pravu tu, da je tebi i Iliji lakse zato sto ste navikli tako, ja i dalje branim stav da tableless layout nije bolji od layouta sa tabelama (hint: napravite dobar footer samo uz CSS koji je zaista na dnu stranice kad ima malo sadrzaja na njoj) dakle CSS layout nije "bolji" (ponekad je i losiji, eto) od layouta sa tabelama. Cak i mobilni uredjaji sasvim lepo rade i sa tabelama, ako zanemarimo prepotopne sa minijaturnim crno belim displejima koji nisu ni bili napravljeni za web. Nema razlike, sve dok se u browseru vidi, to je jedino sto je bitno. To zato sto mi non stop sole pamet kako je tableless layout bolji iz nekog razloga od tabela.

bokacbl 11. 02. 2006. 11:27

..
 
da se nadovezem..

Po meni je najbolje rjesenje (ukoliko se iole poznaje CSS) definise da li ce se sajt raditi CSS-om ili tabelama. Mislim da je to najbolje i da se na taj nacin moze ustedjeti dosta vremena a napraviti kvalitetan sajt. I onda kada radite predlog dizajna u zavisnosti tehnologije koju ste izabrali napravite odgovarajuce prijedloge.
U principu i ja sam duzi niz godina radio sa tabelama i u potpunosti shvatam sta govori bojan..(pogotovo iz perspektive vremena) ali takodje sam radio neke sajtove i template u CSS i definitivno sam ubjedjen da ukoliko se shvati sustina CSS sajtovi mogu veoma brzo da se kreiraju + sto mozes da kopiras sa jednog sajta na drugi odredjene elemente..
Tako da definitivno mislim da je CSS mnogo bolje rjesenje pogovoto za sajtove koji ne zahtijevaju neki ultra-mega-giga dizajn (letece avione kamione itd..)...

Off Topic: Ukoliko neko zeli da malo bolje upozna CSS meni je bilo najlakse tako sto sam vjezbao na Wordpress temama

Pedja 11. 02. 2006. 11:28

Citat:

Originalno napisao Ilija Studen
PPS: Tabele su brže kad ne znaš isto da odradiš pomoću blokova i CSSa

Od kako postoji elektronska graficka priprema, tabele su prirodan nacin odredjivanja polozaja elemenata na strani.

Pazi, ja potpuno shvatam i prihvatam CSS, jer je to u stvari najprirodniji nacin opisa izgleda sadrzaja, ali ne tezim ka cepidlacenju. Tabelu cu uvek da upotrebim tamo gde znam da je to sasvim razuman postupak.

Ideja da se tabela zameni stilovima je prilicno zategnuta, jer se tu u stvari radi o insistiranju da se koristi druga sintaksa za isti posao i pri tome se stvari drasticno komplikuju. Zameniti tabelu stilom znaci zatrpati se u gomile <div>-ova koji sintaknsno nisu nista pregledniji od celija tabela i nagadjanje sa raznim browserima kako ce sve to da protumace i prikazu. Kada stavis tabelu, na vrlo jednostavan nacin odredjujes polozaj elemenata na strani i to radi.

Sto se tice izmena, uopste ne stoji tvrdnja da je sa tabelama teze izmeniti izgled i rapsored elemnata. Naprotiv, lakse je, jer je ocigledno gde se sta nalazi i radi se samo o razmestanju sadrzaja po celijama. Kada koristis CSS, nikad ne znas sta od cega zavisi, sta se gde nasledjuje a sta ne, i redovno, kada premestis neki sadrzaj, nesto se u njegovom izgledu poremeti pa moras da kopas po CSS-u da bi nasao sta je problem.

A da ne pricamo o tome koliko je maltretiranje menjati izgled sajta koji je uradjen u cistom CSS, a radio ga je neko drugi. Treba ti mnogo vremena da pohvatas sta je tu sta, a ako nemas neki vizuelni alat za edit, prepravke se granice za neizvodljivim.

Ja stvarno mislim da nema smisla ocekivati od bilo koga da ima ugradjen CSS parser i rendering masinu u mozgu da bi mogao da pogledom na kod zna sta je tu sta i kako izgleda. Kada koristis tabelu, stvar je drasticno pojednostavljena.

I ja se slazem da ce za koju godinu CSS biti ok, kaa budu sredili gomilu problema i dodali gomilu propustenih osobina koje su neophodne, a u CSS ih je komplikovano napraviti i uvek je potreban neki hakeraj.

Da se razumemo, ja volim CSS pristup i koristim ga koliko god mogu, ali u nekim slucajevima, mnogo je brze i lakse staviti tabelu i resiti problem.

Blood 11. 02. 2006. 11:36

Moram i ja nesto da kazem na ovu temu. Do pre 2-2.5 meseca sam i ja bio pristalica tabela, i nisam ni hteo da se bakcem tableless-om, cinio mi se mnogo komplikovaniji, sporiji itd itd. Stalno sam pricao kako mi je mnogo lakse da iscrtam par tabela u dw-u ili cak rucno da ih napisem nego da se bakcem sa divovima. Onda sam sticajem okolnosti dobio jedan site koji je morao da bude tableless. Jeste...mucio sam se 6 sati da to izgleda isto u IE-u i FF-u(jer je to bio zahtev klijenta) pocinjao sam 5 puta iz pocetka, ma ludnica, uostalom znate i samo kako je to kad nesto pocinjete. Sada..sada sebe ne mogu da zamislim dez div-ova, i moram vam reci da je mnogo-mnogo brze odraditi tableless site, pogotovo ako dodje do nekih izmena npr: hocu blok koji se nalazi skroz dole da pozicioniram skroz gore(to je izmena 3 linije u css-u) dok bi se sa tabelama zajebavao dosta duze. Mislim sada sam dao banalan primer, ali postoje milion takvih sitnica koje cine tableless mnogo pristupacniji... A o preglednosti necu ni da pricam-mislim da su Ilija i Dragan o tome vec dosta govorili..

Toliko od mene..

POzdrav!

Dragan Babić 11. 02. 2006. 11:55

Jako puno prazne price. Bojane, takav footer se postize veoma lako cssom, (jedan od trikova je da se HTML elementu da height:100%), molim te nemoj u buduce iznositi tekve (ne)argumente, koliko mi je poznato ni jednom do sada nisi bio u pravu. Izvini ako gresim.

Pedja, i svi ostali koji prelaze na CSS, imate slucaj "div-itisa", to je prelazna faza kada ne znate sta cete sa sadrzajem i sve pakujete u div-ove. Ona prodje i posle sve ide lepo.

Molim vas argumentujte tvrdnje (pa makar i na konkretnom primeru) poput
Citat:

Originalno napisao Pedja
Zameniti tabelu stilom znaci zatrpati se u gomile <div>-ova koji sintaknsno nisu nista pregledniji od celija tabela i nagadjanje sa raznim browserima kako ce sve to da protumace i prikazu.

i ovog Bojanovog primera sa footerom.

bojan_bozovic 11. 02. 2006. 12:09

Kôd:

<html>
<head>
<body>
<div style="float:left; width:20%; border: 1px red solid">Leva kolona</div>
<div style="float:right; width:20%;border: 1px solid blue">Desna kolona</div>
<div style="width:60%;border: 1px solid blue">Sadrzaj</div>
<div style="width:100%;clear:both;position:absolute;bottom:0;border:1px solid green">Footer</div>
</body>
</html>

Pitanje br.1

Kolika visina treba biti bilo koje od kolona da se ne preklapa sa footerom.

Mozes ici sa procentima samo, a koliko je to ruzno kada imas samo npr. jedan red teksta da ne govorim - jednostavno ne radi. Ono kad imas fixed layout npr 750px sirine ja ne racunam u layout.

Pitanje br. 2

Za sta sluze float:left i float:right? Za layout ili za postavljanje slike oko koje je tekst?

Blood 11. 02. 2006. 12:25

care, ne radi se tako.

Prvo sve stavis u jedan div i odredis mu fixnu sirinu(koliko god tebi odgovara), a onda unutar njega pravis sve ostalo! :)

htedoh da ti kazem i za onu gresku width ali si me preduhitrio :)

Dragan Babić 11. 02. 2006. 12:48

Bojane, prvo i prvo, tvoj layout nece raditi, nauci W3C-ov box model. Drugo, floatove ne cistis footerom (u ovom konkretnom slucaju), nego wrapperom koji ima overflow:hidden ili auto (za IE i Operu su potrebni jos i horiz. ili vert. dimenzija eksplicitno) oko floatova. Onda uzmes i lepo postavis footer apsolutno na dno i das wrapperu donju marginu u vrednosti visine footera (u em-ovima).

Ilija Studen 11. 02. 2006. 12:59

1 Prilog(a)
Peđa, postoje alati kojima možeš da prikažeš konstrukciju stranice. Spomenuh WebDeveloper i njegove Outline alate. Pomoću njih možeš tačno da vidiš gde su blokovi i kako su raspoređeni i da vidiš njihova imena i svojstva.

Evo i primera kako to izgleda (miš je nad ALL IN THE HEAD blokom, a njegova "lokacija" u strukturi dokumenta su prikazani u status baru).

Prilog 72

Postoje još napredniji načini prikazi informacija o elementima i njih možeš naći u Display sekciji WebDeveloper ekstenzije. Takođe, uz klasičan outline možeš da kažeš da se prikaži IDjevi i klase objekata.

Što se mase divova tiče tu je Dragan već odgovorim. Ako ćemo o čistoći koda tabele prave najveći nered zbog svoje kompleksnosti. Daleko veći nered od nereda koji iz neiskustva neko može napraviti sa divovima.

PS: Bojane, tvoje tvrdnje apsolutno ne stoje. Molim te, počni da koristiš prave argumente.

bojan_bozovic 11. 02. 2006. 13:10

Citat:

Bojane, prvo i prvo, tvoj layout nece raditi, nauci W3C-ov box model.
A sta time dobijam? Upravo takvo soljenje pameti mi i smeta. Molim HTML ovde, trokolonski fluidni layout sa footerom koji se ponasa kao sto treba, inace ne idemo nigde. Cak i da cistis divove sa drugim lejerom, kolika visina kolona treba biti da ne bi nesto previse zjapilo ili se preklapalo? Ti izgleda ne znas sta je position:absolute? Kad ima vise teksta na strani bice skrola ali ce futer preko sadrzaja.

bluesman 11. 02. 2006. 13:15

Mislim da su Bojan i Peđa duboko zastranili u diskusiji. Ako, na primer, ja ne umem da napravim bicikl, to ne znači da on ne može da se napravi.

Kao čovek koji je dugo godina u DTP (ne DPT), još od 1991, puno sam radio sa stilovima u većini DTP programa (QuarkXpress, PageMaker, kasnije InDesing) i definitnvo znam svu moć stilova. Kada se CSS pojavio znao sam odmah da je to nešto što će značajno olakšati posao. Mislim da je i o tome "kako olakšava posao" puno rečeno, pa neću sada da ponavljam.

Mislim da je totalno pogrešno nazivati CSS hakeraj, kao što je pogrešan pokušaj proterivanj <table> taga od strane ovih drugih. Gledam kako preteruju i CSS-fanovi, pa čak i tabelarne prikaze podatka sada konvertuju u CSS izbacujući potpuno tabele čak i tamo gde je potpuno prirodno da se koriste.

Tabele jesu kompleksne, ali samo za one koji je ne razumeju ili nemaju iskustva. Činjenica je da mnogo ljudi koji su kasnije počeli da rade, ne razumeju tabele i njihovo ponašanje pa ih stoga mrze. Isto tako, oni stariji, teško menjaju navike, zašto da prelaze sa nečega "što radi" na nešto "što tek treba da nauče".

bojan_bozovic 11. 02. 2006. 13:25

Kôd:

<html>
<head>
<body>
<div style="overflow:auto;clear-both:margin-bottom:1.2em">
<div style="float:left; width:20%; border: 1px red solid">Leva kolona</div>
<div style="float:right; width:20%;border: 1px solid blue">Desna kolona</div>
<div style="width:60%;border: 1px solid blue">
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
</div>
</div>
<div style="height:1.2em;position:absolute;bottom:0;border:1px solid green">Footer</div>
</div>
</body>
</html>

Koliku god marginu da izaberes ne radi. Vreme ide. Dosad bih napravio pet sajtova sa tabelama plus pauza za kaficu. Mora da se hakuje negde (sorry, morao sam).

Kôd:

<html>
<head>
<body>
<div style="float:left; width:20%; border: 1px red solid">Leva kolona</div>
<div style="float:right; width:20%;border: 1px solid blue">Desna kolona</div>
<div style="width:60%;border: 1px solid blue">
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
</div>
<div style="overflow:auto;clear-both:margin-bottom:1.2em">
<div style="height:1.2em;position:absolute;bottom:0;border:1px solid green">Footer</div>
</div>
</div>
</body>
</html>

Mozda si mislio na ovo? Steta, ni to ne radi.

Nadji resenje, ali, kako mene ne zanima, pisi autorima ovog clanka da si pronasao resenje za cist CSS futer.

bluesman 11. 02. 2006. 13:36

Nisam siguran šta hoćeš da napraviš, ali ako je ono što ja mislim da ti treba, onda imaš jednu jako prostu grešku, evo ti ceo kod:
HTML kôd:

<html>
<head>
<body>
<div style="overflow:auto;clear-both:margin-bottom:1.2em">
<div style="float:left; width:20%; border: 1px red solid">Leva kolona</div>
<div style="float:right; width:20%;border: 1px solid blue">Desna kolona</div>
<div style="margin-left:20%; margin-right:20%; border: 1px solid blue">
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>Sadrzaj<br>
</div>
</div>
<div style="height:1.2em;position:absolute;bottom:0;border:1px solid green">Footer</div>
</div>
</body>
</html>

A ovo je glavna razlika:
HTML kôd:

<div style="margin-left:20%; margin-right:20%; border: 1px solid blue">
Meni se čini da ti ovo ne razumeš baš najbolje? :)

bojan_bozovic 11. 02. 2006. 13:40

Moj layout nije radio ali samo ako govorimo o futeru (Opera 8.51). Da, treba i da se proveri u FF i u FF nije radio, treba margin-left i margin-right, kao sto si napisao (tj. treba hakovanje). Govorimo o futeru ovde. Ja nisam zelotcina i layout fiksne sirrine bih radio sa position:absolute svuda, govorim o zelotizmu. To je ono sto mi smeta.

Pedja samo da mi objasni kako ce W3C box model da mi pomogne da napravim ovu ilustraciju sa http://www.bloodrayne.com/loband/index.html , pa idi na screenshots ili za to ne treba ni znati kako se kompjuter pali, a akademija likovnih umetnosti pomaze (tj. sta konkretno ja dobijam od toga? :)) (Poenta: i u DW pravis odlican sajt, ako umes da crtas)

bluesman 11. 02. 2006. 14:00

BTW, "margin-left" i "margin-right" nije nikakav hack. :)

Za ovo drugo te i ne razumem šta govoriš. Kakve veze ima box model sa ilustracijom i crtanjem?

bojan_bozovic 11. 02. 2006. 14:03

Onda downloaduj Operu i isprobaj kod koji sam postovao na prethodnoj strani ili izmeni centralnom divu CSS da je margin-left i margin-right po 20% i isprobaj u FF i Futer ne radi kako je Dragan napisao da ce da radi, a ja cekam od njega odgovor

Crtanje je tu da ga podseti da CSS nece nikom da pomogne da napravi bloodrayne.com

Zero-Cool 11. 02. 2006. 14:29

Zasto ljudi vecito zapocinju ovu prepirku, jednostavno je Bojane ako ti se ne svidja CSS ti ga nemoj koristiti, jer iskreno u njemu je moguce odraditi sve sto i sa tabelama, nekima je rad sa CSS-om brzi, tebi nije pa onda koristi ono za sta ti treba manje vremena.

Ne mozes se ti raspravljati sa nekim u vezi CSS-a kad isti i ne poznajes dovoljno dobro, drzi se tabela i radi sa njima,a kad ti bude bilo potrebno da radis sa CSS-om ti ces nauciti ili ako ti zapne doci ces ovamo i pitati sta ti nije jasno.

Ova tema je trenutno jako malo korisna, mozda samo Bojanu sto mu je objasnila kako se neke stvari rade u CSS-u. koje nije znao, npr. Footer.

bluesman 11. 02. 2006. 14:34

Mislio sam da su ti kolone problem a ne footer. Dodaj samo "clear:both; width:100%;" u footer pa ce da radi svuda. Recimo ovako:
HTML kôd:

<div style="height:1.2em; border-top:1px solid green; position:absolute; bottom:0px; width:100%; clear:both;">Footer</div>

bojan_bozovic 11. 02. 2006. 15:39

@bluesman

Opet ne radi (provereno) zbog position:absolute koji pozicionira layer nezavisno od ostalih u odnosu na wievport, sto je i bila moja poenta. Ne kazem da ovo mozda ne moze da se izvede (pardon, imamo visekolonski layout u FF 1.5, CSS 3) ali radi se o tome da li treba. Za neki drugi layout CSS bi bio idealan, a , zerocool, o tome i govorim, ja iskljuciv nisam, Dejan i Ilija jesu, CSS pa CSS.

http://maestitia.net/1.html - da bas i vidite da ne radi, plus smo izgubili ceo dan (i o tome sam pricao!) na layout. Za drugi layout, da, CSS, ali nemojte da budete iskljucivi.

kalkulus 11. 02. 2006. 16:37

jedno pitanje, da li je cilj cele ove zezancije da footer bude na dnu strane ispod kompletnog sadrzaja sredishnjeg div-a?

ako je to slucaj onda je overflow:auto; za wraper div potpuno nepotreban. to zbunjuje i FF i Operu, dok bez toga sasvim lepo radi

borstale 11. 02. 2006. 17:11

Malo se brinem da ne lupim glupost, ali kad sam kod sebe ubacio (u footer) position:relative, footer je ostao dole u svim browserima...

ivanhoe 11. 02. 2006. 17:23

joj, mrzi me da citam sve ovo, pa izvinjenje ako je vec neko ovo spomenuo, ali ako je do footera na dnu kontejnera, to se radi sa position:absolute; bottom:0 u footeru, a kontejneru stavis padding-bottom koliko je debeo footer, i to je to...


Vreme je GMT +2. Trenutno vreme je 14:57.

Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.

Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.
Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.