div background image

nepoverljiv · 6.1.2010, 23:27

Pokusavam da ubacim sliku u pozadinu div-a ali ne vredi. Dao sam id, i u css-u sva podesavanja izvrsim i prihvati ali za background nema pojma. Slika mi se nalazi u folderu images. Kako da napisem podesavanje u css-u da taj div povuce sliku header.jpg

Patton · 7.1.2010, 1:57

Citat:

nepoverljiv kaže:

Pokusavam da ubacim sliku u pozadinu div-a ali ne vredi. Dao sam id, i u css-u sva podesavanja izvrsim i prihvati ali za background nema pojma. Slika mi se nalazi u folderu images. Kako da napisem podesavanje u css-u da taj div povuce sliku header.jpg

Daj css kod za taj div id, i gde ti se nalazi css u odnosu na tu sliku? Putanje su relativne.

holodoc · 7.1.2010, 16:20

Da pretpostavim da imaš sledeću strukturu sajta:

Kod:

/images/header.jpg
stilovi.css
index.html

Kao što Patton reče putanje su uglavnom relativne (grade se u odnosu na fajl koji poziva drugi resurs - sliku, tekst...) mada mogu da budu i apsolutne (nije preporučljivo). U slučaju strukture sajta koja je prikazan gore gde index.html poziva eksterni fajl stilovi.css u kome je definisano pravilo za id selector za header trebaju ti sledeće stavke.

index.html

HTML kod:

<head>
     <link rel="stylesheet" type="text/css" href="stilovi.css" />
</head>
<body>
     <div id="header"></div>
</body>

stilovi.css

HTML kod:

div#header {
     background:url(images/header.jpg) top left no-repeat;
}

nepoverljiv · 7.1.2010, 17:01

Ma nema pojma, toliko sam se iznervirao da sam digao ruke od toga. Napisem pravilnu putanju ali nema pojma da stavi sliku u pozadinu. Nego toliko sam se iznervirao sa div tagovima, da ne mogu da vam opisem. Zelim da napravim div, koji ce imati konstantu sirinu, da mu se nikako ne menja, a u zavisnosti koliko teksta ima da se visina podesava sama i da gura sve div-ove na dole automatski. Da li moze neko da mi napise html i css kod za ovakav primer dole. Bitno mi je samo da u kodu stoji kako da se layer-i nikad ne spajaju i da uvek budu iste sirine.

[/IMG]

Posto ne znam da ubacim sliku, moze pojasnjenje i za to ako je neko raspolozen, da bi mogli da vidite o cemu se radi, uh odlepicu

holodoc · 7.1.2010, 17:18

Smiri se i čuvaj živce za prave probleme kao što je poskupljenje spajalica u knjižarama i sl.

