me + css = noob :)

[zweistein]

zytzagoo wrote:

<cut>

Aaaaaaamen... The wise man has spoken . Ni sam ne bih ovo bolje sročio tak' da ću se morati jednostavno složiti s ovim.

[Sulien]

zytzagoo wrote:

Takodjer, glede navigacije i 1x1 pixela - display: block ti je prijatelj, ali ne u smislu da ce jedan property rijesiti sve tvoje probleme - nece - dok god ne shvatis sto znaci display: block i kako browser dozivljava block elemente, a kako inline...

IE ima bug sa 'auto' širinom inline elementa koji je proglašen block, taj se problem rješava tako da se napravi property posebno za IE koji navodi fiksnu širinu block elementa (100% je ok dok čovjek ima na umu da će mu se zbog bordera i margina to povećati još za par pixela), dok se za druge browsere ostavlja default 'auto'

[silence]

Sulien wrote:

zytzagoo wrote: Takodjer, glede navigacije i 1x1 pixela - display: block ti je prijatelj, ali ne u smislu da ce jedan property rijesiti sve tvoje probleme - nece - dok god ne shvatis sto znaci display: block i kako browser dozivljava block elemente, a kako inline... IE ima bug sa 'auto' širinom inline elementa koji je proglašen block, taj se problem rješava tako da se napravi property posebno za IE koji navodi fiksnu širinu block elementa (100% je ok dok čovjek ima na umu da će mu se zbog bordera i margina to povećati još za par pixela), dok se za druge browsere ostavlja default 'auto'

znači umjesto hacka hack?


@ zyt.....gle, da ne mislim da se stvari mejnjaju i pošto nemam namjeru ostat u kamenom dobu, prelazi se na tablelesss layout kolko možemo.....
kaj se tiče CMS, ono kaj sam mislilio, i vrlo vjerojetno poptpuno pogrešno se izrazio je....
baza našeg CMSa je sad stara preko godinu i pol dana, doba kad smo CSS koritili za 2-3 stvari jer iskreno nismo imali ideju kaj se sve može s njim. pošto radi.....hvala bogu na referentoj listi....zajeb je ić mjenjat dosta toga bez da se sjedne i naprave zahvati s obje strane CMSa.
ovaj, koji ću izgleda pisat preko praznika (weeeeeee...... ) će biti predviđen da radi s elementima za koje ovaj sadašnji nije ni čuo.
planiram neke opcije koje će puno bolje podržavati layout s minimumom tablica.....
samo moram uhvatit vremena da se primim toga.....nije baš jednostavno upravo ovo kaj si ti i sam rekao, promjenit način razmišljanja....

to je mnogo teže i kad si u vremenskoj strci .....ideš na sigurno je sigurno.....
kad se nema vremena tražit hackove i slično, a layout mora radit.....

ak mi ne plate kaj mi duguju do negdi 20.12., možda se preko praznika pretvorim u najvećeg zagovornika CSS na mi3.... makar sumnjam, jer imamo tolko toga u redu čekanja da ne znam gdi mi je glava a gdi guzica za next 2 mjeseca......

skinuo sam s neta sve živo kaj sam našao o CSSu i stvarno se trudim krenut "pravim putem", ali za sada.....koristit će se kaj se može....

evo jedan primjer :: nedavno sam uspio prvi put složit da mi background ostaje na screenu, bez da se pomiče dok scrollaš content...inače mi je to stvarno super-duper fora....i bio sam sretan kaj mi radi i na IE i na FF...i dođem do frendice na Mac i njen Safari naravno pomiče back ground prema dole, ne jebe CSS koji sam stavio ni pola posto.....
pošto nemam Mac i ne mogu testirat na Safariju (barem kolko ja znam ne postoji win verzija).......evo ti kod pa mi reci kaj je problem....

Code:

