» »

Kako postaviti ozadje v CSS-ju

Kako postaviti ozadje v CSS-ju

gamemen ::

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 ::

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

enjst ::

Pri procentih uporabi pike namesto vejic.

gamemen ::

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 ::

Probaj s tem

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

enjst ::

Č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 ::

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 ::

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 ()

gamemen ::

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 ::

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 ::

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 ::

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 ::

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 ::

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 ::

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 ::

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 ()

technolog ::

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 ::

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 ::

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

enjst ::

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 ()

gamemen ::

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 ::

gamemen je izjavil:

stvar deluje super.
fajn :)

Zgodovina sprememb…

  • spremenilo: enjst ()

technolog ::

gnomee je 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 ::

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 ()

technolog ::

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 ::

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 ::

Zgornji in spodnji rob nista enaka.

Mislim na kaj takega:

gamemen ::

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 ::

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

technolog ::

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 ::

Ok bom sedaj probal skracat skupaj kakšen design.

Hvala vsem za pomoč in odgovore.

gnomee ::

technolog je izjavil:

gnomee je 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 ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1297300370 (24519) htmltroubles
»

Nasveti za dizajn spletnega servisa (strani: 1 2 )

Oddelek: Izdelava spletišč
544116 (2798) blackbfm
»

Izdelava spletnih strani v Photoshopu

Oddelek: Izdelava spletišč
453574 (2622) DiTi
»

Kaj menite o strani

Oddelek: Izdelava spletišč
241574 (1190) Tr0n
»

Velikost WEB strani

Oddelek: Izdelava spletišč
161505 (1152) njok

Več podobnih tem