Osnovno pitanje o CSS

[ spezia @ 09.09.2009. 19:52 ] @

Prosao sam online kurs CSS i upoznao se sa tehnikama koje nudi.
Imam pitanje ,posto se uglavnom novi sajtovi i nove web tehnologije zasnivaju na css.
Da cak i <table> i druge osobine tagova idu uglavnom preko css-a. Pun je net primera toga.
Moje pitanje je zasto je akcenta bacen toliko na pozicioniranje ako:
1)Je mnogo teze lepiti slike , i razne celine po stranici, vodeci i muceci se, kada je preko tabele u html-u mnogo lakse i brze.. nego raditi u pikselima po visini i duzini.
2) I ako uspemo da lepo to uglavimo ,onda nastaje problem kako ga vidi Opera, Mozilla, IE, Seamonky, Nautilus, i da ne nabrajam vise, a tek verzije ovih programa. Mislim da je vrlo neprofesionalno misliti da je "sigurno" ceo svet instalirao IE 7, a ono gle cuda ,neke africke zemlje imaju verziju 6, pa se nas sajt ne vidi kako treba, a mi to neznamo...
Ove 2 stavke me jako bune -zasto sve preko CSS-a. Ako moze neki razuman odgovor.

[ Stefan Jocic @ 09.09.2009. 20:11 ] @

Po tebi je lakše da radiš tabelama? Pa evo ukratko da ti objasnim zašto tabele nisu dobre. Ako npr. radiš neku statičnu prezentaciju zbog pojedinih elemenata neće tabela da izgleda isto na svim stranicama, tako da ćeš morati sve pojedinačno da ispravljaš. Razlikovaće ti se dizajn stranica. A div sve to lepo rešava, samo ga definišeš u *.css fajlu i linkuješ ga. Iima još jedna stvar... div tag je mnogo uredniji u kodu, nego tabela... Kada razmisliš ima puno stvari zašto je div tag mnogo bolji. Ima puno razloga, pročešljaj neke starije diskusije o ovome, a pročitaj i u Wikipediji malo o Web 2.0... Po meni je mnogo lakše i lepše koristiti div tag. Inače tabele više zezaju u pozicioniranju kao što već rekoh... a neslaganje u rendiranju ispravlja optimizacija. Prihvati činjenicu da je div bolji i da više nismo u 90-tim.

[ Dusan Gacic @ 09.09.2009. 21:49 ] @

Koriscenjem div-ova i css-a, dobijas odredjene prednosti u odnosu na layout zasnovan na tabeli.

- Odvajanje koda od dizajna
- Dovoljno je da promenis par kodova u css-u da bi dobio zeljene izmene na celom sajtu.
- Kod je jednostavniji, brze se ucitava i razumljiviji je coveku

Tabele treba da sluze za ono u cemu su dobre, a to je tabelarni prikaz podataka.

[ Stefan Jocic @ 09.09.2009. 21:52 ] @

Citat:

Dusan Gacic:
- Dovoljno je da promenis par kodova u css-u da bi dobio zeljene izmene na celom sajtu.

Ovo sam zaboravio da pomenem. Ovo je stvarno velika prednost...

[ spezia @ 09.09.2009. 22:35 ] @

To je tacno... Ali ne pricamo za kompletan CSS tagove, samo za pozicije... Radio sam primer -> koji se ne vidi isto u 3 pretrazivaca(ima razlike,sitne ,ali dovoljne da se da primetiti). I onda dolazim u situaciju da instaliram sve verzije IE, Opere, SeaMonky, Konkquer,... da vidim gde se kako vidi. Meni to lici kao los metod. A vidim dosta upozorenja na netu da recimo nesto radi na Operi ali uopste ne radi u IE. To me buni... Sa tabelama nisam imao tolike probleme.
A radim sa php-om, tako da mi to sa izmenama css ( gde stedi stranice)- smesno u odnosu sta php radi. Sa php-om ucitam header, footer is sve sta mi treba->nikad to nebih dao css-u.

[ Dusan Gacic @ 09.09.2009. 22:48 ] @

Ne secam se kada sam zadnji put imao ima neki veci problem sa browserima. Ako nesto ne radi, ne radi uglavnom na IE6

Vezano za deo sa php-om i ccs-om, pomesao si ih

CSS sluzi za da definise izgled stranice, a izgled celog sajta mozes menjati iz jednog css fajla

