CSS vs Table - old story, but

Dragan Babić · 11. 02. 2006.

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.

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.

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

Ilija Studen · 11. 02. 2006.

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).

Kliknite na sliku za uvećanu verziju

Naziv: outline.png
Pregleda: 806
Veličina: 43,6 KB
ID: 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.

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.

Dragan Babić · 11. 02. 2006.

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).

bluesman · 11. 02. 2006.

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.

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.

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.

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)

11. 02. 2006.	#2
bojan_bozovic expert Master Datum učlanjenja: 20.12.2005 Poruke: 730 Hvala: 0 0 "Hvala" u 0 poruka	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? Poslednja izmena od bojan_bozovic : 11. 02. 2006. u 12:22.

11. 02. 2006.	#4
Ilija Studen Direktor Kombinata Invented the damn thing Datum učlanjenja: 07.06.2005 Poruke: 2.669 Hvala: 44 119 "Hvala" u 64 poruka	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). 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. __________________ activeCollab - Project Management and Collaboration Tool iz domaće kuhinje \| area51.rs - Blog Poslednja izmena od Ilija Studen : 11. 02. 2006. u 13:04.

11. 02. 2006.	#6
Dragan Babić Designer guy Wrote a book Datum učlanjenja: 06.06.2005 Lokacija: Novi Sad Poruke: 1.373 Hvala: 55 42 "Hvala" u 22 poruka	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). __________________ Plakatt — objavi, razglasi i saznaj za događaje DnevnikEklektika.com \| Sprawsm

11. 02. 2006.	#7
bluesman Goran Pilipović Sir Write-a-Lot Datum učlanjenja: 18.05.2005 Lokacija: Beograd Poruke: 5.450 Hvala: 288 1.247 "Hvala" u 446 poruka	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". __________________ Goran Pilipović a.k.a. Ugly Fingers Bradley f.k.a. bluesman I don't always know what I'm talking about but I know I'm right! Poslednja izmena od bluesman : 11. 02. 2006. u 13:18.

11. 02. 2006.	#10
bojan_bozovic expert Master Datum učlanjenja: 20.12.2005 Poruke: 730 Hvala: 0 0 "Hvala" u 0 poruka	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) Poslednja izmena od bojan_bozovic : 11. 02. 2006. u 13:56.

11. 02. 2006.	#3
Blood Boban Karišik Expert Datum učlanjenja: 05.11.2005 Lokacija: Beograd Poruke: 556 Hvala: 36 186 "Hvala" u 21 poruka	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

Slične teme
Tema	Početna poruka teme	Forum	Odgovori	Poslednja poruka
Ajax Powered MySQL Table Editor i Viewer	ljtruba	(X)HTML, JavaScript, DHTML, XML, CSS	5	26. 08. 2010. 22:02
Download: The True Story of the Internet	japan	Opušteno	1	08. 05. 2008. 11:17
table, jedna ispod druge u celiji	Ivan	(X)HTML, JavaScript, DHTML, XML, CSS	8	07. 12. 2007. 14:45
Pivot Table OWC Alternative	dejan2102	Programiranje	0	04. 11. 2006. 00:26