[html] <a href> om de <li> ipv erin.

[Icey]

Op internet kom je heel veel mooi css based dropdown menutjes tegen. En dat werkt niet alleen goed het ziet er ook prachtig uit. Een goed voorbeeld is bijvoorbeeld deze.

Echter zit er één minpuntje in, alleen de *tekst* op het 'knopje' is klikbaar. En ik zou graag de hele knop/balk klikbaar maken. En dus deed ik het volgende:

<li><a href="bla.htm">Knopje</a></li>

Vervangen door <a href="bla.htm"><li>Knopje</li></a>.

Dus een <a> om de <li> ipv erin. Snappen jullie het nog? Zoniet, ik heb hier een voorbeeldje gemaakt.

Op dat moment word de hele <li> als een klikbare link gezien, en het werkt ook prima onder mijn browser (mozilla). Echter heeft een vriend mij erop gewezen dat onder* Internet Explorer* sommige links verdwijnen, en weer terugkomen als je op bepaalde plekken met de muis eroverheen scrollt. Het is een beetje random, en omdat ik het moeilijk uit kan leggen heb ik een voorbeeldje gebouwd: hier. Onder Mozilla werkt het prima, de hele balk is klikbaar. Onder IE is ook de hele balk klikbaar, maar random verdwijnen dus items, of komen weer terug. Beweeg maar wat heen en weer met de muis over het menu en je begrijpt wat ik probeer uit te leggen.

Is dit een foutje in IE? Of is dit iets wat in de foute css zit? Ik heb wat zitten spelen met de witte achtergrond kleur en z-index maar ik kan het probleem niet vinden. Heeft iemand een suggestie of is het onmogelijk?

[simon]

javascript onClick gebruiken?

[Rickets]

Je kan die A een display:block; geven.

[Verwijderd]

dit is een fout in je html, want het mag gewoon niet

als browsers onconsistent gedrag vertonen op incorrecte syntax mag je dat geen bug noemen vind ik

heb ik nu een deja vu? [rml][ (X)HTML] ul binnen een a href[/rml]

[ Voor 73% gewijzigd door Verwijderd op 17-03-2005 15:10 ]

[Zoefff]

Dat kan je oplossen door in de CSS de a, a:hover en li elementen display:block; mee te geven

edit:

Zoals Rickets dus ook al zegt

[ Voor 21% gewijzigd door Zoefff op 17-03-2005 15:04 ]

[RwD]

of de ul een height:1% geven. Het klinkt als de peekaboo bug. Die heb ik toevallig vandaag gehad in iets dat ik aan het maken was, en die style="height:1%" lost het op zonder de layout te veranderen .

Mocht dit het niet oplossen, probeer de oplossing dan ook op andere elementen binnen de ul uit.

offtopic:
Ik hoef je niet te vertellen dat <a> om <li> niet mag, en dat je beter display:block of een onclick kunt doen volgens mij

[ Voor 6% gewijzigd door RwD op 17-03-2005 15:06 ]

[Verwijderd]

Verwijderd schreef op donderdag 17 maart 2005 @ 15:03:

heb ik nu een deja vu? [rml][ (X)HTML] ul binnen een a href[/rml]

haha, ja... ik klik op dit topic omdat ik dacht dat het de mijne was inderdaad aardig hetzelfde, zij het met een ander doel

[Icey]

RwD schreef op donderdag 17 maart 2005 @ 15:05:

offtopic:
Ik hoef je niet te vertellen dat <a> om <li> niet mag, en dat je beter display:block of een onclick kunt doen volgens mij

Ik heb de documenten erbij gepakt, en daar heb je volledig gelijk in . Nu is mijn voorbeeldje keurig html. Er zat een klein foutje in mijn css, maar helaas loste dat het probleem niet op.

Ik ben nu bezig geweest met de display:block; optie, maar dat werkt niet echt lekker mee. Ik wil gewoon de hele balk klikbaar, niet enkel de tekst

http://i-cey.net/test.htm

[Zoefff]

Ik heb het werkend op mijn eMule site, http://zoefff.gotdns.com/emulefaq/?id=home . Daarbij moet ik wel zeggen dat het in IE niet helemaal oke werkt

[Sappie]

Icey schreef op donderdag 17 maart 2005 @ 15:33:
Ik ben nu bezig geweest met de display:block; optie, maar dat werkt niet echt lekker mee. Ik wil gewoon de hele balk klikbaar, niet enkel de tekst

http://i-cey.net/test.htm

Dit werkt toch al aardig zoals jij het wilt? Wat je nog zou kunnen doen is de padding op de anchors toepassen ipv op de li's.

[Erkens]

offtopic:

klein tipje, doe in die li.folder:

Cascading Stylesheet:

li.folder { cursor: pointer; }

Dan krijg je bij die submenu's niet "plotseling" een andere cursor

[Icey]

Zoefff schreef op donderdag 17 maart 2005 @ 15:46:
Ik heb het werkend op mijn eMule site, http://zoefff.gotdns.com/emulefaq/?id=home . Daarbij moet ik wel zeggen dat het in IE niet helemaal oke werkt

Je heb het niet helemaal werkend zo te zien.. Onder IE is nogsteeds niet de hele knop klikbaar, enkel de tekst (bijv. bij het stukje 'errors').

Sappie schreef op donderdag 17 maart 2005 @ 16:02:
[...]

Dit werkt toch al aardig zoals jij het wilt? Wat je nog zou kunnen doen is de padding op de anchors toepassen ipv op de li's.

Nope, wat ik wil is dat de hele balk klikbaar word, echter is enkel de tekst klikbaar .

Erkens schreef op donderdag 17 maart 2005 @ 16:09:
offtopic:

klein tipje, doe in die li.folder:

Cascading Stylesheet:

li.folder { cursor: pointer; }

Dan krijg je bij die submenu's niet "plotseling" een andere cursor

Dat is een goede. Ik heb hem opgeschreven zodat ik het niet vergeet. Meestal zorg ik eerst ervoor dat alles werkt zoals ik wil dat het werkt en pak ik daarna mijn GUI boek erbij .

[crisp]

Ik heb het wel werkend, ook in IE. Het resultaat staat bovenaan deze pagina

Tip: geef naast een display:block je anchor ook een width en/of height.

[ Voor 33% gewijzigd door crisp op 17-03-2005 16:46 ]

[Icey]

crisp schreef op donderdag 17 maart 2005 @ 16:44:
Ik heb het wel werkend, ook in IE. Het resultaat staat bovenaan deze pagina

Tip: geef naast een display:block je anchor ook een width en/of height.

Nice!

width:100%; meegegeven aan mijn a { property: values } en tadaa, hij werkt!