| Autor | Zpráva | ||
|---|---|---|---|
| ZaNe Profil * |
Zdravím,
je nějaký způsob jak dokopat prohlížeče jako IE a Maxthon, aby několik divů fungovalo jako jeden odkaz? Příklad: <a href=""> <div>něco</div> <div>něco2</div> <div>něco3<div> </a> Vytvořil jsem Image map pomocí CSS pro nepravidelný obrázek - vše funguje bezvadně, jek IE a Maxthon berou jako odkaz pouze první DIV. Konkrétně část CSS: /* menu položka 1 */
#nav li.events a{top:304px;width:60px;left:578px; height:11px;}
#nav li.events .pi1{width:120px;left:-5px;top:10px; height:10px;}
#nav li.events .pi2{width:146px;left:-15px;top:20px; height:39px;}
#nav li.events .pi3{width:122px;left:5px;top:54px; height:13px;}
#nav li.events .pi4{width:74px;left:52px;top:64px; height:15px;}
#nav li.events .pi5{width:60px;left:52px;top:-94px; height:15px;}
#nav li.events a:hover{background-position:-578px -885px;}
#nav li.events a:hover .pi1{background-position:-573px -896px;}
#nav li.events a:hover .pi2{background-position:-563px -905px;}
#nav li.events a:hover .pi3{background-position:-583px -939px;}
#nav li.events a:hover .pi4{background-position:-630px -949px;}
#nav li.events a:hover .pi5{background-position:-630px -949px;}HTML: <li class="events"> <a href="#1"> <div class="pi1"> </div> <div class="pi2"> </div> <div class="pi3"> </div> <div class="pi4"> </div> <div class="pi5"> </div> </a> </li> |
||
| Str4wberry Profil |
#2 · Zasláno: 19. 7. 2009, 00:25:15
Bloková značka <div> by neměla být uvnitř řádkového <a>.
|
||
| ZaNe Profil * |
#3 · Zasláno: 19. 7. 2009, 00:38:57
Když použiju nějakou jinou, stejně si to IE a Maxthon vyloží po svém. Potřebuji tam nějaký tag, kterému bych mohl přidělit jinou třídu. Ostatní prohlížeče si to vyloží správně.
|
||
| Jan Tvrdík Profil |
#4 · Zasláno: 19. 7. 2009, 09:09:08
Nestačilo by tomu odkazu dát display: block; ?
|
||
| Joker Profil |
#5 · Zasláno: 19. 7. 2009, 09:31:18
ZaNe:
„Když použiju nějakou jinou“ No ale pozor, ne jakoukoliv jinou, ale nějakou, která může být uvnitř odkazu. Například <span>. Potíž je v tom, že při: <a><div>...</div></a> nemůže div v odkazu být, takže si před něj prohlížeč domyslí </a> a bere to jako <a></a><div>...</div></a> Jan Tvrdík: „Nestačilo by tomu odkazu dát display: block; ?“ To ovšem neovlivní renderování HTML. |
||
| Bubák Profil |
#6 · Zasláno: 19. 7. 2009, 12:11:58
Pokud při hoveru neměníš obrázek v celém odkazu, tak bych to celé přepsal a použil jednotlivé odkazy.
Druhá možnost, do odkazu vložit SPAN. Jakýkoliv element můžeš v CSS deklarovat jako blokový. Element můžeš nechat prázdný, nemusíš do nich zbytečně cpát tvrdou mezeru. Není to proti specifikci a všechny prohlížeče tomu rozumí. |
||
| ZaNe Profil * |
#7 · Zasláno: 19. 7. 2009, 12:21:23
Použil jsem <span>....
Problém není v hover efektu - ten šlape bezvadně, ale protože jde o nepravidelný obrázek (3D vizualizace sídliště) - je každá jednotlivá část klikací mapy (každý dům) vyskládán z X obdélníčků, které jsou seskupeny pod jednu třídu <li class="něco">. Potřebuji, aby každou jednotlivou sadu "obdélníčků" pod danou třídou bral prohlížeč jako jeden odkaz. Pořádné prohlížeče, jako FF, Opera Chrome apod. to vezmou správně. IE a Maxthon zobrazí správně hover efekt, ale jako odkaz si vezmou pouze první "obdílník". Nevíte jak je dokopat, aby to vzali jako celek? |
||
| panther Profil |
#8 · Zasláno: 19. 7. 2009, 14:18:59
ZaNe
odkaz by nebyl? Nějak si to pořádně nedovedu předstvit, co nám tu popisuješ. |
||
| ZaNe Profil * |
#9 · Zasláno: 19. 7. 2009, 18:31:07
Tak vyřešeno: IE6, 7, Maxthon 2.5 musí mít zadáno v css
cursor:pointer; a Pokud by si to někdo chtěl stáhnout, tak tady je to bez border http://sladek-as.cz/test/ Tady je to s border, aby bylo vidět co jsem měl na mysli: http://sladek-as.cz/test2/ Nechám to tam do 22.7.2009 - pak to smažu! V obou případech jsou to dva soubory: index.php a situace.jpg Poznámka: je to pouze zkouška - tedy je to neučesané! Netvrdím, že je to ideální řešení, ale je to PURE CSS a funkční pod IE6,7,8, FF1.5, 2, 3, 3.5, Operou 9, Maxthonem 2.5, Safari 3.1, 3.2, 4, Chrome 1, 2, 3, Netscape 9 - tedy pokryto více jak 90% trhu s prohlížeči... Pokud byste někdo viděl nějaký problém dejte vědět. Jinak díky za spolupráci. |
||
|
Časová prodleva: 15 let
|
|||
0