Animaatio+kuva päällekkäin

Kiitos "Katolla viihtyvälle nettinerolle" sain apua kenoviiva/kauttaviiva tarkastelusta. Uusi ongelma heti tilalle: Kotisivuillani on animaatioita, joille olen tehnyt sopivan "kuva-alustan. IE näyttää kuvat niinkuin olen ne asetellut eli siis päälleekkäin, mutta Netscape heittää animaation hornan tuuttiin. Ei auta vaikka korjaan sijainnin "picselikoodiin", animaatio steppailee yhä edelleen omilla teillään. Luulen, että tarvitaan jokin uusi koodi. Kiireinen ystävä vihjasi jostain "Div-koodista". Paljastakaa tietonne ja auttakaa animaationi oikeaan pesäänsä.
4305
Äänestä

Muut lukivat myös

Vastaukset 4

Vanhimmat

Kiitokset kiitoksesta ja hyvä jos auttoi. En tosin ole mikään nero - ainoastaan tovin pidemmän aikaa näiden juttujen kanssa räpläillyt. Apua kaipaan minäkin silti toisinaan ja toisinaan olen sitä täältä myös saanut.

Mutta asiaan:
Et kertonut minkätyyppisestä animaatiosta on kyse mutta ei kai sillä niin merkitystä ole. Elementti mikä elementti ja periaatteessa niitä kaikkia käskytetään samalla tavalla.

"Div-koodi" ei tavallaan ole yhtään mitään. Se on ainoastaan lohkoelementti jolle voidaan antaa mitä tahansa määrityksiä, mutta niinhän voidaan antaa liki kaikille muillekin. (Span on muuten vastaava tekstitason elementti). Molemmat ovat suurinpiirtein hyödyttömiä ilman css:ää.

No hitto, enhän minä edes pääse asiaan..

En todella tiedä mitä tarkoitat "kuva-alustalla". Käyttämäsi koodi ehkä selventäisi asiaa. Jokatapauksessa elementeille voi asettaa absoluuttiset arvot, eli käskeä ne sinne missä niiden halutaan olla. Elementille siis laitetaan tyyliksi vaikkapa:
style="left: 50px;top: 20%;"
Kuten huomaat, tuon voi antaa joko pixeleinä tai prosentteina.



Juu en tiedä auttoiko mitään kun en tainnut kunnolla ymmärtää kysymystä. Niin muuten, jos "Netscape ei näytä oikein" niin kysyisin vielä että mikä Netscape? NS4.x on sitten supersurkea css-toteutuksen osalta, uudemmat taasen haltsaavat nuo jo ihan hyvin.

Huh, ihan puhki olen lenkin jälkeen ja kohta pitääkin jo lentää töihin. Palaan yöllä asiaan jos olet tarkentanut kysymystäsi.. toivottavasti pää toimii silloin paremmin.

Äänestä

Minulla on hauskoja, pieniä liikkuvia giff-kuvia, joissa yleensä on transparent pohja. Näille olen "somistanut valokuvaa sopivaksi oleskelupaikaksi. Eli esim. tanssivalle linnulle olen maalannut sopivaan valokuvaan kukkia ja höyheniä, matoja ja munia etc., jotta kaapattu lintu vain viihtyisi.IE :ssä lintu viihtyy pesässään, mutta Netscape(en tiedä mikä selain se oli-katsoin naapurissa, itselläni on vain IE kun hermostuin kerran Netscapen "soutamiseen" ja viskasin pois) ei tunnu linnusta kodikkaalta ja hän muuttuu agressiiviseksi ja hyppää vaikka otsikkoom riekkumaan. Eli olen käyttänyt tällaista koodia:style=
"Z-INDEX:100;LEFT:298px;POSITION:absolute;top:5029 px -yksi esimerkki vain