[ Tudfa @ 09.09.2009. 22:51 ] @

Evo jedne tu i tamo starije diskusije na temu tabela,divova, tabela u dizajnu, tabele vs divovi ...

http://www.elitesecurity.org/t335106-3

_{[Ovu poruku je menjao Tudfa dana 10.09.2009. u 00:07 GMT+1]}

[ Stefan Jocic @ 09.09.2009. 22:51 ] @

@spezia

Ne moraš da instaliraš previše borwsera, možeš koristiti www.browsershots.org, da izvrši pregled za tebe.

[ Aleksandar Klickovic @ 10.09.2009. 00:38 ] @

Eh, ne znam da li da se ukljucim uopste u diskusiju, posto je moja teme o tabelama lockovana zbog ne slaganja sa stavom moderatora, ali sam licno za koriscenje tabele u nekom osnovnom dizajnu, naravno uz koriscenje css-a. A ima jos par tema ovde, koje bas pominju nesavrsenosti css-a, pa ne bih da se ponavljam.

[ snake_master @ 10.09.2009. 01:24 ] @

Ako neko pita zašto CSS a ne tabele onda je ok da se polemise na tu temu (mada ne vidim razloga)

Ali ako neko pita sta traba da radi ili uci, i sta je bolje onda tu nema sta vise da se raspravlja.

Meni su oci ispale citajuci tu temu koju je aleksandar naveo http://www.elitesecurity.org/t...tanje-Tabela-dizajnu-da-ili-ne i umalo da se prevarim zbog takvih postova i da ucim pravljenje layouta preko tabela :D :D :D

Hajde da ne zbunjujemo ljude koji na ovaj forum dolaze po odgovore: sta uciti? kako dalje? Necemo ih zavaravati diskusijama CSS vs. tabele jer su tabele odavno prevazidjene. Razgranicimo diskusiju i debatu o nesavršenostima tehnologija koje se koriste za pravljenje layout od onoga sta je ispravno upotrebljavati.

U prilog ide činjenica: pogledajte samo na sajtovima www.getafreelancer.com www.99designs.com sta se trazi prilikom izrade web sajta u 100% slucajeva trazi se validan HTML/CSS kod, prema tome nema razloga više polemisati o tome.

@aleksandar

ako me secanje ne vara (a ne pada mi na pamet da opet citam celu temu jer je jako duuuuuugacka :D :D :D), tema je zatvorena zbog ostrih reci pojedinih ucesnika teme a ne zbog tvog neslaganja sa moderatorom.

Druga je priča da je CSS 2.1 nesavršen, najviše zahvaljujući Microsoftu i Internet exploreru koji nece da se povinuje standardima koje propisuje www.w3.org i to će se jednog dana promeniti... ali ne moze niko da dodje i kaze da je pravljenje layouta u tabelama bolje, jer pre svega niko vam nece takav sajt prihvatiti, a samim tim svi argumenti koji su za tabele, padaju u vodu...

[ Mitrović Srđan @ 10.09.2009. 02:07 ] @

Samo ne slusas ljude kao sto su Predrag Supurovic i sve ce biti ok :)
Prati trendove u webu i citaj obavezno smashing magazine :)

U ovo vreme Sep 2009 pricati o nedostatcima CSS u odnosu na table design je skroz smesno
i paradoksalno. Pogotovo sto je IE6 skroz u fazi odumiranja hvala Bogu.

[ spezia @ 10.09.2009. 07:57 ] @

Ok. Korisni odgovori. Pozabavicu se ozbiljnije sa css-om.
Mada mi nije isto centriranje u Operi i Firefox za par inca se primetno razlikuje-primer sa neta.
A sto se tice IE 6 ( i ja je imam na kompu-i nemam nameru da ubacujem 7-samo zbog css)
Mnogi imaju win xp -pa tako i IE6. Imam drugove koji se bas ne razumeju u racunare , i mnogi koriste IE 6.
Zato znam= sve dok ima win xp-a bice i IE 6. A ja zbog konfiguracije racunara, necu nikad da ga izbrisem, a znam dosta ljude oko sebe zbog slicnih problema, nece menjati xp.
Pa koliko ima takvih siromasnijih zemalja u svetu koji nemaju para za nov komp?? I moja drugarica iz Danske koristi xp i IE 6 kao glavni pretrazivac. Kada joj kazem linux ona nema pojma. I ubedi nekog da mora da skine IE 7 zbog nekih css stilova,jer covek koji je radio sajt tako ga je optimizovao. Jeste IE 6 izumire, ali nece bas skoro. Jos dugo ce se odrzati.

