[Opgelost!] Activatie link door hele vak ipv alleen tekst?

[anoniem]

Ik ben een beginner binnen webdesign en ben nu een website aan het bouwen via HTML/CSS. Waar ik even niet verder mee kom is dat ik een navigatie heb gemaakt met behulp van een unordered list (<ul>), de links in de navigatie heb ik opgemaakt via de externe CSS en zien er zo uit (tekst erin is natuurlijk veranderd ivm privacy): <ul class="menu"> <a href="pagina1.html"><li>Pagina1</a> <div class="first"> <ul class="menu"> <a href="pagina1a.html"><li>Pagina1a</li></a> <a href="pagina1b.html"><li>Pagina1b</li></a> </ul> </div> </li> De link ziet eruit als een rechthoekig blok met hierin de tekst. Bij de blokken 'Pagina1a' en 'Pagina1b' maakt het niet uit waar je op het blok klikt om de link te kunnen activeren, maar bij 'Pagina1' kun je alleen op de tekst zelf klikken in plaats van op het hele blok. Ik heb de </a> die nu achter 'Pagina1' geplaatst is al overal geprobeerd neer te zetten maar het maakt geen verschil. Wat klopt er niet in mijn code waardoor niet het hele blok 'aanklikbaar' is? (de blokken van Pagina1a en Pagina1b komen pas tevoorschijn als er met de muis over het blok van Pagina1 gegaan wordt. Hierbij maakt het dus weer niet uit waar je over het blok gaat...)

[anoniem]

Je hebt een fout in je code zitten: De eerste a(nchor) staat direct onder de ul. Terwijl daar een <li> moet staan. Waarschijnlijk moet [code:1:086ec4cf58]<a href="pagina1.html"><li>Pagina1</a>[/code:1:086ec4cf58] zijn: [code:1:086ec4cf58]<li><a href="pagina1.html">Pagina1</a>[/code:1:086ec4cf58] Verder kun je een link over zijn hele 'oppervlak' klikbaar maken door hem een display: block mee te geven in de stylesheet. Bijvoorbeeld: [code:1:086ec4cf58]ul.menu a { display: block; }[/code:1:086ec4cf58]

[anoniem]

Bedankt voor het antwoord. Zoals u beschrijft had ik het eerst in mijn code staan, ook bij de 'Pagina1a' en 'Pagina1b' links. Toen waren deze links ook alleen aanklikbaar op de tekst in plaats van het hele blok. Toen ik deze veranderde door de <a> te verplaatsen naar vóór de <li>, kon ik ineens wel het hele blok aanklikken, dus ik dacht dat dat de oplossing was. Dit kreeg ik alleen niet voor elkaar bij de 'Pagina1'. Waar ik de <a> heb staan (dan wel voor dan wel na <li>) maakt bij 'Pagina1' geen verschil, bij 'Pagina1a' en 'Pagina1b' dus wel... Mijn CSS voor dit deel is als volgt: ul.menu { list-style-type:none; margin-top:50px; margin-left:auto; margin-right:auto; display:block; border:no-border; width:170px; font-size:20px; text-align:center; vertical-align:middle; padding:0; } Hier staat dus inderdaad ook display:block; reeds in...

[anoniem]

[quote:2a8f9493b2="Soezie81"]... Hier staat dus inderdaad ook display:block; reeds in...[/quote:2a8f9493b2] Dat klopt, maar die moet aan de A worden toegekend. (zie mijn voorbeeld) Hier wordt de display: block nog aan de UL toegekend. On officieel zal de A, "het klikbare gedeelte" daardoor zijn moeder element gaan opvullen, in dit geval de LI. Daardoor zal de hele LI aanklikbaar worden.

[anoniem]

Gooly, super! Dat was inderdaad het probleem. Opgelost dus! Bedankt!

[anoniem]

Graag gedaan :)