Äänestä
  • Koodissasi on yksi ylimääräinen välilyönti, joka saattaa aiheuttaa ongelmia. top:5029 px on väärin, pitäisi olla top:5029px ilman välilyöntiä. Onko tuo 5029 tosiaan käyttämäsi luku? Pitää kyllä skrollata aika alas...

    Ja sitten mahdottoman sotkuinen selitys, pyydän anteeksi jo etukäteen. CSS-mittayksiköissä pitää siis aina olla mittayksikkö, joka liittyy lukuun suoraan ilman välilyöntiä (0 voi olla ilman yksikköä). Internet Explorerin vanhemmissa versioissa tämä(kin) asia toteutettiin väärin, ja IExplorer kelpuutti esim. tyylimäärityksen "height: 20", jonka se tulkitsi samaksi kuin "height: 20px", vaikka standardin mukaan kyseinen määritys olisi virheellisenä pitänyt jättää huomiotta. Internet Explorer 6:ssa on korjattu useita aikaisempien selainversioiden virheitä, mm. tämä. Mutta koska sivustoissa on käytetty paljon virheellisiä tyylimäärityksiä (itse asiassa Microsoftin oma Frontpage tuottaa virheellistä koodia), Internet Explorer 6 näyttää "vanhat" sivut ns. quirks modessa, mikä tarkoittaa, että se hyväksyy edellä mainitut virheet. "Uudet" sivut se näyttää ns. standards modessa, joka taas ei hyväksy (yhtä paljon) virheitä. Mistä se sitten tunnistaa "uudet" ja "vanhat" sivut? Se tutkii dokumentin alussa olevaa dokumenttityyppimäärittelyä (DOCTYPE). Jos määrittely puuttuu (niin kuin valitettavan yleisesti tapahtuu) tai DOCTYPE viittaa vuosien takaiseen HTML-määrittelyyn, IExplorer 6 menee quirks modeen. Jos se tunnistaa DOCTYPEn kohtuullisen uudeksi, se näyttää sivut standards modessa eikä tällöin hyväksy esim. tuota 5029 px -määrettä. Uudet Netscapet ja Opera eivät hyväksy sitä missään tilanteessa. Internet Explorer 5.5 ja vanhemmat hyväksynevät virheellisen määrittelyn aina.

    Eli siis: oletan, että html-dokumentissasi ei ole alussa dokumenttityypin määrittelyä. Internet Explorer hyväksyy tällöin tuon väärän tyylimäärittelyn ja asettaa kuvan haluamaasi paikkaan. Kun yrität katsoa samaa dokumenttia Netscapessa, kyseinen tyylimäärittely hylätään ja kuva asettuu pystysuunnassa siihen kohtaan, jossa se sattuu lähdekoodissa olemaan.

    Kokeilepa Internet Explorer 6:ssa seuraavaa esimerkkiä, joka on virheetön XHTML-dokumentti, jonka alussa on dokumenttityypin määrittely:






    Otsikko














    Koska alussa on dokumenttityypin määrittely, Internet Explorer on standards modessa ja sininen suorakaide näkyy top-määreestä huolimatta sivun ylälaidassa. Poista sitten ennen -tagia tulevat rivit, tallenna ja avaa uudestaan Internet Explorerissa. Selain on mennyt quirks modeen ja hyväksyy nyt virheellisen top-määreen ja sininen suorakaide löytyy, kun skrollaa muutaman ruudullisen. Netscape hylkää top-määreen molemmissa tapauksissa ja näyttää suorakaiteen aina yläreunassa. Mutta jos poistat ylimääräisen välilyönnin top-määreestä, molemmat selaimet asettavat suorakaiteen oikeaan paikkaan.

    Enpä tiedä, oliko tästä mitään apua. Osaisiko joku selittää asian yksinkertaisemmin?

    Nyrkkisääntönä voi muuten pitää, että jos Internet Explorer 6 ja Netscape 7 näyttävät jokin asian eri tavalla, Netscape näyttää sen oikein. Mainitaan nyt tässä kuitenkin, kun z-indeksikin näyttää olevan esillä, että Netscape ei välttämättä sulata negatiivisia z-indeksin arvoja, vaikka ne sallittuja ovatkin. IExploreria ne eivät näytä haittaavan. Käyttämälläsi z-indeksin arvolla ei tosin liene mitään merkitystä ongelmasi kannalta.

    Äänestä

  • jjj kirjoitti:

    Koodissasi on yksi ylimääräinen välilyönti, joka saattaa aiheuttaa ongelmia. top:5029 px on väärin, pitäisi olla top:5029px ilman välilyöntiä. Onko tuo 5029 tosiaan käyttämäsi luku? Pitää kyllä skrollata aika alas...

    Ja sitten mahdottoman sotkuinen selitys, pyydän anteeksi jo etukäteen. CSS-mittayksiköissä pitää siis aina olla mittayksikkö, joka liittyy lukuun suoraan ilman välilyöntiä (0 voi olla ilman yksikköä). Internet Explorerin vanhemmissa versioissa tämä(kin) asia toteutettiin väärin, ja IExplorer kelpuutti esim. tyylimäärityksen "height: 20", jonka se tulkitsi samaksi kuin "height: 20px", vaikka standardin mukaan kyseinen määritys olisi virheellisenä pitänyt jättää huomiotta. Internet Explorer 6:ssa on korjattu useita aikaisempien selainversioiden virheitä, mm. tämä. Mutta koska sivustoissa on käytetty paljon virheellisiä tyylimäärityksiä (itse asiassa Microsoftin oma Frontpage tuottaa virheellistä koodia), Internet Explorer 6 näyttää "vanhat" sivut ns. quirks modessa, mikä tarkoittaa, että se hyväksyy edellä mainitut virheet. "Uudet" sivut se näyttää ns. standards modessa, joka taas ei hyväksy (yhtä paljon) virheitä. Mistä se sitten tunnistaa "uudet" ja "vanhat" sivut? Se tutkii dokumentin alussa olevaa dokumenttityyppimäärittelyä (DOCTYPE). Jos määrittely puuttuu (niin kuin valitettavan yleisesti tapahtuu) tai DOCTYPE viittaa vuosien takaiseen HTML-määrittelyyn, IExplorer 6 menee quirks modeen. Jos se tunnistaa DOCTYPEn kohtuullisen uudeksi, se näyttää sivut standards modessa eikä tällöin hyväksy esim. tuota 5029 px -määrettä. Uudet Netscapet ja Opera eivät hyväksy sitä missään tilanteessa. Internet Explorer 5.5 ja vanhemmat hyväksynevät virheellisen määrittelyn aina.

    Eli siis: oletan, että html-dokumentissasi ei ole alussa dokumenttityypin määrittelyä. Internet Explorer hyväksyy tällöin tuon väärän tyylimäärittelyn ja asettaa kuvan haluamaasi paikkaan. Kun yrität katsoa samaa dokumenttia Netscapessa, kyseinen tyylimäärittely hylätään ja kuva asettuu pystysuunnassa siihen kohtaan, jossa se sattuu lähdekoodissa olemaan.

    Kokeilepa Internet Explorer 6:ssa seuraavaa esimerkkiä, joka on virheetön XHTML-dokumentti, jonka alussa on dokumenttityypin määrittely:






    Otsikko














    Koska alussa on dokumenttityypin määrittely, Internet Explorer on standards modessa ja sininen suorakaide näkyy top-määreestä huolimatta sivun ylälaidassa. Poista sitten ennen -tagia tulevat rivit, tallenna ja avaa uudestaan Internet Explorerissa. Selain on mennyt quirks modeen ja hyväksyy nyt virheellisen top-määreen ja sininen suorakaide löytyy, kun skrollaa muutaman ruudullisen. Netscape hylkää top-määreen molemmissa tapauksissa ja näyttää suorakaiteen aina yläreunassa. Mutta jos poistat ylimääräisen välilyönnin top-määreestä, molemmat selaimet asettavat suorakaiteen oikeaan paikkaan.

    Enpä tiedä, oliko tästä mitään apua. Osaisiko joku selittää asian yksinkertaisemmin?

    Nyrkkisääntönä voi muuten pitää, että jos Internet Explorer 6 ja Netscape 7 näyttävät jokin asian eri tavalla, Netscape näyttää sen oikein. Mainitaan nyt tässä kuitenkin, kun z-indeksikin näyttää olevan esillä, että Netscape ei välttämättä sulata negatiivisia z-indeksin arvoja, vaikka ne sallittuja ovatkin. IExploreria ne eivät näytä haittaavan. Käyttämälläsi z-indeksin arvolla ei tosin liene mitään merkitystä ongelmasi kannalta.

    Aivan uskomatonta miten pitkiä ja tarkkoja vastauksia täysin tuntemattomalle miss Nobody:lle.
    Opin tästä jo paljon, kiitos siitä, sillä haluankin oppia.

    Äänestä

