Efekt boje - pitanje

Jedini CSS3 dodatak u konkretnom slučaju je box-shadow, a sve osatlo su bg slike.

Ili, ako koristi Chrome, desni klik na element na stranici i “Pregledaj element”.

hvala na savjetu. :slight_smile:
znam za firebug jer ga i ja koristim ali za neke određene stvari nemrem saznati iz Demo prikaza teme jer su na to kreatori mislili pa
nema podataka. ali nema veze došao sam do tih podataka iz drugogo izvora…

te imam jedan drugi problem pa ako može koji savjet :),
pomoću ovih funkcija :
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

bez obzira koja koristim bilo margin-top ili right želim pozicionirati određene objekte u temi i sada recimo
ako korsitim npr…margin-right: 20px; objekt se ne pomakne nego se smanji u tom smjeru i ako ja povečam na 100px
on se opet ne pomakne nego se skroz smanji… neznam u čemu bi mogao biti problem ?

hvala !

[quote=“chief_wolfinjo”]hvala na savjetu. :slight_smile:
znam za firebug jer ga i ja koristim ali za neke određene stvari nemrem saznati iz Demo prikaza teme jer su na to kreatori mislili pa
nema podataka. ali nema veze došao sam do tih podataka iz drugogo izvora…

te imam jedan drugi problem pa ako može koji savjet :),
pomoću ovih funkcija :
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

bez obzira koja koristim bilo margin-top ili right želim pozicionirati određene objekte u temi i sada recimo
ako korsitim npr…margin-right: 20px; objekt se ne pomakne nego se smanji u tom smjeru i ako ja povečam na 100px
on se opet ne pomakne nego se skroz smanji… neznam u čemu bi mogao biti problem ?

hvala ![/quote]

parent item ti ima odredjenu velicinu, ne mozes izac izvan njegovih kontura… to je problem… ili nisi odredio velicinu tom elementu…

ok. ako recimo nije određena veličina tog elementa i ja ju odredim dali bi tada trebalo raditi ?

da, uglavnom lakse ces nauciti css ako sam isprobavas…

[quote=“chief_wolfinjo”]hvala na savjetu. :slight_smile:
znam za firebug jer ga i ja koristim ali za neke određene stvari nemrem saznati iz Demo prikaza teme jer su na to kreatori mislili pa
nema podataka. ali nema veze došao sam do tih podataka iz drugogo izvora…

te imam jedan drugi problem pa ako može koji savjet :),
pomoću ovih funkcija :
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

bez obzira koja koristim bilo margin-top ili right želim pozicionirati određene objekte u temi i sada recimo
ako korsitim npr…margin-right: 20px; objekt se ne pomakne nego se smanji u tom smjeru i ako ja povečam na 100px
on se opet ne pomakne nego se skroz smanji… neznam u čemu bi mogao biti problem ?

hvala ![/quote]

Odgovor na pitanje neće ti pomoći jer ćeš nakon toga imati još deset sličnih pitanja. Preporučam da uzmeš malo vremena i proučiš ovo:
http://learncss.tutsplus.com/

Nakon toga će ti biti jasna neka pravila i osnove, pa onda dođi s eventualnim pitanjima. :slight_smile:

[quote=“avetma”]Odgovor na pitanje neće ti pomoći jer ćeš nakon toga imati još deset sličnih pitanja. Preporučam da uzmeš malo vremena i proučiš ovo:
http://learncss.tutsplus.com/

Nakon toga će ti biti jasna neka pravila i osnove, pa onda dođi s eventualnim pitanjima. :)[/quote]

a meni treba sada odgovor :kmech:

a nakon toga mogu proučavati :zub:

Da bi dobio odgovor moraš dati malo više informacija, link, sliku što želiš postići. Ovo bi bilo čisto nagađanje bez smisla. U ostalom avetma ti je dobro rekao.

Evo ti malo se poigraj.
http://kreativnikod.com.hr/demo/margine/index.html

Uglavnom da bi ti margina funkiconirala na način na koji si ti predvidio morao bi imati definiranu širinu elementa kojem postavljaš marginu.
Ukoliko ne želiš imati definirane širine onda ti je najbolje na roditeljskom elementu definirati padding.

Inače čudim se da već prije nisi zapeo na ovome, s obzirom da je to jedan od najčešćih problema uz display i float na kojem početnici zapinju i kojeg malo teže skuže.

[quote=“CreatifCode”]
Inače čudim se da već prije nisi zapeo na ovome, s obzirom da je to jedan od najčešćih problema uz display i float na kojem početnici zapinju i kojeg malo teže skuže.[/quote]

Što je obično problem za skužiti kod display deklaracije?

Ispričavam se mislio sam na position, a ne na display. Sve mi se već polako brka u glavi. :slight_smile:

Bok,

budem to sada proučio jer me zaista zanima :o

međutim u međuvremenu sam naišao na drugi problem oko backgrounda :kmech:

kad ubacim ovo :
body {background: url(…/images/blue.png) !important;}

normalno radi i background se prikaže…

ali kada ubacim ovo :
body {background: url(…/images/blue.png) 50% 50% fixed; background-size: 100% 100% !important;}

onda ne radi nego se samo prikaže bijela pozadina koja nema veze s pravim backgroudnom

a dimeznije slike koju želim koristiti za background je 100 x 100 pixels…

probao sam još neke ajmo reći trikove ali uopće ne reagira na to ?

sa ove stranice

dok recimo kad testiram na w3schools normalno radi.

molim pomoć :slight_smile:

Hvala !!!

body {background: url(…/images/blue.png) 50% 50% fixed; background-size: 100% 100%; !important;}
to ti je krivo napisano…

na sta ti se odnosi !important ? - na nista…

