[Oracle]

Hei

Äkki keegi oskab mõtteid anda milles viga, nimelt ainult Firefox näitab mõningaid objekte valesti.
Chrome, IE ja Opera näitavad ilusti.

[mikk36]

Oracle, ja lehe enda link?

[Etz]

[kusti85]

[mikk36]

See näide peaks kirjeldama antud olukorda ehk: https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_2

Roheline kast on eespool, kuna tema vanemaks olev //*[@id="sisu"] on kõrgema z-indexiga, kui muu kraam.

[Oracle]

Lehe aadressi leidsite jah õige.

Tänud sõnastusele viitamast, annan korrektuuri tegijatele edasi.

Aga see z-indeks ei tohiks mõjutada ju objekti koordinaate, vaid ainult kihtide järjestust?
Teiste brauseritega ju õige. Kuidas seda lahendada?

[andrusny]

See värviline div pannakse sul td id="sisu" sisse lõppu. Pane nüüd selle sisu le position:relative siis loetakse absolute koordinaadid selle servast muidu loetaksegi lehe servast täpselt nii nagu hetkel FOX kuvab. Võimalik, et pead sinna td sisse eraldi div tegema, millele relative annad, ei tea kuidas tabeli lahter üldse position peale suhtub.

[Oracle]

Ehh, seda segab kuidagi Script Transify. Kui selle ära järan, siis on roheline kast õigel kohal.

[mikk36]

Ah teistel piltidel asub see roheline kast üldse teise koha peal, vaatasin et peaks lihtsalt peidus olema

[Oracle]

Imelik, et teisi scripte Firefox ju töötleb: mousewheel, photoslider. Aga miks keeldub transify scripti töötlemast.

Ja igal pool mujal näitab ilusti: Windows Phone, Android tahvli brauser, Opera, IE, Chrome, jne.

[andrusny]

Sellise läbipaistva kasti saad ju väga lihtsalt css kirjutada, milleks mingi keerukas JS lisada. Pane sinna sisu sisse div, positsioneeri absolutega teksti alla, taustavärv peale ja alpha kanali overlay.

[mahfiaz]

#sisu {
background: rgba(102, 204, 0, 0.6);
}

Aga kuidas see #sisu järsku muidu normaalse lehe sees tabel sees on, sellest ma aru ei saa. Ilus komme on <table> elementi kasutada ainul siis, kui see päriselt ka tabel on.

[Oracle]

Suur tänu vihjete eest. Ei tea jah miks olen kunagi seda Transify scripti kasutama hakanud. Igaljuhul nüüd saan deklareerida läbipaistvuse lihtsamini. Ja kiire test näitas, et toimib kõigis levinud brauserites.
Ainuke asi mida Transify teeb, on Kontaktide lehel muudab tausta mitteläbipaistvaks, kui kursori sinna peale viid. Aga no seda ei pea siis kasutama. Oli selline lisavigur.

Aga sellest tabelist ei saa ma aru. Kas pean kuidagi teisiti selle kasti üles ehitama? Mitte kasutama tabelit?

Ma olen suht algaja, enamasti proovin ja katsetan kätt.

[mahfiaz]

#sisu:hover {
rgba(102, 204, 0, 1);
}

Tabelit ära kasuta jah. Selle asemel kasuta <div> elemente, neid võid üksteise sisse mitu ka panna, kui muidu border-eid puudu jääb. Ja heaks tavaks peetakse ka seda, et style="" atribuuti pigem ei kasutata, kõik mis võimalik, kirjutatakse klassidena CSS faili ja kehtivad nii paljudes kohtades korraga kui võimalik. Näiteks on sul <div class="sisu"><div class="sisemine">Siin on tekst</div></div> HTML ning CSS failis on vastavalt:
.sisu {
margin: 150px;
border: 1px solid gray;
}
.sisemine {
margin: 3px;
padding: 10px;
background: rgba(102, 204, 0, 0.6);
}

[Oracle]

Väga hea, tänud. Ma pean kõik koodi üle käima, saan palju asju lihtsustada.

See hover on lahendus küll aga muutub järsult. Transifyga sai muuta sujuvust ka aga asi seegi.

[mahfiaz]

transition: all 1s ease-in-out;

[Oracle]

Aitäh! Mõjub!

Aga kas saaks sellise rea css faili panna, et muudab sujuvalt igat värvi tausta läbipaistvaks?
Et teen hulga erivärvilisi kaste, panan ühise classi, ning hover muudab nad veidi läbipaistvaks.

[mikk36]

Oracle, kirjutad Javascriptis ise funktsiooni antud asja jaoks.
Soovitaks julgelt jQueryt uurida antud asja osas.

[mahfiaz]

mikk36, CSS3 on vahepeal täiesti kasutatavaks valikuks muutunud.

.klass {
background: green;
transition: all ease-in-out 2s;
}

.klass:hover {
background: rgba(0, 255, 0, 0.5);
}

ja loomulikult võib taust ka täiesti läbipaistev olla: background: transparent;

[mikk36]

mahfiaz, aga eri värvide tingimus lihtsa ühe reegliga?

[kuunar]

.sinine {background-color:blue;}
.roheline {background-color:green;}
.punane {background-color:red;}

.sinine:hover, .roheline:hover, .punane:hover {
opacity:0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
-khtml-opacity: 0.5;
filter: progid:DXImageTransform.Microsoft.Alpha( style=0,opacity=50);
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha( style=0,opacity=50)';
}

laksad värvi klasse juurde kuhu vaja. opacity-ga töötab ka antiik-brauserites ilma lisa akrobaatikata.

[Renka]

kuunar, opacity teeb siiski vähe muud kui alpha background

[kuunar]

ok, paar divvi ja mõni stiiliväärtus neile tuleks siiski lisaks, et ainult näiteks taust läbipaistvaks muutuks... Või mida täpsemalt mõtlesid?

Fade efekti saab muidugi ainult css3 või js-ga tekitada.

[Renka]

kuunar, mõtlesin seda, et üks teeb tausta läbipaistvaks ja teine teeb kogu elemendi koos selle childidega läbipaistvaks.

Aga kui juba eri värve CSSis määrata siis ei ole probleemi igale classile ka hover selectorit teha ja seal alpha läbipaistvusega tausta määrata.

[kuunar]

Saab ka nii, et ei muuda sisu läbipaistvust, nagu öeldud juurde vaja ühte-kahte wrapper klassi ja efekt toimib tagasi kuni näiteks ie5.5 ilma lisa/abi skriptideta Fade jaoks on siiski javascripti vaja vanades.