Kako postaviti ozadje v CSS-ju @ Slo-Tech

Forum » Izdelava spletišč »
Kako postaviti ozadje v CSS-ju

Kako postaviti ozadje v CSS-ju

gamemen :: 15. jul 2011, 15:29

Pozdravljeni!

Imam sledeč problem:

Jaz naredim v Photoshopu header, ki bi ga rad uporabil na spletni strani. Sedaj pa me zanima kakšen CSS naj uporabim, da bom lahko naredil liquid layout?

To je moj začetni CSS za spletno stran:

body {
text-align:center;
}

wrapper {
width:76,8%;
margin:0 auto;
text-align:left;
}

.header {
width:76,8%;
}

.menu {
width:76,8%;
}

.content {
width:76,8%;
}

.footer {
width:76,8%;
}

Rad pa bi naredil liquid stran ne pa fixed stran.

Rad pa bi dosegel to da se mi bo header lepo raztezal čez celoten monitor pa širini. In da ko bom zmanjšal resolucijo se bo tej resoluciji prilagodil.

LP

gamemen :: 15. jul 2011, 19:34

A noben ne ve kako je treba to narediti? :(

enjst :: 15. jul 2011, 20:21

Pri procentih uporabi pike namesto vejic.

gamemen :: 15. jul 2011, 21:12

Samo ni v tem problem. Ker če naprimer za header izberem samo eno barvo kot ozadje se lepo raztegne čez celoten zaslon.

Meni se noče header ki ga ustvarim v Photoshopu raztegnit čez celoten zaslon.

gnomee :: 15. jul 2011, 21:23

Probaj s tem

.wrapper {
width:auto; min-width:N px;
margin:0 auto;
text-align:left;
clear:both;
}

enjst :: 15. jul 2011, 21:27

Če imaš vejice, se ti vse raztegne čez celoten ekran, ker pri procentih niso veljaven znak.

To kar sprašuješ (prilagodljiva širina), bi ti moralo delovati. Glede headerja te pa ne razumem. Kaj si predstavljaš pod njim? Hočem reči, slika širine (recimo) 340px, ki jo imaš v "div class='header'" se ti ne bo raztegnila.

gamemen :: 15. jul 2011, 22:01

enjst:

Vidiš to kar si rekel slika določene širine ki jo naredim v Photoshopu kot header, to bi rad naredil kot prilagodljivo širino.

Samo nevem kako naj to naredim.

enjst :: 15. jul 2011, 22:31

Formati jpg, gif, png in podobni (ne verjamem da kateri sploh) se ne morejo avtomatično (s pomočjo css ali kakšnih drugih "ukazov") prilagajati naključni širini strani.

Edino kar ti znam svetovati je, da headerju določiš neko barvo ozadja, sliko iz Photoshopa pa shraniš v gif ali png formatu (transparentno ozadje) in jo v headerju lociraš nekam na levo (oz. na skrajno levo stran).
Ali pa za desni (ali pa levi... ali pa oba) del slike (domnevam da gre bolj za grafiko kot pa za fotografijo) uporabiš enako barvo kot je (kot bo) barva (bg-color) headerja. Ampak to ima smisel samo, če je slika ožja kot "normalna" širina strani. Je pa precej kombinacij ozadja in slike (recimo image na bg-image, image na bg-color, posamezni elementi slike na bg-image ali bg-color, ... )

Zgodovina sprememb…

spremenilo: enjst (15. jul 2011 ob 22:39)

gamemen :: 15. jul 2011, 22:39

Sej to znam da določim headerju ozadje nato pa slike lociram.

Samo jaz pa sem zdaj v Photoshopu naredil bolj atraktivno ozadje ( različni efekti ki jih lahko dosežeš z Photoshopom ) in sedaj ne vem kako to ozadje prilagoditi širini strani.

enjst :: 15. jul 2011, 22:42

Ja, saj nisem mislil da ne znaš. Če je slika na levi in se staplja v barvo ozadja, potem dobi obiskovalec - kadar spreminja širino okna - "iluzijo" da je liquid.

gamemen :: 15. jul 2011, 22:45

Ja to vem. Samo pri CSS-ju lahko naprimer določiš barvo ozadja rdeča. To je malo brezvezno ozadje če je samo enobarvno.

Z Photoshopom pa lahko to rdečo poživiš na sto in en način. Tako da samo to še nevem kako bi sedaj to ozadje naredil liquid :(

enjst :: 15. jul 2011, 23:07

Tako da samo to še nevem kako bi sedaj to ozadje naredil liquid :(

Mislim da ga ne moreš (kar precej sem prepričan v to).

Mimogrede, če imaš header v wrapperju ki je širok 76,8% bodyja, je header potem širok samo 76,8% wrapperja. Ampak to nima veze s tistim kar sem pisal glede možnosti "avtomatičnega" prilagajanja jpg, gif, png ipd formatov širini strani.

gamemen :: 15. jul 2011, 23:14

Kaj pa poznaš kakšno drugo opcijo kako bi lahko naredil ozadje narejeno z Photoshopom liquid?

Kajti fixed ozadje že znam naredit in nato vstavit v HTML. Vendar bi rad stranem dodal večjo funkcionalnost in bi zato rad nekako naredil liquid based stran.

Ker osebno v Photoshopu naredim posebej header, meni, ozadje za vsebino in na koncu footer.

enjst :: 15. jul 2011, 23:27

Trenutno sem precej zgubljen pri tem, kaj sploh želiš. Najprej se mi je zdelo da približno vem.

Ok, ko na določenih straneh z "nefiksno postavitvijo" ožiš okno brskalnika (klik na desni rob okna in vlečeš v levo), se tekst sproti prilagaja širini sttrani. Je to tisto, kar razumeš pod "liquid"? Če ja, potem na nobeni od takšnih strani ne boš opazil da bi se novi širini okna prilagajale tudi velikosti slik tam.

technolog :: 15. jul 2011, 23:34

Liquid lahko narediš naprimer tako, da neko stvar razdeliš na tri dele: Levi, desni, in sredinski, ki se pač ponavlja. Drugače ne gre, ker CSS ni na ravni photoshopa. Komaj smo dobili senco na tekstu v CSS3! Na to, kako boš stran razrezal, moraš ponavadi mislit, že ko delaš design.

gamemen :: 15. jul 2011, 23:39

Ja to mislim pod liquid. Vem da se velikosti slik ne spreminjajo.

Evo naprimer en primer:

To je header spletne strani.

Kako naj sedaj to naredim da bo liquid torej da bo se raztezalo čez celoten zaslon pri različnih resolucijah?

Zgodovina sprememb…

spremenil: gamemen (15. jul 2011 ob 23:39)

technolog :: 15. jul 2011, 23:44

Enostavno. Za ozadje body-a daš 1-px širok tale gradient, ki se potem po širini ponavlja, tole sliko ki si jo nalepil pa daš na sredino dokumenta. Pa pazi, da jo daš čisto zgoraj, ker drugače se bo poznal zamik. In ta način dela v vseh brskalnikih, ki imajo več kot 1% na tržišču.

gamemen :: 15. jul 2011, 23:55

Evo stvar sedaj deluje.

Na tak način lahko naredim meni, vsebino in footer tudi?

Mogoče veš kako bi lahko še širino nastavljal da bi bila liquid?

Pa seveda hvala vsem za pomoč.

gnomee :: 15. jul 2011, 23:57

Lahko pa uporabiš CSS3 in narediš gradient s css-jom..

enjst :: 15. jul 2011, 23:59

Tako kot ti je Technolog napisal. S slike izreži (če boš uporabil prav to) 3 px širok pas (tam kjer ni napisa) in ga z "repeat-x" (vprašaj, če ne veš kaj in kako) uporabi za ozadje headerja.

Izgledalo bo tako kot na tretji slčici.

Zgodovina sprememb…

spremenilo: enjst (16. jul 2011 ob 00:00)

gamemen :: 16. jul 2011, 00:06

enjst:

Sem točno tako naredil in stvar deluje super.

Tako da še enkrat hvala vsem za pomoč, sedaj pa morem it par dizajnov naredit da bom osvojil pridobljeno znanje :)

Upam samo da me nebodo sedaj meniji, vsebina in footerji zajebavali :)

enjst :: 16. jul 2011, 00:07

gamemen je 16. jul 2011 ob 00:06 izjavil:

stvar deluje super.

fajn :)

