Potřebuji radu ohledně css – jsem v koncích

17. 9. 2008 11:24:11

Při kódování menu jsem došel k problému, který se mi po třech hodinách hledání a zkoušení nepodařilo vyřešit. Problém je asi následující. Pomocí CSS jsem vytvořil menu, kdy po najetí na tlačítko se posune pozadí. Prostě efekt stisknutého tlačítka. Ve firefoxu vše ok. Ale IE 6 (6.0.29) se chová naprosto nelogicky a nestandardně. Po najetí kurzorem nad tlačítko se správně změní (tedy posune) pozadí prvku span, ale po vyjetí kurzorem mimo se to pozadí nevrátí do původní polohy a tlačítko zůstává jakoby stisknuté. Možná jsem si nevšiml nějaké blbosti. Předkládám jak kód html, tak i css:

XHTML:

a CSS:

Podotýkám, že jsem to zkoušen na dvouch počítačích, kde se chyba projevovala.

Pokud někdo vidí chybku, budu mu vděčný za radu.

17. 9. 2008 11:24:11

https://webtrh.cz/diskuse/potrebuji-radu-ohledne-css-jsem-v-koncich#reply127971

Vojta

(41 hodnocení)

17. 9. 2008 12:02:29

zkus nastavit "li a" display:block;

17. 9. 2008 12:02:29

https://webtrh.cz/diskuse/potrebuji-radu-ohledne-css-jsem-v-koncich#reply127970

Gul

17. 9. 2008 12:55:11

zkus nastavit "li a" display:block;

Zkoušel jsem nic se nezměnilo.

Dávám k dispozici odkaz na to menu i z obrázky. Zkuste to prosím jestě někdo v tom IE6, jestli vám to taky dělá neplechu.

http://webdesign.zbynkuv.net/css/index2.htm

17. 9. 2008 12:55:11

https://webtrh.cz/diskuse/potrebuji-radu-ohledne-css-jsem-v-koncich#reply127969

Tommas

(4 hodnocení)

17. 9. 2008 14:28:47

Taky se mi to v IE nevrací. V Opere je to OK.

Prostuduj nějaké css menu kde je hover efekt udělaný také posunutím pozadí.

Třeba některé menu odsuď: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/

Třeba tam v kódu najdeš nějaký "IE hack" nebo něco čím by to mohlo být. Nebo rovnou zkus předělat to svoje na některé podobné (jenom vyměň obrázky a nastav velikosti v px apod...).

17. 9. 2008 14:28:47

https://webtrh.cz/diskuse/potrebuji-radu-ohledne-css-jsem-v-koncich#reply127968

Gul

17. 9. 2008 14:35:30

Tak to už jsem taky zkoušel a tak jsem principiálně zkusil napodobit toto:

http://skolka.kramolna.cz/

Ale asi jsem to neudělal uplně do detailu, protože to stále nefunguje. Bohužel jsem ani nenašel onen IE hack na googlu, asi jsem volil špatná klíčová slova. Tento IE hack prostě neznám. Chybama se člověk učí. Takže prostě budu kopírovat ten fungující kód, až zjistím, čím to je.

17. 9. 2008 14:35:30

https://webtrh.cz/diskuse/potrebuji-radu-ohledne-css-jsem-v-koncich#reply127967

Vojta

(41 hodnocení)

17. 9. 2008 14:45:07

Bingo! :)

17. 9. 2008 14:45:07

https://webtrh.cz/diskuse/potrebuji-radu-ohledne-css-jsem-v-koncich#reply127966

Gul

17. 9. 2008 15:20:20

Bingo!

Mě to nefunguje ani po okopírování toho kódu mateřské školky.

Afu, bingo jako že je to řešení. Zkusil jsem to a stále nic ...

17. 9. 2008 15:20:20

https://webtrh.cz/diskuse/potrebuji-radu-ohledne-css-jsem-v-koncich#reply127965

Vojta

(41 hodnocení)

17. 9. 2008 19:10:15

Napsal Gul;115532
Afu, bingo jako že je to řešení. Zkusil jsem to a stále nic ...

Buď ten kousek přidej na konec uvedeného CSS, nebo v uvedeném změň 51px na 52px. Mně to chodí (FF/IE6/Opera), viz http://tmp.vbrazda.cz/wt/.

17. 9. 2008 19:10:15

https://webtrh.cz/diskuse/potrebuji-radu-ohledne-css-jsem-v-koncich#reply127964

Tomáš Mašek

(20 hodnocení)

17. 9. 2008 20:05:46

cau, povedal by som, ze takto:

zo zapisu v HTML vyhodit je to zbytocnost, teda:

Služby

CSS potom vyzera takto:

ul.menu #t1 a {background: url('tlac_sluzby.jpg') no-repeat 0 0; display:block}

ul.menu #t1 a:hover {background-position:-218px 0px; }

funguje, odskusal som v IE6.

