Haluaisin tehdä taulukon, jonka solujen taustaväri vaihtuu, kun hiiren vie solun päälle.
Nyt mulla on tämmönen:
.taulukko td:hover {
background-color: #99ccff;
}
Tuo toimii Operalla, mutta IE:llä ei.
Lisäksi haluaisin tehdä soluista linkkejä. Siis siten, että hiirellä klikkaaminen missä tahansa kohtaa solua avaisi linkin. Ideoita?
Nyt mulla on tämmönen:
.taulukko td:hover {
background-color: #99ccff;
}
Tuo toimii Operalla, mutta IE:llä ei.
Lisäksi haluaisin tehdä soluista linkkejä. Siis siten, että hiirellä klikkaaminen missä tahansa kohtaa solua avaisi linkin. Ideoita?
Vastaukset 16
Vanhimmat
Esim. näin
td:hover ei taida kuulua perus-CSS:ään.
Tuo toimii, tiedän. Se vaan ei ole enää CSS:ää, vaan JavaScriptiä, jota vanhat selaimet eivät tue, mutta itkeköön sitten niiden käyttäjät.
Hover kuuluu kyllä CSS:ään, mutta IE tukee hoveria vain linkkien yhteydessä (a:hover), mikä on aika erikoista, sillä IE kuitenkin on selvästi käytetyin selain, minkä takia sen luulisi tukevan uusimpiakin tekniikoita.
Ainakin Opera ja Firefox tukevat td:hoveria.
....hoo haluaa tukea sivujaan? JavaScriptiä tukemattomien selainkanta on tällä hetkellä 0% muutaman desimaalin tarkkuudella.
Sen sijaan JavaScript saattaa (turvallisuus. y.m syistä) olla poiskytkettynä muutamalla prosentilla (< 10%) (erityisesti joissakin yrityksissä..)
Koulun koneissa on Netscape 4. Ei tue JavaScriptiä. Heh, luulis että tietotekniikan osastolla olis pelit ja vehkeet. No mut joo, koulussa vaan painotettiin sitä, miten sivut pitäis tehdä näkymään kaikilla selaimilla. Mut eipä mua nappaa jos joku muinaisjäänne ei sivua näe.
»koulussa vaan painotettiin sitä, miten sivut pitäis tehdä näkymään kaikilla selaimilla.»
Tämä on aivan oikea periaate, MUTTA se ei tietenkään välttämättä tarkoita sitä että sivujen pitäisi NÄYTTÄÄ SAMALTA kaikilla selaimilla.
Esimerkiksi vaikkapa sellainen että kyllä sivujen pitää toimia kunnolla vaikka Lynxillä (eikä se ole edes vaikeaa) mutta ei ole mitenkään mahdollista tehdä hyvännäköisiä sivuja jotka näyttävät samalta Lynxillä (joka ei ole graafinen selain).
Tämä saavutetaan aivan yksinkertaisesti niin että sivuista tehdään rakenteellisesti järkevä ja toimiva ja sitten suunnitellaan ulkoasua css:llä. Esimerkiksi NS4:ssä on varsin surkea css-tuki mutta sille voikin tehdä paljon yksinkertaisemman ulkoasun jossa ei käytetä kaikkia modernien selainten ymmärtämiä hienouksia.
Kyllä minä pidän hienoista ja näyttävän näköisistä sivuista mutta niitä ei pitäisi tehdä käytettävyyden kustannuksella.
Helppohan tuo taustavärin vaihto on tehdä mikäli solussa on linkkejä, ellei niin sit JS:llä onnistuu. Jos linkkejä niin tutustuppas http://css.maxdesign.com.au/listamatic/ Ratkaisu tehdään listoilla, mutta kävijälle ne näyttää taulukolta, katso esimerkit sivuilt
Ja miksikös asiaa ei voisi tehdä JS:llä? Eihän sillä ole sivujen toiminnan kannalta mitään tekemistä, jos JS pois toiminnast, niin vain taulukonsolun väri ei muutu, muuten sivu toimii. Ja sitten lisäät vielä ton td.hover.... niin värijuttu toimii Operalla ilman JS:ää
Älä määritä JS:llä taustaväriä kuten tossa esimerkissä on tehty, vaan uusi tyyliluokka, näin voit muuttaa helposti taustavärin.
Kai se sitten on niin tehtävä. :) CSS JS.
Eikös tämän pitäisi toimia:
SIVU.SHTML:
TYYLI.CSS:
.over { background-color: blue }
.out { background-color: white }
No, ei kuitenkaan toiminut.
Style-objektilla ei ole class-ominaisuutta.
Näin kuitenkin toimii:
var colorOver = 'blue';
var colorOut = 'white';
hello
Vielä helpommin:
Juuri tuota tarkoitin, kiitos.
Ja kiitos myös tosta loistavasta linkistä ( http://css.maxdesign.com.au/listamatic/).
Kyllähän tuo hooveri tuntuis toimivan kaikilla ei-IE-pohjaisilla selaimilla. Ja kuten niin moneen muuhunkin IE:n toimimattomuuteen, niin tähänkin on joku vääntänyt korjaussarjan.
Eli kopioit tämän tiedoston webbihakemistoosi:
http://www.relativelyabsolute.com/cssfocusandhover.htc
ja lisäät css-määrittelyihin:
body{behavior:url('cssfocusandhover.htc');}
Tuohan toimii!
On se hyvä että joku jaksaa päivittää IE:n toimivuutta kun Microsoftia se ei tunnu ollenkaan kiinnostavan.
Löytyiskö korjaukset myös IE:n object-elementin käsittelyyn, png-kuvien toimintaan, fixed-pulmaan, min/max-width ja min/max-height -määrityksiin ja muihin vastaantuleviin ongelmiin?
Toipa vaatii JS tuen päälle. IE7 taitaa olla tunnetuin tommosista systeemeistä, viime vilkasulla se tuki vaikka mitä juttuja. Jotkut noista tommosista "korjauksista" aiheuttaa sivujen selaimisen hidastusta ja ihme nykimistä, ellei koneessa ole tarpeeksi potkua joten noiden käyttöä kannattaa testata ja harkita.
http://dean.edwards.name/IE7/
http://wellstyled.com/css-minheight-hack.html
Yleensä teen sivut toimiviksi kaikilla muilla selaimilla, mutta joskus innostuu tutkimaan näitä mahdollisuuksia tehdä sivut toimiviksi jopa IE:llä.
En tiedä mitä toi vaatii/ei vaadi IE:ltä. Mutta muut selaimet ei tosta tunnu närkästyvän. Kun eivät reagoi tuohon mitenkään.
Mutta anyway, olen lopetellut sivujen toimivuuden tarkastelun IE:llä (päinvastoin kuin useimmat, jotka tyytyvät toimivuuteen PELKÄSTÄÄN IE:llä). Olen ottanut sen asenteen, että jos haluat käyttää rikkinäistä selainta, katso myös rikkinäisiä sivuja.
" Löytyiskö korjaukset myös IE:n object-elementin käsittelyyn, png-kuvien toimintaan, fixed-pulmaan, min/max-width ja min/max-height -määrityksiin ja muihin vastaantuleviin ongelmiin?"
Todennäköisesti useimpiin löytyy fiksauksia. Ainakin tuon fixed-pulman kanssa joskus ihmettelin ja löysin siihen korjauksen - ainakin joihinkin IE-versiohin.
Mutta kuten alla jo mainitsin - jos jotkut haluavat käyttää rikkinäistä selainta, niin tyytykööt rikkinäisiin sivuihin. "Ei se ole synti käyttää IE:tä, mutta on se saatanan iso häpeä".
Tuli vaan mieleen tällainen viritys, mut taitaa olla kuolleena syntynyt idea..=)
IE:llä testasin kun muita ei TÄSSÄ koneessa ole, mut pitäis toimia kyllä kaikissa muissakin, kertokaa jos väärässä..
Untitled