Zgodovina sprememb…

spremenilo: enjst (16. jul 2011 ob 00:07)

technolog :: 16. jul 2011, 11:36

gnomee je 15. jul 2011 ob 23:57 izjavil:

Lahko pa uporabiš CSS3 in narediš gradient s css-jom..

Najbolj eleganz rešitev, ampak si je za enkrat še ne upam uporabljat, ker je browser support zelo slab. Še kake 3 leta bom počakal.

gamemen :: 16. jul 2011, 14:29

Eno vprašanje še imam.

Kako naj določeno sliko ki jo naredim v Photoshopu postavim za ozadje tako da se nebo ponavljala?

Naprimer tu sem se malo hecal in naredil tole sliko:

Kako naj zaj naredim da se mi nebo ponavljala ampak se bo lepo raztegnila čez celotno ozadje?

Zgodovina sprememb…

spremenil: gamemen (16. jul 2011 ob 14:29)

technolog :: 16. jul 2011, 14:34

Da se, ampak slik ni priporočljivo raztegovat. Probaj naredit tako sliko, da se bo dala ponavljat (to pomeni da se levi rob ujema z desnim in zgornji s spodnjim.)

gamemen :: 16. jul 2011, 14:58

Evo sem naredil sliko ki ima enake robove:

Sedaj pa sem jo probal razrezat in vstavit v HTML in mi nikakor ne uspe da bi zgledalo kot eno ozadje.

