Autor Zpráva
Hommer
Profil
Ahoj,
pri tvorbe stranek jsem narazil na zajimavou chybu IE. Chtel jsem udelat menu, kdy pri kazdem najeti na polozku menu se zmeni obrazek umisteny pod menu v absolutne pozicovanem tagu span, ktery ma nastavene rozmery na rozmery obrazku. Presneji receno, mam tam tech spanu tolik, kolik mam polozek menu, kazdy z nich ma ruznou pozici obrazku na pozadi a meni se pouze atribut display jednotlivych spanu. Na pozadi je nacteny jen 1 obrazek slozeny z vice obrazku, aby nebylo nutne porad nacitat obrazky ze serveru. Pro lepsi pochopeni se podivejte na ten obrazek. Ovsem nechtel jsem to delat pomoci JavaScriptu, kterym by to bylo mozna jednodussi, ale kdyz to jde pomoci CSS, tak proc toho nevyuzit, ze? no jediny problem byl v IE, jelikoz obrazky se sice zobrazily po najeti mysi, ale po odjeti mysi uz nezmizely...a taky pri zmene velikosti okna jaksi zustaly na miste, prestoze maji nastavenou absolutni pozici zleva v %, takze by se vlastne mely pohybovat. Dumal jsem nad tim, ale na nic jsem neprisel:(

vse jsem umistil na http://iebug.gametown.cz, konkretne:
HTML soubor: http://iebug.gametown.cz/index.html
obrazek: http://iebug.gametown.cz/obrazky.jpg

Diky moc za radu, jak to vyresit pomoci CSS, at uz ruznych IE hacku nebo nejak jinak.
Filips
Profil
Zkus tam dat jen místo :hover a:hover
Nevím co to udělá.
Hommer
Profil
Chova se to porad stejne i kdyz to zmenim na a:hover
mila
Profil
Nestudoval jsem, ale často je problém že nastavíš hover jen potomkovi a ne samotnému a.
IE prostě ignoruje a:hover div {} pokud na něco nenastavíš samotné a:hover. Stačí nějaká blbost...
Hommer
Profil
No nejdriv musim uznat svoji chybu v prispevku, misto tagu div mam vsude span, tak se omlouvam.
Myslim, ze IE neignoruje a:hover span {}, jelikoz to by se obrazky ani nezobrazily. Mam to takhle:

<div id="menu">
<a href="#" class="promitacka1">Link 1<span></span><br /></a>
...
</div>

a zapis CSS

.promitacka1 span {display: none;}
.promitacka1:hover span {display: block;}

coz IE interpretuje spravne - zobrazi ten span kdyz nastane hover, ale jaksi ignoruje udalost po odjeti mysi - tzn. obrazek nezmizi, prestoze by me.
Ovsem prisel jsem na zajimavou vec, kdyz jsem styly upravil, misto:

.promitacka1 span {display: none; background-image: url(obrazky.jpg); }
.promitacka1:hover span {display: block;}

jsem prehodil background-image takhle:

.promitacka1 span {display: none; background-image: url(obrazky.jpg); _background-image: none;}
.promitacka1:hover span {display: block; background-image: url(obrazky.jpg);}

obrazky se sice uz meni podle toho, na ktere polozce menu jsem, ale po odjeti mysi tam zustane porad obrazek, ktery tam byl naposled. Sice je to trochu lepsi, ale porad nic moc. Muzete se na to podivat.

2 mila:
mohl bys mi tu hodit priklad, prosim, bud mi to nefungovalo nebo jsem to spatne pochopil
ladik
Profil *
2Hommer
Mělo by to vypadat asi nějak takhle?
Mrkni se na tento příklad.
Bubák
Profil
Já mám dojem, že IE vidí 6 bloků nad sebou (span s display: block) a ten naposledy "přejetý" nechá nahoře. Není to "klasický" IE problém, o kterém píše mila, v CSS máš #menu a:hover { border-left-color: #56d947; - to by mělo stačit.

Možná ti pomůže tohle:
http://css.interval.cz/clanky/prohlizec-panoramatickych-obrazku/
Je to taky pure CSS a při přejíždění přes menu se posouvá pozadí.
Hommer
Profil
Dik moc, uz to mam hotove, ten clanek na Intervalu je super, moc mi pomohl. Reseni s JS udalostmi je sice zajimave, ale bohuzel to neni jenom CSS. No vyresil jsem to stejne jako na Intervalu akorat s tim rozdilem, ze menu nema na pozadi ten obrazek, ma ho na pozadi dalsi span, ktery je pod vsemi ostatnimi, tzn jakmile nad nim nic nebude, bude pozadi videt. Jediny problem byl s tim, ze zadny span neni skryty, jsou zobrazene akorat nemaji pozadi, takze jakmile najedu mysi nad obrazek, nastane udalost hover posledniho prvku menu. Tohle jsem vyresil dalsim spanem, ktery ja nad vsemi ostatnimi a ma pruhledne pozadi. Cele je to Text zde. Vsem vam diky za rady:)
Toto téma je uzamčeno. Odpověď nelze zaslat.

0