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">&nbsp;</div>
<div class="pi2">&nbsp;</div>
<div class="pi3">&nbsp;</div>
<div class="pi4">&nbsp;</div>
<div class="pi5">&nbsp;</div>
</a>
</li>
Str4wberry
Profil
Bloková značka <div> by neměla být uvnitř řádkového <a>.
ZaNe
Profil *
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
Nestačilo by tomu odkazu dát display: block; ?
Joker
Profil
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
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 *
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
ZaNe
odkaz by nebyl? Nějak si to pořádně nedovedu předstvit, co nám tu popisuješ.
ZaNe
Profil *
Tak vyřešeno: IE6, 7, Maxthon 2.5 musí mít zadáno v css
cursor:pointer;
jinak sice jako odkaz fungují, ale neukazují správný kurzor (ručičku) - u položek které nejsou přímo v CSS označeny jako odkaz:
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.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: