View previous topic :: View next topic |
Author |
Message |
ez-rider
Joined: 20 Oct 2003 Posts: 76 Location: Zagreb
|
Posted: 06.07.2004 11:08 Post subject: CSS - logika |
|
|
Citao sam HTMLdog .. A list apart .. W3Schools .. i naravno mi3dot .. vezano za CSS .. i radim ja nesto malo u CSS .. _malo_ .. ali layout radim uz pomoc tablica .. a htio bih ako je moguce preci na CSS .. (nisam profi i ne mislim biti) .. e sada kuzim ja kako CSS code izgleda .. ali nije mi bas jasno kako se radi layout stranice baziran na CSS'u bez tablica .. logika stvari .. neki kostur .. pa ako ima neki dobar članak o tome negdje bilo bi super ..
hvala ..
.ez. |
|
|
Back to top |
|
|
zytzagoo mi3.crew
Joined: 25 Aug 2003 Posts: 1842 Location: Zagreb, Hrvatska
|
|
Back to top |
|
|
ez-rider
Joined: 20 Oct 2003 Posts: 76 Location: Zagreb
|
Posted: 06.07.2004 11:22 Post subject: |
|
|
hvala direktore ..
već sam našao par ok članaka ..
a trebam neki početak .. da moj super ultra jednostavni table design prebacim u css layout recimo .. tek da vidim kako to ide ..
hvala .. ez.. |
|
|
Back to top |
|
|
zytzagoo mi3.crew
Joined: 25 Aug 2003 Posts: 1842 Location: Zagreb, Hrvatska
|
Posted: 06.07.2004 11:31 Post subject: |
|
|
ez-rider wrote: | a trebam neki početak .. da moj super ultra jednostavni table design prebacim u css layout recimo .. tek da vidim kako to ide .. |
Nabaci neku sliku ovdje, pa cemo vidjeti - mozda netko dobije ideju kako bi zapoceo |
_________________ [+]I[+]am[+]my[+]own[+]religion[+] |
|
Back to top |
|
|
retro_one
Joined: 16 Sep 2003 Posts: 880 Location: DUBRAVA.
|
Posted: 06.07.2004 12:02 Post subject: |
|
|
hm..kod css-a je vazno da imas maste...jer svaki layout se da napravit na sto razlicitih nacina....dosta se moze dobiti koristenjem nekih trikova |
_________________ Just your average eccentric programmer. |
|
Back to top |
|
|
blackduke mi3.crew
Joined: 08 Sep 2003 Posts: 2681 Location: Zagreb
|
Posted: 06.07.2004 12:07 Post subject: |
|
|
black magic |
|
|
Back to top |
|
|
maratz mi3.crew
Joined: 24 Nov 2003 Posts: 1207 Location: ZAG
|
Posted: 06.07.2004 22:31 Post subject: |
|
|
blackduke wrote: | black magic | LOL! |
|
|
Back to top |
|
|
ez-rider
Joined: 20 Oct 2003 Posts: 76 Location: Zagreb
|
Posted: 07.07.2004 09:15 Post subject: |
|
|
http://www.inet.hr/~jprgomet/screenindex.jpg
to su familiy stranice .. 99,9% samo slike ..
ova stranica je sve table design i onda po cells su slike
a veliki jpeg je takav kakav jeste .. i onda ima #map koja ti daje linkove kada dodjes iznad malih slicica .. kada kliknes na link dobijes novu stranicu .. jedna velika tablica s 2 stupca i u njima su slike iz odredjenog mjeseca ..
http://www.inet.hr/~jprgomet/screenphoto.jpg
ja kada sam radio stranice bilo mi je bitno da su jakoooo jednostavne za update .. recimo novi mjesec napravim za 2 minute .. kopiram i rinejmam html od 4. u 5. mjesec i samo linkove na slike promjenim .. i hap tap .. imam novi mjesec .. to mi je jako bitno da bude iznimo lako .. inace nikad ne bi dodavao nista .
iskreno govorech .. mene ovo kako je slozzeno vrlo zadovoljava .. imam PSD file za taj glavni jpeg .. u kojeg dodam novi thumbnail .. malo doradim #map i to je to ..
e sada kako bi se ta glavna stranica mogla slozziti da je CSS i ima li potrebe uopce (realno nema .. ali da naucim nesto)
radio sam ja jos nekih stranica ..
recimo http://www.art-studio.tv .. vidjeti ces da je isto jako jednostavno napravljeno .. a razlog tome je jer ja ne znam bolje
imam ja ideja kako bi nesto napravio da bude vako nako .. ali na kraju ne znam to iskodirat u htlm, koji ustvari i ne pisem vec koristim dreamweaver .. iako sam uvalio iframe u code jer nisam skuzzio kako preko DW ..
inace volim kada je jednostavno .. "lako" na kilobajtima tj. brzo ..
eto .. jos citam taj CSS nije mi bas jasno .. valjda je iznimno jednostavan i jasan pa me to buni .. fali mi coda
hvala ..
.ez. |
|
|
Back to top |
|
|
zytzagoo mi3.crew
Joined: 25 Aug 2003 Posts: 1842 Location: Zagreb, Hrvatska
|
Posted: 07.07.2004 10:22 Post subject: |
|
|
ez-rider wrote: | e sada kako bi se ta glavna stranica mogla slozziti da je CSS i ima li potrebe uopce (realno nema .. ali da naucim nesto) |
Sve se moze. Samo je pitanje imas li vremena i volje sjesti i krenuti raditi ispocetka
Quote: | inace volim kada je jednostavno .. "lako" na kilobajtima tj. brzo .. |
Onda je css smjer kojim bi trebao krenuti
Quote: | eto .. jos citam taj CSS nije mi bas jasno .. valjda je iznimno jednostavan i jasan pa me to buni .. fali mi coda |
www.csszengarden.com - vidi sta oni sve izvode css-om
Elem, nije veliki problem prepraviti ovaj tvoj dizajn u tableless kôd, medjutim slaba je korist od teoretiziranja - treba sjesti i krenuti, to je jedini način da dobiješ kôda - kako naleces na probleme, tako ce ti google postati sve bolji prijatelj
CSS je jednostavan jednom kad shvatis box model i osnovni princip na kojem stvar funkcionira, a to je: semantički točan html kôd, kojeg "dizajniras" css-om. Dakle, naslovi su definirani kao <h[n]> tagovi, paragrafi čistog teksta kao <p>, itd. A onda u css-u kazes kako pojedini element treba izgledati.
CSS pozicioniranje je mrvicu kompliciranije (oslanja se na box model), ali i o tome na netu ima pregršt odličnih tutoriala, a i kad i gdje god zapneš, uvijek možeš pitati ovdje - kad shvatis sto je padding, a sto margin, te koje su razlike u istima kod pojedinih browsera, definitivno neces imati osjecaj da ti fali kôda
Za kraj, ja bih ovaj tvoj site krenuo raditi od manjih dijelova.
Kako kompletiras pojedine manje elemente, kasnije bi ih relativno pozicionirao u odnosu na glavni container u kojem je pozadinska slika ovaj veliki jpg, a sve bi to stajalo u jos jednom vanjskom containeru koji bi centrirao kompletan sadrzaj. A moglo bi se cak i izbjeci relativno pozicioniranje kada bi se prgomet at net napravio kao veliki naslov, pa ovaj paragraf teksta, pa ispod toga element koji u sebi sadrzi ovu 3x3 "tablicu", pa onda sljedeci element bi bila ova traka itd.
Naravno, pod "element" mislim na odredjenu kolicinu html i css koda, zato rekoh da bi krenuo prvo raditi te sastavne elemente, i onda bi ih smjestao gdje mi vec treba i metodom koja mi se u tom trenu ucini dobra
Sretno u svakom slucaju |
_________________ [+]I[+]am[+]my[+]own[+]religion[+] |
|
Back to top |
|
|
_butch
Joined: 10 Sep 2003 Posts: 870 Location: Maichno, Krlovc
|
Posted: 07.07.2004 12:42 Post subject: |
|
|
eo sajtić, no ovdje ti je naglasaak na liste i radjenje menia sa listama.
dobro ce ti doci |
_________________ FRENCH GUARD: No chance, English bed-wetting types.
I burst my pimples at you and call your door-opening request a silly thing, you tiny-brained wipers of other people's bottoms! Flikrac |
|
Back to top |
|
|
Tomica
Joined: 16 May 2004 Posts: 39 Location: Novi Marof, CRO
|
Posted: 07.07.2004 12:48 Post subject: |
|
|
Ja isto nisam neki meštar za web dizajn. Više volim PHP i kod. CSS koristim samo za formatiranje teksta, tablica i slika
Npr. imam css opisnik "pic" kojeg applayam na svaku sliku da bi dobio tanku liniju koju DW po defaultu stavlja u crno i neda ju farbati. Sa css-om mogu dobiti isprekidanu, točkastu, žutu ili plavu ...
CSS tagove nikad ne kodiram manualno nego obično koristim onaj CSS editor koji imam u DW-u, pa tu i tamo neke stvari samo editiram kad mi treba.
Što se tiće tablica lijepo je raditi sa CSS-om jer sekundno formatiraš čeliju tablice i osiguravaš da ti sve čelije budu isto formatirane. Isto tako ako ti je site veći a želiš promijeniti svojstvo neke čelije dovoljno je promijeniti CSS tag kojeg pucaš na te čelije i sve se samo posloži. Ja za to npr. ne koristim definiciju nad <td> tagovima nego isto imam svoj naziv pa aplayam na svaku čeliju kak mi treba.
E sad volil bi i ja naučiti nešto više, ali obično svi o tome teoretiziraju (ko i ja sad) a malo konkretiziraju pa je teže naučiti od drugih ... moraš istraživati sam! I ono što zytzagoo kaže: treba sjesti i raditi ispočetka! |
|
|
Back to top |
|
|
ez-rider
Joined: 20 Oct 2003 Posts: 76 Location: Zagreb
|
Posted: 07.07.2004 13:33 Post subject: |
|
|
_butch .. vidio sam taj site .. izvrstan tutorial za liste
www.csszengarden.com .. ludilo .. a i dobio sam "sliku" kako to funkcionira i sta je zytzagoo htio reci .. jerbo kada pogledash html bez css'a izgleda kao bug online 1995 .. a s cssom mrakacha! .. tako da mi je sada jasnije kako to ide ..
ali stranice koje radim su uglavnom s puno slika a malo teksta i neam nekog velikog sadrzzaja tako da css nema sta puno formatirat .. ali vjerujem da cu to isprebacivati .. u css s vremenom . prvenstveno sto mozzes puno preciznije definirat masu stvaru .. a i layout moze biti u pixel tocan sto je s tablicama jebada nekad ..
cini mi se da zbilja ima dobrih stranica o css'u i da cu te osnove pohvatat ..
anyway thanks . vjerujem da cu kroz koji tjedan imat nesto u css'u pa cu postat ..
.ez.
PS. jel se moze css'om odredjivat da X ide preko Y (jpeg preko txt i obrnuto) i onaj rollover na buttonima .. (kada se mjenja jpeg1 u jpeg2) jel se to mozze css'om?
PPS. jel mogu definirat neki kvadrat koji se uvijek postavlja u sredinu prozora browsera a druge elemente unutar tog kvadrata pozicionirat koordinatama udaljenosti od rubova kvadrata ? i tako onda slagat tekst i slike? |
|
|
Back to top |
|
|
red
Joined: 03 May 2004 Posts: 919 Location: Zabok
|
Posted: 07.07.2004 15:13 Post subject: Re: CSS - logika |
|
|
ez-rider wrote: | Citao sam HTMLdog .. A list apart .. W3Schools .. i naravno mi3dot .. vezano za CSS .. i radim ja nesto malo u CSS .. _malo_ .. ali layout radim uz pomoc tablica .. a htio bih ako je moguce preci na CSS .. (nisam profi i ne mislim biti) .. e sada kuzim ja kako CSS code izgleda .. ali nije mi bas jasno kako se radi layout stranice baziran na CSS'u bez tablica .. logika stvari .. neki kostur .. pa ako ima neki dobar članak o tome negdje bilo bi super ..
hvala ..
.ez. |
Toplo preporučam http://www.sitepoint.com/forums/ . Brdo topica koji će ti pomoći u CSS forumu, a sa strane ćeš naći i related atricles. |
_________________ Get busy living, or get busy dying. |
|
Back to top |
|
|
zytzagoo mi3.crew
Joined: 25 Aug 2003 Posts: 1842 Location: Zagreb, Hrvatska
|
|
Back to top |
|
|
ez-rider
Joined: 20 Oct 2003 Posts: 76 Location: Zagreb
|
Posted: 07.07.2004 15:19 Post subject: |
|
|
hvala svima .. zbilja ste prva liga ..
@ zytzagoo .. hvala majstore ..
.ez.
check PM |
|
|
Back to top |
|
|
ez-rider
Joined: 20 Oct 2003 Posts: 76 Location: Zagreb
|
|
Back to top |
|
|
zytzagoo mi3.crew
Joined: 25 Aug 2003 Posts: 1842 Location: Zagreb, Hrvatska
|
Posted: 08.07.2004 14:48 Post subject: |
|
|
Buduci da su ti ovi boxovi (#leftbox i #rightbox) floatani, to znaci da su "izvuceni" iz normalnog page flowa i zapravo se ne racuna da spadaju u visinu #mainboxa.
Problem jednostavno mozes rijesiti u firefoxu tako da #maniboxu odredis visinu uz pomoc height: propertya.
IMHO, float je dosta zajebana stvar, i katastrofalno je implementiran u IE-u, a u svakoj verziji postoje razliciti bugovi. Ako mozes, izbjegni floatanje i pokusaj sa relativnim pozicioniranjem dobiti isti raspored. A i trenutno koliko vidim i floatas i pozicioniras elemente, a to tek moze dovesti do problema kasnije kad se poveca broj elemenata, jer nikad ne znas kamo ce nesto sjesti, pogotovo na razlicitim browserima... |
_________________ [+]I[+]am[+]my[+]own[+]religion[+] |
|
Back to top |
|
|
ez-rider
Joined: 20 Oct 2003 Posts: 76 Location: Zagreb
|
Posted: 08.07.2004 15:04 Post subject: |
|
|
hmmz .. ja sam mislio da ako su pod <divom> od #mainboxa da su inside .. a nisu ..
puno je lakse napraviti bez floata (barem meni) s pozicioniranjem .. ali eto probao sam i float .. nista onda .. stavim #mainbox i u njemu slazem ostale ..
edit: samo ako imas recimo dva boxa .. i order je
--------
A
B
---------
i ti pozicionirash B da bude pored A .. dakle A B
browser tj. html jos uvijek ostavlja prostor ispod A veličine B
pa ako nakon B coda u html upišeš "neki tekst" dobiješ
-------------
A B
neki tekst
-------------
to onda vuche za sobom da SVE moras kasnije opet pozicionirat,
jer si jednom shebo html order .. jel tomu tako ?
.ez.
P.S. kako da postavim naša slova u FF mi ih ne pokazuje kako treba .. a stavio sam iso8859-2 |
|
|
Back to top |
|
|
zytzagoo mi3.crew
Joined: 25 Aug 2003 Posts: 1842 Location: Zagreb, Hrvatska
|
Posted: 08.07.2004 16:06 Post subject: |
|
|
ez-rider wrote: | edit: samo ako imas recimo dva boxa .. i order je
--------
A
B
---------
i ti pozicionirash B da bude pored A .. dakle A B
browser tj. html jos uvijek ostavlja prostor ispod A veličine B
pa ako nakon B coda u html upišeš "neki tekst" dobiješ
-------------
A B
neki tekst
-------------
|
Da. Jer si ga pozicioniranjem i dalje ostavio u document flowu gdje je i bio i pomaknuo od tog mjesta negdje drugdje. Dok kod floata, ne ostaje prostor (ili ne bi trebao, jel, jer element izlazi iz document flowa). A tesko je predvidjeti sto ce se dogoditi kad nesto floatas i jos nakon toga pozicioniras (nije "tesko", css specifikacije tocno kazu sto i kako bi se trebalo dogoditi, medjutim ne pridrzavaju se svi browseri bas svih specifikacija)
Quote: | to onda vuche za sobom da SVE moras kasnije opet pozicionirat,
jer si jednom shebo html order .. jel tomu tako ? |
Valjda
Nisam skuzio ovaj zadnji dio, ali ni ja sam nisam skroz na cisto bas sa tim float modelom, pozicioniranjem i ostalim - ucim na dnevnoj bazi, cak i kroz to kad nekom drugom pokusavam objasniti kako stvar funkcionira, odnosno kako sam ju ja shvatio.
I jos uvijek ne znam koji bi bio najlaksi nacin (da radi u svim browserima) za postici efekt "lijeve i desne celije" (kao kod tablica), a to bi mi olaksalo toliko muka u zivotu Jel se netko mozda zabavljao s ovim problemom detaljnije?
.ez.
Quote: | P.S. kako da postavim naša slova u FF mi ih ne pokazuje kako treba .. a stavio sam iso8859-2 |
Vjerojatno ih ne pises u iso-8859-2, nego u windows-1250 pa su ti s i z zeznuti. Instaliraj ultraedit ili neki drugi tekst editor koji podrzava macroe, pa si napravis macro koji ce pretvoriti slova u ono sto treba, konkretno:
"Š" -> "©"
"Ž" -> "®"
"š" -> "ą"
"ž" -> "ľ"
[© i ® su html entityi od copyright znaka i registered znaka, forum konvertiro automatski, trebaju bas biti ti znakovi]
A mozda mozes i u tom TopStyleu reci u kojem encodingu da snima i napravi konverziju prilikom snimanja?
A mozes i staviti windows-1250, ionako je sad vec widely podrzan, a idealno bi bilo u utf-8, al se s tim nisam igrao niti uhvatio u kostac jos, budem valjda jednom |
_________________ [+]I[+]am[+]my[+]own[+]religion[+] |
|
Back to top |
|
|
che.UP mi3.crew
Joined: 07 Sep 2003 Posts: 2320 Location: zagreb
|
Posted: 08.07.2004 16:24 Post subject: |
|
|
zytzagoo wrote: |
I jos uvijek ne znam koji bi bio najlaksi nacin (da radi u svim browserima) za postici efekt "lijeve i desne celije" (kao kod tablica), a to bi mi olaksalo toliko muka u zivotu :) Jel se netko mozda zabavljao s ovim problemom detaljnije?
|
well... mozda ti otkrivam toplu vodu al ja sam to radio na ovaj nacin i radilo mi je manje-vise svugdje, sad se ne sjecam vise...
pseudo kod
Code: | <container>
<div float left>bla bla lijeva celija</div left>
<div float right>desna celija</div right>
<div clear both>eventualno unutra</div>
</container> |
container drzi sve.
prva dva diva glume celije, a zadnji div sluzi da rastegne container onolko kolko je visoka najveca celija (potreban zbog toga jer prva dva izlaze iz normal flowa pa bi container imo jako malu visinu sto se primjeti ako mu se doda border). quite simple u biti... valjda :) |
_________________ UP | TypeTester | Accommodations App
Meni u Firefox-u ne radi AJAX |
|
Back to top |
|
|
zytzagoo mi3.crew
Joined: 25 Aug 2003 Posts: 1842 Location: Zagreb, Hrvatska
|
Posted: 08.07.2004 16:53 Post subject: |
|
|
che.UP wrote: | container drzi sve.
prva dva diva glume celije, a zadnji div sluzi da rastegne container onolko kolko je visoka najveca celija (potreban zbog toga jer prva dva izlaze iz normal flowa pa bi container imo jako malu visinu sto se primjeti ako mu se doda border). quite simple u biti... valjda |
Da, to toga sam i ja dosao, medjutim onda imam problema sa line heightovima ponekad, i ako mi treba nesto u pixel identicno, pomak postoji.
Al moze bit i da sam overall imao zajeb negdje drugdje.
I u ovom setupu vertical-align bas i ne radi uvijek kako bi trebao ili sam samo ja nesto zajebo? |
_________________ [+]I[+]am[+]my[+]own[+]religion[+] |
|
Back to top |
|
|
che.UP mi3.crew
Joined: 07 Sep 2003 Posts: 2320 Location: zagreb
|
Posted: 08.07.2004 22:41 Post subject: |
|
|
zytzagoo wrote: | Da, to toga sam i ja dosao, medjutim onda imam problema sa line heightovima ponekad, i ako mi treba nesto u pixel identicno, pomak postoji.
Al moze bit i da sam overall imao zajeb negdje drugdje.
|
pod pomak mislis razlika izmedju visina ta dva diva? to da, ne znam kako bi oba napravio da budu iste visine samo sa cssom, bez recimo js-a.
Quote: |
I u ovom setupu vertical-align bas i ne radi uvijek kako bi trebao ili sam samo ja nesto zajebo? |
kolko sam ja uspio shvatit (kad mi je trebalo) vertical-align nazalost nije najbolje podrzan .
kasnije mi nije bio ni potreban tak da ne znam... imas neki konkretan primjer? |
_________________ UP | TypeTester | Accommodations App
Meni u Firefox-u ne radi AJAX |
|
Back to top |
|
|
zytzagoo mi3.crew
Joined: 25 Aug 2003 Posts: 1842 Location: Zagreb, Hrvatska
|
Posted: 09.07.2004 10:04 Post subject: |
|
|
che.UP wrote: | kolko sam ja uspio shvatit (kad mi je trebalo) vertical-align nazalost nije najbolje podrzan. |
Mislim da je tu malo i kriva nasa precepcija sto vertical-align zapravo jest. I da se drugacije ponasa u table-cell elementima, a drugacije utjece na inline elemente.
Quote: | kasnije mi nije bio ni potreban tak da ne znam... imas neki konkretan primjer? |
Nemam konkretan, al mislim da sam otkrio sto me mucilo. Tak mi treba kad ne citam specse u detalje uvijek.
http://css-discuss.incutio.com/?page=AlignLeftAndRight
Konkretno, zaboravio sam stavit display: block, i definirat width za floatane elemente, jer po specsima floatani elementi moraju imati width definiran, inace su rezultati nepredvidljivi.
BTW, ovaj css-discuss wiki rula, stvarno ima korisnih stvari, a sve na jednom mjestu fino... |
_________________ [+]I[+]am[+]my[+]own[+]religion[+] |
|
Back to top |
|
|
che.UP mi3.crew
Joined: 07 Sep 2003 Posts: 2320 Location: zagreb
|
Posted: 09.07.2004 10:14 Post subject: |
|
|
zytzagoo wrote: |
Mislim da je tu malo i kriva nasa precepcija sto vertical-align zapravo jest. I da se drugacije ponasa u table-cell elementima, a drugacije utjece na inline elemente.
|
da, al kaj nije div po defaultu block level element? a display table-cell je isto nepredvidiv ovisno o browseru :)
Quote: | Nemam konkretan, al mislim da sam otkrio sto me mucilo. Tak mi treba kad ne citam specse u detalje uvijek.
http://css-discuss.incutio.com/?page=AlignLeftAndRight
Konkretno, zaboravio sam stavit display: block, i definirat width za floatane elemente, jer po specsima floatani elementi moraju imati width definiran, inace su rezultati nepredvidljivi.
BTW, ovaj css-discuss wiki rula, stvarno ima korisnih stvari, a sve na jednom mjestu fino... |
tnx, budem ga čekirao :)
ovo za width sam skuzio da mora inace se pokolje sve :) a disply block je obavezan (govorimo o floatanim divovima)? |
_________________ UP | TypeTester | Accommodations App
Meni u Firefox-u ne radi AJAX |
|
Back to top |
|
|
zytzagoo mi3.crew
Joined: 25 Aug 2003 Posts: 1842 Location: Zagreb, Hrvatska
|
Posted: 09.07.2004 10:23 Post subject: |
|
|
che.UP wrote: | da, al kaj nije div po defaultu block level element? |
Jep. Zato i ne radi vertical-align na njemu kako sam mislio da ce raditi (barem tak pise u specsima, mozda sam i krivo procitao i protumacio, ne znam)
Quote: | disply block je obavezan (govorimo o floatanim divovima)? |
Ja sam zivio u uvjerenju da je div po defaultu block level? Pa da ne moram eksplicitno definirat display: block na njega ako ga floatam, ali izgleda da za neke browsere jos uvijek moram... Bo, neam pojma vise... Brain hurts, petak je |
_________________ [+]I[+]am[+]my[+]own[+]religion[+] |
|
Back to top |
|
|
|