koristio si nadalje background-image… to ti je “50% 50%” u tvojem kodu, a oznacava gdje ce početi s kreiranjem pozadine…

morat ces malo bolje prouciti css, ne ovako bezveze samo bubati kod…

http://www.w3schools.com/cssref/css3_pr_background.asp

[quote=“chief_wolfinjo”]Bok,
budem to sada proučio jer me zaista zanima :o
međutim u međuvremenu sam naišao na drugi problem oko backgrounda :kmech:
kad ubacim ovo :
body {background: url(…/images/blue.png) !important;}

normalno radi i background se prikaže…
ali kada ubacim ovo :
body {background: url(…/images/blue.png) 50% 50% fixed; background-size: 100% 100%; !important;}

onda ne radi nego se samo prikaže bijela pozadina koja nema veze s pravim backgroudnom
a dimeznije slike koju želim koristiti za background je 100 x 100 pixels…
probao sam još neke ajmo reći trikove ali uopće ne reagira na to ?
sa ove stranice

dok recimo kad testiram na w3schools normalno radi.
molim pomoć :slight_smile:
Hvala !!![/quote]

Malo naje koristi enter dok pišeš post, postaje nepregledno za čitati, a i zauzima bezveze mjesto kad ideš odgovoriti. E sad kad smo to riješili, ajmo na pravi problem.

Prvo i prvo, malo je teško pojasniti jer zapravo ne znam što želiš ali ću pretpostaviti. Ti zapravo želiš jednu background sliku s gradientom koristiti kao pozadinu za body? Ako je tako onda jednostavno moraš napisati ovaj kod:
[HTML]body { background: #333444 url(…/images/bg.png) left top repeat-x scroll; }[/HTML] i to je doslovno sve što ti treba. E sad da malo pojasnim što sam ja tu napisao:

dakle prva stavka #333444 je boja pozadine koja će se pojaviti jednom kada slika prestane, ili koja će biti defaultna ako se slika uopće ne učita, ako koristiš gradient sliku kao bg onda ti je dobro postaviti da to bude boja s kojom završava tvoja slika, znači ako si radio u PSu sliku koja na vrhu ima #000000 boju, a na dnu #123456, onda ti je dobor da u background svojstvu prvu stavku postaviš također #123456 kako bi dobi prijelaz sa slike na običnu boju koji se nevidi

druga stavka ti je jasna - to je slika

treća i četvrta stavka su postavke gdje želiš pozicionirati bg sliku u ovom slučaju smo je postavili u gornjem lijevom kutu, a mogli smo reći center tada bi slika bila postavljena na sredini ekrana, možeš koristiti top bottom 0 0% za vertikalno pozicioniranje i left right 0 0% za horizontalno pozicioniranje

peta stavka - to je svojstvo kojim govoriš da želiš da ti se slika ponavlja po x osi, odnosno horizontalno, također postoje još repea ponavlja se u svim osima, repeat-y ponavlja se vertikalno i no-repeat ne ponavlja se nikako

i šesta stvaka je scroll ili fixed, ja sam stavio na scroll jer želim da mi se slika skrola skupa sa sadržajem, da sam stavio fixed onda bi slika bila fixna i bez obzira na sve ne bi se pomicala nigdje.

Kao što vidiš !important sam izostavio, a on ti služi tome da to svojstvo koje si napisao nigdje ne možeš pregaziti

Na primjer:

[HTML]
p { font-size: 13px !important; }
[/HTML]

e sad npr imaš negdje u tekstu nekakv paragraf s klasom important i htio bi napraviti ovo
[HTML]
p.important { font-size: 18px }
[/HTML]
E neće moći ove noći s obzirom da si gore postavio svojstvo !important na tagu p

Dakle vrlo oprezno s !important

Nadalje ovaj link koji si ut postavio tebi ne znači ništa, jer ti ne želiš full background nego gradient, a taj link objašnjava različite načine full page background implementacije, dakle kako jednu pozadinsku sliku rastegnuti na punu širinu i visinu ekrana bez obzira na rezoluciju. To tebi ne treba.

Ajmo dalje.

S obzirom da sam njemu sve objasnio tebe ću pitiati samo dva pitanja.

[quote=“zerocoolos”]body {background: url(…/images/blue.png) 50% 50% fixed; background-size: 100% 100%; !important;}
to ti je krivo napisano…[/quote]
Što je tu krivo napisano. Možda za njegove potrebe da, ali tu nema ništa krivog napisanoga.

Kako molim te lijepo na ništa? Odnosi se na to da nigdje i s ničim ne može pregaziti body background. CSS specificity je tu bitna.
http://www.w3.org/TR/CSS2/cascade.html#important-rules

http://www.w3schools.com/cssref/css3_pr_background.asp

I onda ga uz sve to još usmejriš na krivu stranicu. Zaboravi na w3c school, samo w3.org je bitan.

Upravo tako, isto to može napraviti i u Operi, a u IEu mu je dovoljan pritisak F12 na tipkovnici. :slight_smile:

[quote=“CreatifCode”]S obzirom da sam njemu sve objasnio tebe ću pitiati samo dva pitanja.

Što je tu krivo napisano. Možda za njegove potrebe da, ali tu nema ništa krivog napisanoga.

Kako molim te lijepo na ništa? Odnosi se na to da nigdje i s ničim ne može pregaziti body background. CSS specificity je tu bitna.
http://www.w3.org/TR/CSS2/cascade.html#important-rules

http://www.w3schools.com/cssref/css3_pr_background.asp

I onda ga uz sve to još usmejriš na krivu stranicu. Zaboravi na w3c school, samo w3.org je bitan.[/quote]
ok krivo sam testirao, zanemari… nisam gledao dobro za !important , tj mislio sam da je nece imati efekta ako je izvan propertya…