to znamena, ze nebudes pozadie aplikovat na span, ale priamo na a tag.

17. 9. 2008 20:05:46

https://webtrh.cz/diskuse/potrebuji-radu-ohledne-css-jsem-v-koncich#reply127963

Tomáš Mašek

(20 hodnocení)

17. 9. 2008 20:06:27

samozrejmostou je danemu a tagu pridat display:block, aby sa z neho stal blokovy element.

// sorry nabuduce pouzijem edit :)

17. 9. 2008 20:06:27

https://webtrh.cz/diskuse/potrebuji-radu-ohledne-css-jsem-v-koncich#reply127962

Gul

17. 9. 2008 21:44:01

cau, povedal by som, ze takto:
zo zapisu v HTML vyhodit je to zbytocnost, teda:

Ten span má zásadní význam pro zakrývání textu obrázkem. Teda když chci vytvořit grafické menu a přitom zanechat text na pozadí. Tedy důležité pro vyhledávače, SEO a textové prohlížeče. Nerad bych se toho zbavoval.

Buď ten kousek přidej na konec uvedeného CSS, nebo v uvedeném změň 51px na 52px. Mně to chodí (FF/IE6/Opera), viz http://tmp.vbrazda.cz/wt/.

Zdá se, že je to mnohem lepší, ale stále ne dokonalé. Je divné, že i tvůj příklad dělá co nemá. Např. při odjetí myši je stále tlačítko stisknuto a dokonce se mi podařilo mít stisknutá dvě tlačítka zároveň. Ale myslím, že to bude stačit a tímto velmi děkuji za pomoc.

Ještě mi prozraď, jestli jsi na to přišel náhodou nebo je to nějaká méně známá chyba IE. Rád bych se poučil do budoucna.

Jo a na tomto místě ještě jedna věta, za kterou se předem omlouvám. Fuck off Internet Explorer, pěkně mě sere......

17. 9. 2008 21:44:01

https://webtrh.cz/diskuse/potrebuji-radu-ohledne-css-jsem-v-koncich#reply127961

Petr Stohwasser

(7 hodnocení)

17. 9. 2008 22:13:38

Ahoj,

stačí, když přidáš do CSS nějakou definici pro a:hover...

třeba a:hover { text-decoration: none; }

nebo a:hover { background-color: silver; }

17. 9. 2008 22:13:38

https://webtrh.cz/diskuse/potrebuji-radu-ohledne-css-jsem-v-koncich#reply127960

Vojta

(41 hodnocení)

18. 9. 2008 01:07:27

Napsal Gul;115803
Zdá se, že je to mnohem lepší, ale stále ne dokonalé. Je divné, že i tvůj příklad dělá co nemá. Např. při odjetí myši je stále tlačítko stisknuto a dokonce se mi podařilo mít stisknutá dvě tlačítka zároveň.

Co jsem zkoušel, tak chodilo bez problému ve zmíněných prohlížečích. IE6.0.2900 pod WinXP se SP2

18. 9. 2008 01:07:27

https://webtrh.cz/diskuse/potrebuji-radu-ohledne-css-jsem-v-koncich#reply127959

Gul

18. 9. 2008 07:51:55

Co jsem zkoušel, tak chodilo bez problému ve zmíněných prohlížečích. IE6.0.2900 pod WinXP se SP2

Navíc jsem přidal ještě další položky a zdá se, že hover efekt se provede správně pouze při přejetí sousedních tlačítek. Tlačítka ob jedno jsem schopný stisknou obě zároveň. Snapshot obrazovky ukazuje, co jsem popsal. Jak jsem říkal, je to elegantní řešení, ale ne na 100%.

stačí, když přidáš do CSS nějakou definici pro a:hover...

... kdo by to řekl :banghead:

Mantisa & Afu: Díky

18. 9. 2008 07:51:55

https://webtrh.cz/diskuse/potrebuji-radu-ohledne-css-jsem-v-koncich#reply127958

Tomáš Mašek

(20 hodnocení)

18. 9. 2008 08:38:16

Napsal Gul;115803
Ten span má zásadní význam pro zakrývání textu obrázkem. Teda když chci vytvořit grafické menu a přitom zanechat text na pozadí. Tedy důležité pro vyhledávače, SEO a textové prohlížeče. Nerad bych se toho zbavoval.

nepochopil si ma. pozadie - obrazok - musis aplikovat priamo na A tag, nie na span.

ked chces, tak text vnutri A tagu potom uzavri do spanu a nastav mu display: none.

to riesenie funguje... je to bezna vec, ktoru som riesil X krat.

mimochodom, nemyslim si, ze je to z hladiska SEO dobre. bohvie ako to budu brat vyhladavace. podsuvas im iny obsah ako uzivatelovi. podla mna by tam nemal byt skrty text, ale len title a alt atribut.

18. 9. 2008 08:38:16

https://webtrh.cz/diskuse/potrebuji-radu-ohledne-css-jsem-v-koncich#reply127957