[ Nemke_BG @ 10.09.2009. 08:23 ] @

@Srdjan ako se dobro secam u toj temi je Predrag zastupao stav da je moguce koristiti CSS i sa table dizajnom a ne da je table dizajn bolji od div dizajna, mada moje pamcenje nije bas najbolje(puca od silnih how to

)...

@spezia, samo kreni sa div/css kombinacijom to je sadasnjost i buducnost(bar dok ne zazivi HTML 5 i neki novi elementi a i onda je pitanje sta ce biti dalje

), btw. sad sam ti ubacio dva nova alata za cross browser razvijanje u top temu, ja ih koristim na dnevnoj bazi i stvarno mi dosta znace...

[ Aleksandar Klickovic @ 10.09.2009. 14:12 ] @

@snake_master

Pa navodno je tako, ali vredjanje ucesnika su zastupali sami moderatori i "CSS fanatici", tako da se jasno vidi da je u pitanju provokacija koja je dovela do zatvaranje iste teme, iz prostog razloga jer su se zagovornici CSS fanatizma nasli u nezavidnom polozaju nad razumnim savetovanjem i prikazivanjem cinjenica onakvih kakve jesu. Naravno i pored datog roka (od 2-3 dana) od strane moderatora koji je zakljucao temu, ista nikad nije otkljucana.

@Mitrovic Srdjan

Kao i obicno, trudis se da ocrnis druge posetice foruma bez ikakvih dokaza.

@pokretac teme

I u ovoj temi i u svim ostalima, ja sam uvek bio za koriscenje CSS standarda i smatram da je neophodno poznavanje istog za bilo kakav ozbiljniji rad u web dizajnu. Ako pocinjes da radis u web dizajnu, i imas zelju da se time bavis, najbolje je da krenes sa nekom knjigom na srpskom jeziku o HTML/CSS-u. Ukoliko si odlucio da koristis Dreamweaver, ima nekoliko pristupacnih izdanja, koja ce ti pomoci da savladas osnove.

To naravno nije kraj, u ovom poslu je potrebno "svakodnevno" usavrsavanje, tako da samo konstantnim radom i ucenjem kako na primerima, tako i teorijskom znanju mozes da budes konkurentan u ovoj oblasti.

[ Stranger2 @ 10.09.2009. 16:58 ] @

Citat:

A sto se tice IE 6 ( i ja je imam na kompu-i nemam nameru da ubacujem 7-samo zbog css)
Mnogi imaju win xp -pa tako i IE6. Imam drugove koji se bas ne razumeju u racunare , i mnogi koriste IE 6.
Zato znam= sve dok ima win xp-a bice i IE 6. A ja zbog konfiguracije racunara, necu nikad da ga izbrisem, a znam dosta ljude oko sebe zbog slicnih problema, nece menjati xp.
Pa koliko ima takvih siromasnijih zemalja u svetu koji nemaju para za nov komp?? I moja drugarica iz Danske koristi xp i IE 6 kao glavni pretrazivac. Kada joj kazem linux ona nema pojma. I ubedi nekog da mora da skine IE 7 zbog nekih css stilova,jer covek koji je radio sajt tako ga je optimizovao. Jeste IE 6 izumire, ali nece bas skoro. Jos dugo ce se odrzati.

Osim IE6 i IE7 postoji i IE8
Odlicna stvar kod IE8 jer se za razliku od IE7 moze instalirati i na piratski windows. Ne trazi aktivaciju i ne mora racunar ni biti spojen na internet da bi ga instalirao.
A najvaznije je sto IE8 ima autoupdate pa ce se sam nadogradjivati na nove verzijje cak i kod korisnika koji nece prelaziti na nove windowse...
Dakle razlog prelaska ne mora biti CSS nego sto je to dugorocnije resenje.

Citat:

Mada mi nije isto centriranje u Operi i Firefox za par inca se primetno razlikuje-primer sa neta.

To je onda los primer. Moze se relativno lako napraviti da stranica bude ucentrirana u svim browserima.

