Hi SD'ers,

Even een vraagje, ben benieuwd hoe jullie dit CSS technisch oplossen.

Menu's maak ik vaak op d.m.v. <ul> en <li> elementen, nou komt het vaak door dat klanten het hele menu-item klikbaar willen, dus dat het <a> element het hele <li> item opvult..

In het verleden heb ik verschillende uitkomsten gebruikt, zoals het toevoegen van een onclick op het <li> element, en via jQuery een 'hover' class toevoegen zodat het <a> element alsnog ook mee hovert. Al wordt dit vaak beperkt door het systeem waarin je werkt.. Of bijvoorbeeld het heel slordig uitrekken van een <a> element d.m.v. paddings.. Al werkt dit cross browser meestal niet geheel perfect..

Mijn vraag dus aan jullie, hoe bouwen jullie meestal menu's op, of voorkomen jullie dit probleem?

wat nou als je de <a> een display block geeft met width:100% en height:100% ??

Origineel gepost door Jason van der Zeeuw

wat nou als je de <a> een display block geeft met width:100% en height:100% ??

I don't know, is dat jouw methode? Heb het eerlijk gezegd nog nooit geprobeerd, ga het nu proberen ;-)!

EDIT:
Het werkt hier helaas niet..

Zowel a-tag als li-tag dislay block en een vaste dimensie geven?

Origineel gepost door Sabra Issa

Zowel a-tag als li-tag dislay block en een vaste dimensie geven?

Menu-items worden automatisch gegenereerd, dus in ieder geval de breedte zal altijd ongelijk zijn...

Ik heb inmiddels wel een goede oplossing d.m.v. mootools gevonden, zal ook ongetwijeld in jQuery moeten kunnen.. Ook lees ik hier en daar dat het a element een display:block meegeven ook zou moeten werken, enkel krijg ik het hier niet voor elkaar..

PHP Code:

        <script type="text/javascript" charset="utf-8"> 
            window.addEvent("domready", function(){
                /** Make LIs into links if necessary. */
               $$("#menu-top-menu li").each(function(li){
                   var a = li.getFirst("a");
                   if(!a) return;
                       li.addEvent("click", function(){
                           window.location = a.get("href");
                       })
               }); 
            });
        </script> 


Probeer eens op je li { width: 100%; height: 100%; display: block; }

Origineel gepost door Jonathan visser

Probeer eens op je li { width: 100%; height: 100%; display: block; }

Thanks Jonathan, je PB heeft me op weg geholpen. Ga morgen even spelen met display ;)

inderdaad zoals jason en jonathan zeggen..

display block; en width: 100% en height: 100%;