technolog :: 16. jul 2011, 15:01

Zgornji in spodnji rob nista enaka.

Mislim na kaj takega:

gamemen :: 16. jul 2011, 15:06

Evo poglej ozadje tega template:

http://www.4templates.com/view/website-...

Vidiš kako gre lepo iz modrega v belo?

No tudi jaz bi rad dosegel takšen izgled samo ne vem kako :(

Gandalfar :: 16. jul 2011, 16:08

1000px visok .png in sirok 1px, s prelivom :)

technolog :: 16. jul 2011, 16:30

Ja, isti trik kot smo ti ga že enkrat povedali.

http://slo-tech.com/forum/t476037/p3185...
Tale ne bo šel, ker gre na krog spodaj in se ne ponavlja po širini.

gamemen :: 16. jul 2011, 16:37

Ok bom sedaj probal skracat skupaj kakšen design.

Hvala vsem za pomoč in odgovore.

gnomee :: 16. jul 2011, 21:28

technolog je 16. jul 2011 ob 11:36 izjavil:

gnomee je 15. jul 2011 ob 23:57 izjavil:
Lahko pa uporabiš CSS3 in narediš gradient s css-jom..

Najbolj eleganz rešitev, ampak si je za enkrat še ne upam uporabljat, ker je browser support zelo slab. Še kake 3 leta bom počakal.

Uporabiš modernizr in bi moralo delovati :)

Vredno ogleda ...

	Tema	Sporočila	Ogledi	Zadnje sporočilo
	Tema	Sporočila	Ogledi	Zadnje sporočilo
!	Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 ) Tody Oddelek: Izdelava spletišč	1297	330449 (54598)	htmltroubles 27. feb 2021 23:15:17
»	Nasveti za dizajn spletnega servisa (strani: 1 2 ) roli Oddelek: Izdelava spletišč	54	4537 (3219)	blackbfm 22. avg 2011 14:57:58
»	Izdelava spletnih strani v Photoshopu gamemen Oddelek: Izdelava spletišč	45	3856 (2904)	DiTi 27. jul 2011 20:09:45
»	Kaj menite o strani jubax Oddelek: Izdelava spletišč	24	1732 (1348)	Tr0n 4. dec 2005 20:44:31
»	Velikost WEB strani DanKick Oddelek: Izdelava spletišč	16	1623 (1270)	njok 15. nov 2004 23:39:42

Več podobnih tem

Forum » Izdelava spletišč » Kako postaviti ozadje v CSS-ju

Kako postaviti ozadje v CSS-ju