Kommentoi aloitusta


Esmeralda kirjoitti:

Kiitos "Katolla viihtyvälle nettinerolle" sain apua kenoviiva/kauttaviiva tarkastelusta. Uusi ongelma heti tilalle: Kotisivuillani on animaatioita, joille olen tehnyt sopivan "kuva-alustan. IE näyttää kuvat niinkuin olen ne asetellut eli siis päälleekkäin, mutta Netscape heittää animaation hornan tuuttiin. Ei auta vaikka korjaan sijainnin "picselikoodiin", animaatio steppailee yhä edelleen omilla teillään. Luulen, että tarvitaan jokin uusi koodi. Kiireinen ystävä vihjasi jostain "Div-koodista". Paljastakaa tietonne ja auttakaa animaationi oikeaan pesäänsä.

Anonyymi
5000

Ilmoita asiaton sisältö

  • Sisältää materiaalia, joka on loukkaavaa, herjaavaa, rasistista, uhkailevaa tai ahdistelevaa.

  • Materiaali sisältää nimiä, yhteystietoja tai muita henkilökohtaisia tietoja. Julkisuuden henkilöistä, julkisissa viroissa toimivista ihmisistä sekä yritysten vastuuhenkilöistä saa keskustella työhön liittyen. Myös yksityiselämään liittyvistä asioista voi keskustella siltä osin, kuin niistä on julkisesti kerrottu.

  • Sisältää lapsille haitallista tai heiltä kiellettyä materiaalia. Seksuaalinen sisältö on sallittua aiheeseen tarkoitetuilla palstoilla, joiden ikäraja on 18 vuotta.

  • Lainvastaista sisältöä voi olla mm. yksityiselämää loukkaavan tiedon levitys, kiihottaminen kansanryhmää vastaan, laiton uhkaaminen, alaikäisiin liittyvä seksuaalinen sisältö/grooming, petokset, identiteettivarkaudet, kunnianloukkaukset ja tekijänoikeusrikkomukset.

  • Sisältö ei liity palstan tai keskusteluketjun aiheeseen.

  • Viesti ei ole suomea tai ruotsia (pl. International Forums), se sisältää mainontaa, se sisältää tekijänoikeuksin suojattua materiaalia, se on massapostitus tai jokin muu syy.

Jaa keskustelu