[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

[Traf]

Aga võta paddingud ära ja peaks korras olema.

[Kethmar]

Jup, see aitas .
Kuid nüüd tekkis üks väike probleem veel- ta alustab kuvamist alumisest, mitte ülemisest osast. St, kui mul on 3realine lause, siis ta näitab alumist, mitte ülemist tausta.


//Edit, nvm. Sain vist korda. Ehk keegi oskab öelda, kas nii on normaalne teha?

[Traf]

Vaheta HTMLis ylemina ja alumine ära. Et oleks nii:

[Kethmar]

Firefoxis kõik korras, IE8-ga ka, kuid IE6-ga näitab ainult alumist osa. Oskad selle puhul aidata?

[jnt]

Ja, IE6 on absoluutne ajalugu.

Kui veebi teed, vaata asja Firefox'i, Opera, Safari ja IE8'ga. Kui väga usin oled, võid IE7'et ja punnitada.

[Renka]

jnt juttu ei tasu küll tõsiselt võtta.

IE6 ei saa aru min-height määrangust.

Sellejaoks on õnneks lihtne fix/häkk:

[Traf]

IE6 ei toeta selliseid asju nagu min-height.

Üldiselt maailm on lõpetamas IE6 toetamise ja sina võiksid sama teha.

[Kethmar]

Renka, panin important'i peale, kuid jälle tundub, nagu IE6 ei tunnistaks height väärtust. Kui võtan importanti maha, ei taha Firefox oma heighti laiendada(mis on loogiline).
Abi palun .

[Renka]

Kethmar, kõik need kolm rida panid ikka?

[Kethmar]

Renka, panin küll, kuid panin teises järjekorras(height:500px;min-height:500px;height:important!, kuid nüüd panin samas järjekorras, mis sul ning töötab.
Suured tänud sulle ja kõigile teistele, kes olid nõus väikest veebipoissi abistama .


http://kethmar.ee/naide/

Lõpptulemus

[jnt]

[raitl]

Ausalt öeldes ei saa ka mina aru nendest, kes iga hinna eest IE6'st veel kinni hoiavad. Milleks vaevata oma tööd igasuguste fixide ja häkkidega puhtalt sellepärast, et tädi Maali maal ei ole oma IE'd updatenud? Niikaua kui me ise nämmutame ja teeme IE6 compatible veebi, niikaua ka tädi maali seda IE6't kasutab.

[Kethmar]

Küsisin ka paarilt firmalt, nemad vastasid, et nad ka ei tee IE6-le enam lehti(kui just klient tungivalt seda ei soovi).

[Renka]

IE6'le otseselt teha tõesti ei tasu. Ei tee ise samamoodi. Aga mõningad lihtsad nõksud võiksid siiski ju teada olla. Nii, et vajadusel asi siiski IE6 peal enam-vähem töötaks.

jnt IE7 jutt oli pigem häirivam.

[Traf]

Lõpetasime firmas juba mõni aeg tagasi IE6 toe pakkumise. Saab ka seda kui vaja aga siis juba kui eraldi feature mille eest tuleb juurde maksta. Jämedalt kolmandik ajast kulus IE6 parandustele.

IE7 samas on veel täiesti olemas ja elus ja selle kadumist niipea ei näe. Pole ka viga, sest edasiminek eelneva versiooniga on tubli ja vajadus lisaparandusteks harv.

[keevitaja]

aga kui asi näitab korrektselt IE6-s, siis on ka ok IE 7-s?

[Traf]

mitte tingimata.

[keevitaja]

aga kuidas oleks mõttekam teha sellist layouti, kus üleval header, vasakul menuu, paremal siis sisu osa. kas oleks mõteks panna see sisu osa paika näiteks position:absolute või siis floatida selle vasaku menüü kõrvale?

[Traf]

see oleneb asjaoludest, aga üldiselt selline on ok:

HTML:

[jnt]

[guest1902]

CSS3 peaks mingi gradiendiasjanduse võimaldama.. piltideta loomulikult. Aga noh, see ei tööta muidugi kõigi brauserite puhul...

[Kethmar]

Eks see jah...ehk mingi 3-4aasta pärast mõttekas, kui CSS3 moes on.

[lääbar]

[jnt]

lääbar, kas sinu öeldust peaks aru saama nii, et ie6 toetab standardeid?

[Vermon]

Krt ma näen vaeva, et IE7 saada samamoodi tööle nagu FF,Chrome ja IE8.
Kui peaks veel IE6 peale ka mõtlema siis paneks vist ameti maha

Viimati tegelesin sellega, et IE7 ei taha z-indexit vastavalt standarditele arvestada.