[ Tudfa @ 10.09.2009. 22:44 ] @

Ako se dvoumis, ja bih ti preporucio divove, ako ni zbog cega bar zbog citljivosti koda.
Inace mislim da je ona tema gore korisna i da ne zbunjuje, a da je prirodno da ce citalac da se opredeli
za divove odmah nakon prvog uradjenog sajta u divovima ma koliko god da se zalagao pre toga za tabele

. Ko ce se patiti sa gomilom tr i td tagova bespotrebno ???
Inace nisam od onih koji kazu striktno ne tabelama, mada ih recimo osim za tabelarni prikaz jedino koristim jos za pravljenje poneke forme(registracija i sl.)

[ musicmaster @ 12.09.2009. 19:31 ] @

Citat:

Tudfa: Ako se dvoumis, ja bih ti preporucio divove, ako ni zbog cega bar zbog citljivosti koda.

Div, span... jes.
___________________________________________
Evo malog doprinosa temi i objašnjenje autoru.
Ako sam ga dobro razumeo.

Html

Code:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css Tabela</title>
<link href="css_tabela.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="okvir">
 <div id="tabela">
 KOLONA 1 KOLONA 2 

Veličina fonta, naravno, kao i sve ostalo može da varira kako ti volja.
Sve modifikacije i bojenje ili šta već, možeš na veoma jednostavan način primenjivati pomoću css fajla.
Razlika je u tome da svi browseri mnogo brže renderuju css tabele. 
 U samom css-u, 
#tabela p ne dirati. Najbolje je.
Kod #tabela span border po želji, slobodno. Kod ostalih po želji.
Najviše obrati pažnju kada menjaš širinu same kolone.
Recimo, u ovom primeru preći ukupnu vrednost iz 700px u nešto više, nije podobno.
Dakle, kada računaš koliko će široka biti jedna a koliko druga kolona, uzimaš u obzir i border vrednosti pre nego što izračunaš. 
 I tako dalje I tako dalje 
 text text 
 text text 
 text text 
 text text 
 </div>
</div>
</body>

</html>

________________________________________________________
css

Code:

@charset "utf-8";
/* CSS Document */

#tabela {
    width: 700px;
    border-top: 2px solid #e3e7e7;
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    background-color: #DAB594;
}

#tabela p {
        clear: both;
        width: 100%;
        margin: 0;
        }

#tabela span {
        float: left;
        padding: 0 10px;
        border-left: 1px solid #e3e7e7;
        border-bottom: 1px solid #e3e7e7;
        }

.leftcol {
    width: 190px;
    background-color: #F90;
    color: #000;
    font-size: 20px;
    font-weight: bold;
    text-align: right;
    }

.rightcol {
    width: 467px;
    font-size: 20px;
    background-color: #999;
    border-right: 1px solid #e3e7e7;
    text-align: left;
    font-weight: bold;
    }

.col1 {
    width: 190px;
    background-color: #FFF5E1;
    color: #000;
    font-size: 12px;
    text-align: right;
        }

.col2 {
    width: 467px;
    font-size: 14px;
    background-color: #FFF5E1;
    border-right: 1px solid #e3e7e7;
    text-align: left;
    font-weight: bold;
        }

.col2light {
    width: 467px;
    font-size: 12px;
    background-color: #FFF5E1;
    border-right: 1px solid #e3e7e7;
    text-align: left;
        }

#okvir {
    position: absolute;
    top: 30px;
    overflow: auto;
    width: 720px;
    height: 520px;
        }

Inače, od klasa, za najnormalniju tabelu, dovoljni su ti samo col1 i col2.
Sve je u zip fajlu.
Pozz.

_{[Ovu poruku je menjao musicmaster dana 13.09.2009. u 01:26 GMT+1]}

[ vatri @ 19.09.2009. 08:57 ] @

Ja sam davno, prije mozda godinu dana, citao da cist HTML kod (sa DIV-ovima) utice na bolje indeksiranje stranica kod Google, tj. da su bolje optimizovani. Nisam siguran, neka neko potvrdi ili demantuje ko zna....

