[Kethmar]

Terekest HV rahvas.

Tekkis üks suur pähkel, mille sooviks ära õppida .

Nimelt, võtame näiteks EMT lehe.

Kodukas:
http://www.emt.ee/wwwmain?screenId=mainpage.private&language=EST&group=1

Nagu näete, on sisul mingi gradient, mille ülemine ja alumine osa on kreemjas toon ning keskel valge osa.


http://www.emt.ee/wwwmain?screenId=content.private&componentId=MenuComponent&actionId=menuSelect&actionParam=123&language=EST
Siin lehe on see valge osa venitatud olenevalt sisust.

Oskab keegi selle imenipi ära seletada?
Tänud!

[frygor]

Ülemine ja alumine osa eraldi piltidena.... Keskmise valge kohapeal on see murdepunkt. Nii sain mina asjale pihta.

[Absona]

Jap, tegemist on kahe pildiga: http://www.emt.ee/gfx/bg39.png ja http://www.emt.ee/gfx/bg38.png, mille peale genereeritakse sisu(flash, tekst, pildid jne).

[Kethmar]

http://www.emt.ee/wwwmain?screenId=content.private&componentId=MenuComponent&actionId=menuSelect&actionParam=180&language=EST


aga ikka ei saa ma aru, kuidas see tehakse(siin ju suur tekst sisuks vms) .

[gandalf]

kaks kohakuti asetsevat konteinerit. ühel on ülemine taust ja teisel alumine. vsjo.

[Kethmar]

Aga kuidas ma saan nii, et tekst, mida soovin teha, läheb nende mõlema sisse? St ma oskan ainult nii teha, et tekst on ühe konteineri sees. Ei oska täpselt seletada...Tähendab, kui ma teen juurde konteineri "sisu", siis kuidas ma selle sisu nii saan, et ta venitab seda keskosa...Ise oskan nii, et panen sisu ühe konteineri sisse ja siis alumine konteiner on tühi.

[oicu]

ülemisele pildidile annad kõrguse ära ja alumisele pildile annad kõrguse ära. vahepealne pilt, mis võib olla näited <td> taustaks, sellele lisad css'ga background-repeat:repeat-y

[mikk36]

oeh
<div> <-- selle konteineri taustaks paned pildi, mis käib alla äärde
<div> <-- selle konteineri taustaks paned pildi, mis üles äärde läheb
<p>sisu</p>
</div>
</div>

lisaks määrad veel min-height väärtuse sisemisele divile et taustad üksteisega ei kattuks

[Absona]

Kuidas nüüd seda lahti seletada, üpris keeruline on seletada aga ma üritan. Seal on niimoodi tehtud, et nüüd on uuesti kaks pilti: ülemine osa(http://www.emt.ee/gfx/bg28_2.png) ja nagu tähele paned, siis see on ainult umbes 120px kõrge(must-valge osa ainult). Ja vaatad nüüd teksti edasi, siis seal on ju taust ainult valge ehk mingit tausta polegi ja kui alla jõuad, siis on jälle 120px tausta osa (valge-must ja pilt näeb selline välja http://www.emt.ee/gfx/bg28_2.png), nagu tähele paned uuesti, siis pilt on ikka õiget pidi aga alumisel pildil kasutatakse hoopis "rotate" ehk pilt pööratakse 180 kraadi ringi.
Nagunii Teil nüüd tekib küsimus, et miks vasakul ja paremal on triibud koguaeg, seal kasutatakse "table" ja arvatavasti on "pixel" pandud "1px". Nimelt see kuvabki joone(vasakul on jälle png kasutatud). Ehk skeem näeb umbes selline välja: [PILT ALGAB::PILT::PILT LÕPPEB::-TEKST-::PILT ALGAB::PILT::PILT LÕPPEB]

[Kethmar]

Aga siis ei lähe tekst ju alumise pildi peale?

[Absona]

[oicu]

[mikk36]

http://mikk36.eu/test/taust.html

[Absona]

[andrusny]

[mikk36]

mis programmis sul veel see kala tekkis ?
no-repeat on ju peal, järelikult su programm ei austa seda

täiendasin oma faili vastavalt et sisu oleks ülipikk, ei esine sinu "näidatud" kala

[andrusny]

[mikk36]

Spoiler

[okpoiss]

Võta Firefox ja Firebug pluginaga uuri seda lehte. Seal saad inspekteerida igat elementi ja kogu lehte ja näitab sulle ära ka mingi konkreetse elemendi css-i.

[Kethmar]

Ma uurisin MIkk36 tehtud näidet ning üritasin sama asja teha, aga ma ajan endal asja vist vägaväga keeruliseks ning võin väga pange panna.
Ehk aitaks keegi sellega?

Mikk36 näide:
http://mikk36.eu/test/taust.html

Minu "versioon" sellest:

#yks {
background-image:transparent;
background-image:url(top.png);
background-repeat:no-repeat;
background-attachment:scroll;
margin:0;
padding:0;
height:100%;
width:100%;

}
#kaks {
padding: 25px;
min-height:300px;
background-image:transparent;
background-image:url(bottom.png);
background-repeat:no-repeat;
background-attachment:scroll;
margin:0;

}


Tänud igal juhul!

[andrusny]

[Kethmar]

Vabandan, et vana teema jälle üles tõstan, kuid ehk keegi oskab aidata.

Eelmine kord, kui küsisin, ma täiesti hakkama selle asjaga ei saanudki. Nüüd hakkasin uuesti proovima ning ikka jagu sellest ei saanud.

Keegi oskab öelda, mida ma valesti teen? Kood on selline:

[raitl]

pea-aegu.

[Traf]

Kuidagi väga keeruliselt lähenete asjale.

https://pastee.org/r7xuz

[Kethmar]

Tänud teile abi eest, kuid tekst ei lähe ylemina/alumine peale, vaid jääb nende kahe vahele. Oleks vaja just seda, et nad nende peale ka läheks.
Pilt:
(paremal on see, mida soovin, vasakul see, mis on):

Spoiler