BODY  {               background: url(back.gif);        background-repeat: repeat-x;        background-attachment: fixed;        background-position: 0% 0%;        background-color: #D0D2BC; }

ja čak nemam ni di provjerit...za ovo znam da radi, isprobano na IE i FF.......IE na Macu također, provjereno kod nje

[maratz]

Sulien wrote:

zytzagoo wrote: Takodjer, glede navigacije i 1x1 pixela - display: block ti je prijatelj, ali ne u smislu da ce jedan property rijesiti sve tvoje probleme - nece - dok god ne shvatis sto znaci display: block i kako browser dozivljava block elemente, a kako inline... IE ima bug sa 'auto' širinom inline elementa koji je proglašen block, taj se problem rješava tako da se napravi property posebno za IE koji navodi fiksnu širinu block elementa (100% je ok dok čovjek ima na umu da će mu se zbog bordera i margina to povećati još za par pixela), dok se za druge browsere ostavlja default 'auto'

samo... ne kužim zakaj ti treba width: auto;? Sorry kaj je tak ispalo, ali tvoja 'tehnika' je zapravo primjer kako ljudi rade kada nisu do kraja proučili mogućnosti i kombinacije neke tehnologije—u ovom slučaju CSS-a. Za postizanje nekog efekta ili pozicioniranje uvijek postoji more than one way. Nekad su hackovi nužni, ali postoje hackovi koji su backward compatible i oni koji to nisu. Ne trebam uopće govoriti koji su ispravni.

@silence:
* O programerima općenito:
Jučer sam na jednom 'skupu' imao raspravu oko prednosti i mana ASP.NET-a. Programer tvrdi da je super jer mu olakšava rad, ja tvrdim da suxa, jer baca smeće i nesemantički kôd. Pitam ja zašto mora cijeli sadržaj biti unutar forme? Kaže on zato što je to po default-u tak postavljeno u njegovom editoru. Boli korisnika sitea/aplikacije ona stvar za defaultne postavke programera, ako on ne može vidjeti site sa kojeg god uređaja poželi i na kojoj god usranoj vezi bio.
* Background-image problem:
Ne prikazuje se ispravno u Safariju zato što ti redoslijed property-ja nije ispravan i zato što si u prvoj liniji obuhvatio sve pod-propertije. Trebalo bi pisati ovako:

Code:

body {             background-color: #D0D2BC;        background-image: url(back.gif);        background-attachment: fixed;        background-repeat: repeat-x;               background-position: 0 0;        }

a sve se moglo napisati i kao:

Code:

body {         background: #D0D2BC url(back.gif) fixed repeat-x 0 0;        }

. Također neke starije verzije Safarija imaju nekih drugih problema oko rendanja bg-img, ali koji su ispravljeni u novijim verzijama. Korisnici Mac-ova su ionako 'napredni' i redovito skidaju update-ove. Trebaš se više brinuti zbog ranijih verzija IE-a

[silence]

as i said....i am a noob u CSSu.
ne znači da se ne trudim, ali nigdi di sam gledo nije pisalo recimo baš to.....

ak imaš koji _STVARNO_ dobar link, odma ga stavim u bookmarke...
i thnx


BTW :: znam da se može pisat kraće, ali me još uvijek neke stvari zbunjuju pa onda pišem onako.....jebiga....

[carr]

radio sam sad "portalasti" sajt, koji je prvo bio napravljen iskljucivo u tablicama, a onda sam odlucio da ga prebacim u css.
obzirom da nisam nikad radio layout iskljucivo bez tablica, bilo je malo zajebano.

jednostavno moras pocet malo drukcije zamisljati neke stvari, a znate svi kak je kad pocnete sablonizirano razmisljati, tesko se izbaciti van iz kolosjeka.

zahvaljujuci zyt-u sam to i uspio, al mogu reci da raditi sa css-om nije bas ugodno. vjerojatno je zato na kraju jos bolji filing kad uspijes napraviti nesto

nadam se da ce mi se u buducnosti taj trud oko izrade tabeless layouta (koji mi je sigurno za prvi put bio 4 puta veci nego obican layout) isplatiti oko samog odrzavanja, bandwidtha, implementacije novih funkcija, izmjene layouta i slicno...

[maratz]

carr wrote:

jednostavno moras pocet malo drukcije zamisljati neke stvari, a znate svi kak je kad pocnete sablonizirano razmisljati, tesko se izbaciti van iz kolosjeka.

Tako je. CSS zahtjeva planiranje i analizu layout-a unaprijed (što pak nema veze sa CSS-om, nego sa pristupom samom projektu)

[Sulien]

marac wrote:

samo... ne kužim zakaj ti treba width: auto;? Sorry kaj je tak ispalo, ali tvoja 'tehnika' je zapravo primjer kako ljudi rade kada nisu do kraja proučili mogućnosti i kombinacije neke tehnologije—u ovom slučaju CSS-a.

Kao prvo, to nije moja 'tehnika'. Drugo, ne shvaćam pitanje "što će ti width:auto?". Zicagu je spomenuo da se za navigacijske gumbe koristi deklariranje link elemenata kao block jer će tako gumb biti aktivan preko cijele površine (a ne samo preko teksta kao kad je default, 'inline'). Ja sam se nadovezao da će, ako širina tog link elementa nije eksplicitno navedena (znači, poprima default vrijednost 'auto'), to prouzročiti bug u IE/Win koji će taj element rastegnuti previše horizontalno (tj. preko paddinga od parenta), vertikalno (dodat će nepostojeće velike margine) i još prouzročiti neugodan skok teksta pri hoveru (skok s prave pozicije na pogrešnu, gdje gazi padding), I JOŠ neće biti aktivan preko cijele površine... Moj test pogledajte ovdje, PRVO sa FF onda sa IE/Win (drugim browserima još nisam probao, npr. IE/Mac):
http://anor.irb.hr/~mislav/blockbug

Sad ponovi da nisam proučavao

Stvar se rješava tako da se hackom napravi css rule specifično za IE/Win koji navodi fiksnu širinu link elementa koji je proglašen blockom, npr. "100%". Naravno, ako element ima horizontalne margine, border i/ili padding rastegnut će se za širinu toga zajedno previše (ponekad neprimjetno); u većini slučajeva to nije prihvatljivo i treba se odlučiti za manji postotak (često 90-95) ili malo zbrajanja i oduzimanja ako se radi o fiksnom layoutu sa pixel širinama.

Za druge browsere ostavljam default širinu ('auto'). Zašto? Jer baš slučajno hoću da se rastegne cijelom širinom sidebara, što je tu tako teško za shvatit??

[maratz]

Istina je da IE ima problem sa inline elementom deklariranim kao 'block', ali je loše riješenje postaviti width: 100% za IE, pogotovo ako koristiš padding-e (jer si skršio box model), već treba izračunati ukupnu širinu bloka, oduzeti paddinge i ostatak definirati kao 'width'. U tvom primjeru je to izvedivo jedino uz prenjanje uz kaskadu da se dođe do vrijednosti koju naslijeđuju svi ostali property-ji koje si definirao u emovima, odnosno za parent elemente u postocima (što je inače vrlo nepraktično, tj. trebalo bi se držati jedne mjerne jedinice). Ovako na pamet, to bi bilo:

* wrapper 600px
* sid 210px
* a width = 210px - 16px (2 x.8em - ako se ne varam 1em bi po kaskadi bio 10px) - 3px (.3em * 10px) bordera (koji je najbolje postaviti boje pozadine, a iste širine kao naknadni hover) da se jednostavno ubrza renderiranje efekta na starijim strojevima (npr. p3 < 600Mhz) = 191px (ako nisam negdje krivo zbrojio/oduzeo -- provjeri još jednom), odnosno,ako baš hoćeš u emovima 19.1em.

Međutim, dobro je znati da se označavanje u emovima koristi uglavnom za vertikalne paddinge, jer služe da blokovi teksta budu razmaknuti vertikalno u istom omjeru ukoliko se cijeloj stranici poveća veličina slova. Horizontalni padding definiran u emovima dovodi kod resajzanja do raspadanja layouta po horizontali, tako da je slabo upotrebljiv kod klasičnih 'vertikalnih' layout-a.

Problem širine cijele liste bloka u tvom slučaju je zapravo problem nasljeđivanja 'floata' i nedefiniranja, odnosno ne-overajdanja defaultnih postavki za dl, dt, dd, ul i li elemente (za neke jesu za neke nisu), pa se zato događa da liste ignoriraju padding #sid-a, odnosno workaround za taj problem je postavljanje unordered-liste { float: right; }, a bilo bi joj zgodno definirati i neku širinu, just in case. Inače, lošom se pokazala kombinacija float-width-padding, tim više ako child elementi nisu unstyleani.

Također, bilo bi dobro da margin-bottom od linkova prebaciš na parent list-item (jer logički tako odgovara), a i možda da list-item definiraš kao inline element, kako bi ih zaljepio vertikalno jedan za druge, međutim onda trebaš provjeriti i kaskadu floatova. To se sve može izbjeći i micanjem razmaka u samom HTML-u, npr: /></li><li><a ... , što je neka vrsta varanja, ali nije neispravno.

[Sulien]

marac wrote:

* a width = 210px - 16px (2 x.8em - ako se ne varam 1em bi po kaskadi bio 10px) - 3px (.3em * 10px) bordera

To inače i radim:

sulien wrote:

ili malo zbrajanja i oduzimanja ako se radi o fiksnom layoutu sa pixel širinama

Ali da te pitam sad nešto: vidio si da sam odvojio #sid od #con-a tako da sam stavio na #sid lijevi padding debeo 5% (60+5+35=100% od 600px - 20px paddinga). Prvotno sam umjesto 5% lijevog paddinga stavio 5% lijeve margine i stvar se uporno raspadala u IE6 (sidebar bi skočio ispod) dok ne bih smanjio tu marginu do 3%. To mi nije jasno; računica je dobra sa 5%, a opet je IE quirky što se tiče margine. Maknuo sam marginu i stavio umjesto nje padding (efekt je potpuno isti), ali mi nije jasno zašto to IE misinterpretira kad su popravili taj box model quirk iz IE5.5

[maratz]

Sulien wrote:

Ali da te pitam sad nešto: vidio si da sam odvojio #sid od #con-a tako da sam stavio na #sid lijevi padding debeo 5% (60+5+35=100% od 600px - 20px paddinga). Prvotno sam umjesto 5% lijevog paddinga stavio 5% lijeve margine i stvar se uporno raspadala u IE6 (sidebar bi skočio ispod) dok ne bih smanjio tu marginu do 3%. To mi nije jasno; računica je dobra sa 5%, a opet je IE quirky što se tiče margine. Maknuo sam marginu i stavio umjesto nje padding (efekt je potpuno isti), ali mi nije jasno zašto to IE misinterpretira kad su popravili taj box model quirk iz IE5.5

pukni display: inline na floatan element

[silence]

proklet bio dan kad sam se odlučio odustat od tablica na novom webu......
imam miljon pitanja sad.....ali to će pričekat, izgleda da ću ipak malo odspavat...

jebem ti CSS

[imbrod]

Dobro kazes, silence.

Ja garantiram da NIKAD necu odustati od tablicnog nacina, bez obzira koliko CHE (kojeg cijenim) govorio o tome da je pozeljno sve raditi s layerima i cssom.

Pa prije nego i krenem, otvara se tisucu pitanja, a prvih nekoliko koja mi padaju na pamet:

kako uskladiti visine i sirine layera da ovise o drugim layerima (mislim na onu situaciju kad se npr. lijevi TD sam povisuje ovisno o tome koliko je desni visok); kako koristiti relativno pozicionirane layere na odredjenim mjestima? Nemoguce - moram koristiti apsolutne. E, a sto ako mi je sadrzaj centriran, a ne znam rezoluciju klijenta? Kako cu znati koliko left? Da radim nepotrebne kalkulacije u JS samo da mi pomicu layere? A sto ako klijent ima ugasen JS? A sto ako koristi browser 'Turbo Extra New Bullshit Browser ver. 1.08237456571' koji ne podrazava najosnovnije propertyje od layera... ?

Dajte mi ljudi primjer jedne kompleksnije stranice (npr. portala) napravljene NEkoristenjem tablica (i da ih pogledam u nekoliko browsera) i onda ima smisla diskutirati dalje...

[velcro]

Apsolutno se slazem. Evo ja sam zapoceo witch-hunt i onda morao utihnuti zbog posla na par dana...

Moj post se odnosio na table-less layout i pogotovo ovo sto imbrod navodi tj. liquid layout. Samo da navedem da ne smatram imati 3 stupca sa fixnim velicinama side-by-side kod nekog portala - nekim posebnim postiguncem i to se radi bez problema bez tabela.

Al ako fakat moram izgubiti 500% vise vremena da poslozim da mi nesto radi kod ovog u tabelama fakat se zapitam zasto. A isto imam nested DIVove ko i neku razgranatu tabelu samo jos moram koristiti i glupe clearing elemente da bi sve radilo isto u FF/IE/O

Evo imao sam nedavno slucaj gdje sam bio poslozio neki layout za programera i onda je ispalo da sam neke sitnice zaboravio, a on je vec bio rijesio sve sa par ubacenih tablica - i sve isto izgleda i super radi. No hebiga, ja sam slozio kojih 30ak stranna za taj site bez ijedne tabele i sad ja njemu moram objasniti zasto me te njegove tabele bodu u oci i zasto su lose... a na kraju dana ni meni nije jasno...

Samo da navedem da ne priznam manja velicina i brze renderiranje pod valid argument. Sto se tice manje velicine i TABLE/TDovi primaju isto CSS parametre/klase ko i DIVovi - normalno svi ostali text based tagovi su takodjer prisutni (P, H*, etc). A sto se tice brzine renderiranja - daj budite ozbiljni, moj PC bez problema Quake3 pogoni pa da ga smetaju tu i tamo neke tablice viska?

[maratz]

Tablice se najnormalnije mogu emulirati netabličnim elementima, tako da sadržaj bez CSS-a može biti renderiran linearno, za razliku od tablica koje uvijek zadržavaju raspored sadržaja u tabličnom obliku (što se može provjeriti npr. u FF-u View > Page Style > No style)

Glavna prednost nekorištenja tablica i separacije strukture i izgleda je dostupnost sadržaja na alternativnim platformama, npr. JAWS, Linx, PDA uređaji itd. Znam za oko 50-ak hr usera koji koriste takve uređaje (a ima ih vjerovatno i još)

http://abcnews.go.com/
http://espn.go.com/
http://www.inc.com/home/
http://www.fastcompany.com/homepage/index.html
http://www.wired.com/
http://www.lycos.com/

Anyway, tko sâm ne vidi prednosti, neće ga ništa uvjeriti. Bolje je slagati 'dobro' u tablicama, nego loše bez njih...

BTW, size matters — pogotovo za vlasnike portala koji plaćaju BW

[velcro]

Ovisi o tvojem shvacanju rijeci najnormalnije...

Ne znam sto drugi misle o tome, mada fakat mi nije prednost nekakva da mogu svoje stranice gledati u text-only browseru, radje napravim posebni template za neke egzoticnije platforme pa rijesim to kako treba...

Mada ne kuzim - od svih linkova koje si poslao jedino ESPN i Lycos su table-free, svi ostali koriste table layout s cssom da strukturiraju samu stranicu a onda eventualno neki sadrzaj naglasavaju DIVovima... linkovi ti samo govori u prilog protiv table-less dizajna... a i kod ESPNa i Lycosa je sve to tak kruto sto se tice visine/sirine/pozicije - da se dam kladiti da apsolutno pozicioniraju elemente - iako nisam ni gledao...

BTW sto se tice size matter - ponovo taj ludi argument s velicinom koda - da ponovim, u TD tagove isto tako mozes definirati CSS klase ko i kod DIVova...

[carr]

imbrod wrote:

kako uskladiti visine i sirine layera da ovise o drugim layerima (mislim na onu situaciju kad se npr. lijevi TD sam povisuje ovisno o tome koliko je desni visok); kako koristiti relativno pozicionirane layere na odredjenim mjestima? Nemoguce - moram koristiti apsolutne.

pogledaj ovdje
http://www.vjekoslav.info
--> dizajn s 3 jednako velika stupca.
naravno to je jos pusiona, jer IE zajebava i ne prepoznaje display:table-cell argument.
nekako zivim u nadi da ce se to popraviti jednom, i taj cijeli css dobiti smisao

imbrod wrote:

E, a sto ako mi je sadrzaj centriran, a ne znam rezoluciju klijenta? Kako cu znati koliko left? Da radim nepotrebne kalkulacije u JS samo da mi pomicu layere? A sto ako klijent ima ugasen JS? A sto ako koristi browser 'Turbo Extra New Bullshit Browser ver. 1.08237456571' koji ne podrazava najosnovnije propertyje od layera... ?

Code:

<div style="margin: 0px auto"; width: 50%"> ovo je centrirano</div>

[maratz]

velcro wrote:

Mada ne kuzim - od svih linkova koje si poslao jedino ESPN i Lycos su table-free, svi ostali koriste table layout s cssom da strukturiraju samu stranicu a onda eventualno neki sadrzaj naglasavaju DIVovima... linkovi ti samo govori u prilog protiv table-less dizajna...

je, istina... protiv ovog ne mogu. Sad si me prešao...

[velcro]

Ma nije mi to cilj - koliko god cudno zvucalo, ja sam za table-less dizajn, samo sam sebi pokusavam to opravdati s obzirom na kolicinu vremena koju zahtjeva

[silence]

ok....evo moje iskustvo ko nekog ko hoće preći sa tabla na talbleless...

sve je to divno i krasno, ali zahtjeva too much previše faking hackova.
s tabelama znaš da će radit, i možeš ih uredit s CSSom, dakle definirat stilove i sve kaj ti treba.

jučer dok sam radio na prvom tablelessu, više vremena sam se jebo sa hackovima i to za osnovne stvari nego sa samim dizajnom. otvorio sam neke od CSS webova koji su prikazani na adresama koje se bave sa CSSom kao napredni i slično i iskreno.....količina CSSa potrebana da se to napravi me ZAPREPASTILA.

jebote, ja napišem kraću skriptu koja upisuje vijesti u MySQL bazu, i onda ih vadi i prikazuje po određenim kriterijima na stranici nego kolko neki webovi imaju CSSa...i to zbog jebenih hackova za svaiki pojedini browser. sorry, ali ako ja moram potrošit više vremena na drkanje po tome kak će mi web izgledat u svim browserima (sa tabelama sam poprilično siguran i nema ni 5% problema ko sa CSSom) onda mi je point CSSa u kurcu.

da...cool je napravit layout bez tabela, uspio sam.....
ALI; iskreno, ma nema šanse da napustim tabele u nekim dijelovima dok god se ovakva sranja dešavaju.....
količina CSSa potrebna da jedan "niš posebno" web radi, a da je pisan totalno u CSSu je abnormalna za moje pojmove....
ne vidim APSOLUTNO ništa toliko posebno u tome da nema tabela, nego da je sve CSS.
ionako odvajam dizajn od ostatka jer mi je sve pisano u PHPu i jednostavno includiram kaj mi treba.

osobno mislim da je kombinacija jednog i drugog daleko najbolje rješenje koje zadaje najmanje glavobolje jer se ne moraš jebat sa svim tim hackovima i cross browser sranjima.....
svaki element tabele prihvaća definiranje kroz CSS, pa prema tome meni dosta......




tolko od CSS nooba,
ne znači da odustajem (NE MOŽE JEBENI KOMPJUTER BIT PAMETNIJI OD MENE), ali jednostavno NEMAM vremena za proučavanje svakog idiotskog hacka da dobijem ono kaj mogu dobit tabelama i da radi 100%......

eto......