Neka radi kako ko hoce, ali moj savjet da pocnes ozbiljno uciti div. Sjecam se kad sam ja poceo da je to bila muka i da je u svakom browseru drugacije izgledalo. Medjutim malo prakse i vremena, i sve ce isto izgledati u svim browserima (skoro svim). Moras neke trikove i razlike u citanju CSS-a kod browsera da naucis (mislim da je kod pocetnika to uglavnom problem kod padding i margin) i vidjeces kako ce glatko ici. Kao sto je kolega napisao imas sajt www.browsershots.org i tu testiras i korigujes razlike. Uostalom ne moras za sve sajtove optimizovat, mislim da je dovoljno za sve verzije FF-a, IE-a, Opera-e i eventualno Chrome-a. Evo na mom sajtu statistike a vjerujem da je i kod ostalih slicno stanje.

Code:

Browser        % visits
Firefox          53.98%
Internet Explorer          22.82%
Opera          16.17%
Chrome          5.35%
Safari          0.78%

Knjigu, misa, tutorijale "u ruke" i uz pomoc w3c validatora i www.browsershots.org sve se fino moze napravit.

Pozdrav od mene i srecno u ucenju!

edit: procita TOP temu korisni alati za izradu web sajtova, ima alata koji ce ti puno pomoc

[ musicmaster @ 20.09.2009. 18:30 ] @

Citat:

Neka radi kako ko hoce, ali moj savjet da pocnes ozbiljno uciti div

Aman, šta je to tako spektakularno pa da treba da se uči, kako reče - "div"... Lol!
Kao da se radi o ko zna čemu, a ne o jednom tagu.

Idi begaj..
Ovo je dobro.

[ vatri @ 20.09.2009. 19:01 ] @

da koristiti <div> umjesto <table> za dizajn, sta ti nije jasno?
Mislim da je svima jasno sta sam mislio, moglo se zakljuciti iz prethodnih 10-ak postova.

P.S. Ne znam sto ti je trebao ovaj komentar?

[ Nemke_BG @ 20.09.2009. 19:20 ] @

ma dosadno mu bilo, pa je morao malo da pecne...

Nego ona tvoja statistika uopste ne prikazuje stanje browsera ni kod nas a ni u svetu...
Kod nas se stat vise krece tipa

IE 6 30 - 40 %(u opadanju),
IE 7 i FF po nekih 20 i kusur %(FF raste),
IE 8, chrome i safari 1 - 5 % (sva tri rastu i nadam se da ce zameniti ie 6, da ga ne gledam vise),
opera jedino ima oko 1 - 2 % i stagnira...(operasi bez napadanja, nisam rekao da je opera losa

)

[ musicmaster @ 20.09.2009. 20:42 ] @

Citat:

vatri: da koristiti <div> umjesto <table> za dizajn, sta ti nije jasno?
Mislim da je svima jasno sta sam mislio, moglo se zakljuciti iz prethodnih 10-ak postova.

P.S. Ne znam sto ti je trebao ovaj komentar?

Ne znaš zašto?
Evo, sad ću da ti razjasnim.

Ne treba da uči <div> nego CSS.

Ako hoće da zna malo više o tagovima može da krene i ovako:

google search >> define:div tag

Eto.

Što se tiče statistika, ova je po meni najverodostojnija.

http://www.w3schools.com/browsers/browsers_stats.asp

[ Nemke_BG @ 20.09.2009. 20:47 ] @

w3c - ova statistika nije verodostojna zato sto ona odslikava sta koriste ljudi koji dolaze na w3c tj. da budem precizniji
na w3c idu web dev kolege koje su obrazovaniji od obicnog korisnika po pitanju kvaliteta browsera...

P.S. Kad bi ta statistika bila verodostojna napravio bi o'ma rostiljijadu jer skoro pa ne bi morao da gledam vise IE 6...

[ vatri @ 20.09.2009. 21:46 ] @

pa jel postoji drugi nacin da se sloze "div-i" osim preko css-a?

ova statistika je prema google analytics i pratim ova 2 sajta iz mog potpisa i razlika varira +- 1%

a evo kako je to u Slo:

http://www.iprom.si/news/1604/...ljenosti-skoraj-izenacena.html

[ musicmaster @ 25.09.2009. 15:45 ] @

Citat:

Nemke_BG: ....
P.S. Kad bi ta statistika bila verodostojna napravio bi o'ma rostiljijadu jer skoro pa ne bi morao da gledam vise IE 6...:D :D :D

Ja je zato i volim, jer ima tako lepe procente što se IE6 đubreta tiče... :D
;)

FF since version 0.0....
Forever!