Css- ve FF jede v IE ne, plz help
9 příspěvků
Archiv diskusního fóra
Fórum je uzavřené a slouží pouze ke čtení. Některé informace mohou být zastaralé.
-
Použil sem tohle řešení hover efektu u obrázku, ale ve IE mi to nejede. Jedná se o tom, že po najetí na obrázek se zobrazí čára, která jeho obsah podtrhne. Nevíte jak to zprovoznit? HTML: ... <div id='vina'> <a href='neoklas.php?barva=bila'><img src='white.gif' alt='Bílá vína' /><img src='white2.gif' class='cara1'></a> </div> ... CSS: div#vina a { position: relative; } .cara1 { position: absolute; left: 0px; top: 28px; visibility: hidden; } a:hover img.cara1 { position: absolute; left: 0px; top: 0px; visibility:visible; }
-
Tak nedělej čáru jako extra obrázek, ale jako border-bottom. Mimo :hover bude mít barvu pozadí (ale bude tam, aby rozměry neposkakovaly), na :hover bude mít barvu viditelnou.
-
No, to v IE prostě neuděláš, IE se neřídí specifikací CSS, v IE můžeš :hover použít jen na odkazy.... jedině to ještě nakombinovat s javascriptem
-
Džej Ár: vsak to ma v odkazu
-
No, jo ;) ja jsem na ten kod nekoukal, jen jsem si precetl ten zacatek, kde bylo hover u obrazku... a hned jsem odpovidal ;)
-
Jeste to muzes udelat uplne jednoduse..resp-- <a href="neoklas.php?barva=bila"><img src="PRVNI OBRAZEK" onmouseover="this.src='DRUHY OBRAZEK';" onmouseout="this.src='PRVNI OBRAZEK';"> </a>
-
@MAtE HocKK To mě taky napadlo, ale akorát nedokážu pochopit jak v dnešní době css apod. musím na tento efekt používat javascropt, kterým se tohle vytvářelo už před sto lety...
-
Ale přece, až teď jsem se na to pořádně podíval, hover má sice u odokazu, ale mění viditelnost jiného objektu, což odkaz není, to prostě IE neumí, vývojáři u M$ si jdou prostě svým směrem a všeobecně uznávané standarty jim nic moc neřikají.... řešení pomocí nějakého obrázku s čarou mi nepříjde jako nějaký zrovna moc dobrý nápad, ale pokud to tak chceš mít, budeš asi muset sáhnout po tom javascriptu, no :-/ Navíc, pokud dobře rozumím tomu, k čemu sjou tam ty obrázky, tak je to jen navigace, což se obrázky dělat nehodí.... Já osobně bych se to snažil udělat jinak... třeba: <a href='neoklas.php?barva=bila' id="odkaz1"><span>Text odkazu</span></a> css: a #odkaz1{ width:sirka_obrazku px; height:vyska_obrazku px; background: url("obrazek_bez_cary.gif"); } a #odkaz1 span{ display:none; } a #odkaz1:hover{ background: url("obrazek s carou"); }
-
JS je tady skutečně úplně zbytečný. Obrázková navigace plná <img /> není tak úplně dobrý nápad, lepší bude textoé odkazy jenom zakamuflovat. Řešení pro moderní a přístupnou obrázkovou navigaci pomocí CSS: - V (X)HTML je nejlepší zapsat to jako nečíslovaný seznam, ukázka zde: <ul id="menu"> <li id="link1"><a href="home.html">Home<span></span></a></li> <li id="link2"><a href="about.html">About<span></span></a></li> <li id="link3"><a href="links.html">Links<span></span></a></li> </ul> - Seznamy a jejich položky mají všelijaké defaultní marginy, paddingy a odrážky, ty se pomocí CSS oddělají - Položky <li> dostanou nějaké rozměry a napozicují nebo nafloatují se dle potřeby - Položkám <li> se nastaví position:relative, aby se odkazy a spany (s obrázkovým pozadím) uvnitř nich daly absolutně pozicovat od jejich horních levých rohů - Spany uvnitř položek dostanou display:block, rozměry shodné s položkami a obrázková pozadí dle libosti. Teď to důležité: position:absolute; top:0; left:0 a z-index:1 je vysune do vrchní vrstvy, takže překryjí text odkazů. Pro IE bude možná potřeba vrazit jim cursor:pointer. Hover efekty je možné přidat si dle libosti, třeba změnu obrázkového pozadí spanu nebo libovolný border. Detailní popis zde: http://klient.plavacek.net/menu/menu.html Ještě jeden link o hledně řešení :hoveru v IE: http://www.maciweb.net/blog/web/clanek.php?clanek=102