Da ne bi sada rastezali da li je slika dovoljno mala idi na sledeću adresu (http://picturepush.com/upa) izaberi svoju sliku i uploaduj je. Kad se završi proces slanja jednostavno copy/paste-uj link koji dobiješ u tekstualnom polju označenom kao "Hotlink for forums (1)" i snimi poruku.

nepoverljiv · 7.1.2010, 17:26

Ako nije frka baci pogled ovde http://picturepush.com/public/2740776

nepoverljiv · 7.1.2010, 17:28

[QUOTE=nepoverljiv;946385]Ma nema pojma, toliko sam se iznervirao da sam digao ruke od toga. Napisem pravilnu putanju ali nema pojma da stavi sliku u pozadinu. Nego toliko sam se iznervirao sa div tagovima, da ne mogu da vam opisem. Zelim da napravim div, koji ce imati konstantu sirinu, da mu se nikako ne menja, a u zavisnosti koliko teksta ima da se visina podesava sama i da gura sve div-ove na dole automatski. Da li moze neko da mi napise html i css kod za ovakav primer dole. Bitno mi je samo da u kodu stoji kako da se layer-i nikad ne spajaju i da uvek budu iste sirine. [QUOTE]

Jel nije frka da pogledas sliku sa linka i ovaj tekst pa da napises kod?

holodoc · 7.1.2010, 17:33

Pa gde tačno ide ova slika header.jpg pošto je jedna stvar pomoći oko problema a potpuno druga uraditi kompletan posao.

Usput, pošto je problem donekle sličan pogledaj ovu temu. Obrati pažnju na pominjanje "float sidra" u mom postu. Ima čak i slika

U tvom slučaju bi išla potpuno ista tehnika sa DIV layoutom u dve kolone. Pasuse bi odvajao klasičnim paragrafima a kad zatreba da postaviš sliku unutar diva desno ili levo staviš klasičan float. Nadam se da si razumeo.

nepoverljiv · 7.1.2010, 17:40

Pusti sliku, ona je totalno nebitna sad. Pomocu one teme sam uspeo samo da napravim scrool i nista vise, ne siri mi se layer ali mi nije to resenje. Jel bi mogao da napravis kod za onu sliku sto sam postavio. Samo kako bi ih postavio i da kad ubacujes text da se layer-i ne sire vec da guraju dole. Ako bi mi pomogao tako bio bih ti vecno zahvalan, i ako bi hteo ostavi poruku da hoces da ne jurim dalje. 3 dana vec sedim i istrazujem i dojadilo mi vise sto ne mogu da krenem dalje nego sam tu zakucao. Hoces da ti mail da mi posaljes kod ako te ne mrzi?

holodoc · 7.1.2010, 17:58

A da pogledaš temu malo bolje? Tamo imaš kompletno rešenje upravo za ovo što tražiš samo što je leva kolona uža umesto desne. Kad bih krenuo da objašnjavam kako da rešiš svoj problem bukvalno bih mogao da prepišem sve što sam napisao u onoj temi tamo.

Da probam da rezimiram još jednom mada mislim da je malo bespotrebno.

Napraviš prvo jedan glavni kontejner kome daš širinu od recimo 96% (mada možeš da staviš i 100%). U taj div staviš dva kontejnera pri čemu prvom daš širinu recimo 75% a drugom 25%. Zatim floatuješ ili oba kontejnera levo ili prvi levo a drugi desno. Ja bih lično floatovao oba levo. Ako budeš imao problema sa time da ti drugi kontejner uporno ide ispod prvog onda samo zameni mesta u HTML kodu prvom i drugom kontejneru (staviš prvo HTML definiciju za drugi pa za prvi).

Nakon toga napraviš klasni selektor (pošto se može desiti da sidro koristiš više puta) recimo .floatSidro i daš mu atribut clear:both u CSSu. Ostalo je samo da u HTML-u odmah iznad zatvarajućeg div taga za glavni kontejner (onaj od 100%) staviš novi div kontejner sa klasom floatSidro. I to je to.

Tekst u oba kontejnera stavljaš putem paragrafa (<p>) a ako je potrebno definišeš i odgovarajuće visine između linija (line-height) i margine između paragrafa.

Ovo bi trebalo da bude sasvim dovoljno ako makar i malo imaš iskustva sa CSS-om i HTML-om. Kompletan kod neću pisati jer bih samo dodao koji poen na kvalitet tvoje lenjosti ali ću ti pomoći da ispraviš eventualne greške nastale u pokušajima da sam napišeš kod

nepoverljiv · 7.1.2010, 18:26

Hvala puno, sada cu probati pa se javljam kasnije sta sam uradio

6.1.2010, 23:27	#1
nepoverljiv Član Član od: 13.4.2008. Poruke: 157 Zahvalnice: 7 Zahvaljeno 2 puta na 2 poruka	div background image Pokusavam da ubacim sliku u pozadinu div-a ali ne vredi. Dao sam id, i u css-u sva podesavanja izvrsim i prihvati ali za background nema pojma. Slika mi se nalazi u folderu images. Kako da napisem podesavanje u css-u da taj div povuce sliku header.jpg

7.1.2010, 16:20	#3
holodoc Deo inventara foruma Član od: 5.12.2005. Poruke: 6.785 Zahvalnice: 348 Zahvaljeno 1.892 puta na 1.077 poruka	Re: div background image Da pretpostavim da imaš sledeću strukturu sajta: Kod: /images/header.jpg stilovi.css index.html Kao što Patton reče putanje su uglavnom relativne (grade se u odnosu na fajl koji poziva drugi resurs - sliku, tekst...) mada mogu da budu i apsolutne (nije preporučljivo). U slučaju strukture sajta koja je prikazan gore gde index.html poziva eksterni fajl stilovi.css u kome je definisano pravilo za id selector za header trebaju ti sledeće stavke. index.html HTML kod: <head> <link rel="stylesheet" type="text/css" href="stilovi.css" /> </head> <body> <div id="header"></div> </body> stilovi.css HTML kod: div#header { background:url(images/header.jpg) top left no-repeat; }

7.1.2010, 17:01	#4
nepoverljiv Član Član od: 13.4.2008. Poruke: 157 Zahvalnice: 7 Zahvaljeno 2 puta na 2 poruka	Re: div background image Ma nema pojma, toliko sam se iznervirao da sam digao ruke od toga. Napisem pravilnu putanju ali nema pojma da stavi sliku u pozadinu. Nego toliko sam se iznervirao sa div tagovima, da ne mogu da vam opisem. Zelim da napravim div, koji ce imati konstantu sirinu, da mu se nikako ne menja, a u zavisnosti koliko teksta ima da se visina podesava sama i da gura sve div-ove na dole automatski. Da li moze neko da mi napise html i css kod za ovakav primer dole. Bitno mi je samo da u kodu stoji kako da se layer-i nikad ne spajaju i da uvek budu iste sirine. [/IMG] Posto ne znam da ubacim sliku, moze pojasnjenje i za to ako je neko raspolozen, da bi mogli da vidite o cemu se radi, uh odlepicu Poslednja ispravka: nepoverljiv (7.1.2010 u 17:25)

7.1.2010, 17:18	#5
holodoc Deo inventara foruma Član od: 5.12.2005. Poruke: 6.785 Zahvalnice: 348 Zahvaljeno 1.892 puta na 1.077 poruka	Re: div background image Smiri se i čuvaj živce za prave probleme kao što je poskupljenje spajalica u knjižarama i sl. Da ne bi sada rastezali da li je slika dovoljno mala idi na sledeću adresu (http://picturepush.com/upa) izaberi svoju sliku i uploaduj je. Kad se završi proces slanja jednostavno copy/paste-uj link koji dobiješ u tekstualnom polju označenom kao "Hotlink for forums (1)" i snimi poruku.

7.1.2010, 17:26	#6
nepoverljiv Član Član od: 13.4.2008. Poruke: 157 Zahvalnice: 7 Zahvaljeno 2 puta na 2 poruka	Re: div background image Ako nije frka baci pogled ovde http://picturepush.com/public/2740776

7.1.2010, 17:28	#7
nepoverljiv Član Član od: 13.4.2008. Poruke: 157 Zahvalnice: 7 Zahvaljeno 2 puta na 2 poruka	Re: div background image [QUOTE=nepoverljiv;946385]Ma nema pojma, toliko sam se iznervirao da sam digao ruke od toga. Napisem pravilnu putanju ali nema pojma da stavi sliku u pozadinu. Nego toliko sam se iznervirao sa div tagovima, da ne mogu da vam opisem. Zelim da napravim div, koji ce imati konstantu sirinu, da mu se nikako ne menja, a u zavisnosti koliko teksta ima da se visina podesava sama i da gura sve div-ove na dole automatski. Da li moze neko da mi napise html i css kod za ovakav primer dole. Bitno mi je samo da u kodu stoji kako da se layer-i nikad ne spajaju i da uvek budu iste sirine. [QUOTE] Jel nije frka da pogledas sliku sa linka i ovaj tekst pa da napises kod?

7.1.2010, 17:33	#8
holodoc Deo inventara foruma Član od: 5.12.2005. Poruke: 6.785 Zahvalnice: 348 Zahvaljeno 1.892 puta na 1.077 poruka	Re: div background image Pa gde tačno ide ova slika header.jpg pošto je jedna stvar pomoći oko problema a potpuno druga uraditi kompletan posao. Usput, pošto je problem donekle sličan pogledaj ovu temu. Obrati pažnju na pominjanje "float sidra" u mom postu. Ima čak i slika U tvom slučaju bi išla potpuno ista tehnika sa DIV layoutom u dve kolone. Pasuse bi odvajao klasičnim paragrafima a kad zatreba da postaviš sliku unutar diva desno ili levo staviš klasičan float. Nadam se da si razumeo.

7.1.2010, 17:40	#9
nepoverljiv Član Član od: 13.4.2008. Poruke: 157 Zahvalnice: 7 Zahvaljeno 2 puta na 2 poruka	Re: div background image Pusti sliku, ona je totalno nebitna sad. Pomocu one teme sam uspeo samo da napravim scrool i nista vise, ne siri mi se layer ali mi nije to resenje. Jel bi mogao da napravis kod za onu sliku sto sam postavio. Samo kako bi ih postavio i da kad ubacujes text da se layer-i ne sire vec da guraju dole. Ako bi mi pomogao tako bio bih ti vecno zahvalan, i ako bi hteo ostavi poruku da hoces da ne jurim dalje. 3 dana vec sedim i istrazujem i dojadilo mi vise sto ne mogu da krenem dalje nego sam tu zakucao. Hoces da ti mail da mi posaljes kod ako te ne mrzi?

7.1.2010, 17:58	#10
holodoc Deo inventara foruma Član od: 5.12.2005. Poruke: 6.785 Zahvalnice: 348 Zahvaljeno 1.892 puta na 1.077 poruka	Re: div background image A da pogledaš temu malo bolje? Tamo imaš kompletno rešenje upravo za ovo što tražiš samo što je leva kolona uža umesto desne. Kad bih krenuo da objašnjavam kako da rešiš svoj problem bukvalno bih mogao da prepišem sve što sam napisao u onoj temi tamo. Da probam da rezimiram još jednom mada mislim da je malo bespotrebno. Napraviš prvo jedan glavni kontejner kome daš širinu od recimo 96% (mada možeš da staviš i 100%). U taj div staviš dva kontejnera pri čemu prvom daš širinu recimo 75% a drugom 25%. Zatim floatuješ ili oba kontejnera levo ili prvi levo a drugi desno. Ja bih lično floatovao oba levo. Ako budeš imao problema sa time da ti drugi kontejner uporno ide ispod prvog onda samo zameni mesta u HTML kodu prvom i drugom kontejneru (staviš prvo HTML definiciju za drugi pa za prvi). Nakon toga napraviš klasni selektor (pošto se može desiti da sidro koristiš više puta) recimo .floatSidro i daš mu atribut clear:both u CSSu. Ostalo je samo da u HTML-u odmah iznad zatvarajućeg div taga za glavni kontejner (onaj od 100%) staviš novi div kontejner sa klasom floatSidro. I to je to. Tekst u oba kontejnera stavljaš putem paragrafa (<p>) a ako je potrebno definišeš i odgovarajuće visine između linija (line-height) i margine između paragrafa. Ovo bi trebalo da bude sasvim dovoljno ako makar i malo imaš iskustva sa CSS-om i HTML-om. Kompletan kod neću pisati jer bih samo dodao koji poen na kvalitet tvoje lenjosti ali ću ti pomoći da ispraviš eventualne greške nastale u pokušajima da sam napišeš kod

7.1.2010, 18:26	#11
nepoverljiv Član Član od: 13.4.2008. Poruke: 157 Zahvalnice: 7 Zahvaljeno 2 puta na 2 poruka	Re: div background image Hvala puno, sada cu probati pa se javljam kasnije sta sam uradio

Slične teme
tema	temu započeo	forum	Odgovora	Poslednja poruka
Acronis True Image problem	Eddie	Aplikativni softver	4	12.8.2009 17:53
Nero image drive Vista	jelenamm	Operativni sistemi	6	28.6.2008 16:39
Kako da narežem image file	Rakic90	Nosači podataka	1	30.12.2007 0:37