link van menu werkt niet op heel de knop.

Status
Niet open voor verdere reacties.

djeric

Gebruiker
Lid geworden
22 nov 2006
Berichten
955
Beste helpers...

Mijn menu knop werkt de link niet helemaal goed.
Ik moet exact op het woordje van het menu gaan staan, anders doet hij niets.
wel heeft heel de knop een mouse over effect.
Ik hoef maar iets van de tekst eraf te blijven en de link werkt al niet meer.

Iemand die weet waar dit kan zitten???

Code:
body {
    color: #222;
    font-family: arial, helvetica, sans-serif;
    font-size: 1em; /* letter groote inhoudt */
    line-height: 1.3; /* afstand tussen de teksten */
	background-color: #FFFF99; /* achtergrond website inhoudt, zoals bij radioboss te zien is */
	background-image: -linear-gradient(left, #FFCC00, #208193); /* achtergrond website inhoudt */
    background-image: -webkit-linear-gradient(left, #E6DF06, #208193); /* achtergrond website inhoudt */
    background-image: -moz-linear-gradient(left, #CCCC00, #208193); /* achtergrond website inhoudt */
    background-image: -ms-linear-gradient(left, #CCCC00, #208193); /* achtergrond website inhoudt */
    background-image: -o-linear-gradient(left, #CCCC00, #208193); /* achtergrond website inhoudt */
} 

h1, h2, h3, h4, nav {
    font-family: 'Orbitron', sans-serif;
}

h1 {
    color: brown;
    font-size: 1.3em;
    font-weight: bold;
    margin: 5 0 1.2em;
	text-align: center;
}


h2 {
    text-align:center;
    color: #cd6600;
    font-size: 1.0em;
    letter-spacing: 0.1em;
    margin: 0 0 0.8em;
    padding: 0;
	padding-top: 1em;
}

header {
    background-color: #208193; /* achtergrond kleur van de header onderste helft */
    background-image: url(../afbeeldingen/header.png); /* achtergrond kleur van de header bovenste helft */
    background-size: cover;
    padding: 1.5em 0.5em;
}

header a {
    color: white;
    text-decoration: none;
}

nav {
    background-color: #208193; /* menu achtergrond kleur */
    font-size: .85em; /* hoogte van het menu */
}

nav p.menuknop  {
    position: responsive; /* dit bepaald de positie waar het menu staat, bij absolute staat hij boven in de top */
    top: 0;
    right: 12px;
    font-family: courier, monospace;
    font-size: 35px; /* letter groote van de menu knop */
    line-height: 1;
    margin: 0;
}

nav p.menuknop a {
    color: white;
}

nav ul {
    display: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    border-top: 1px solid white;
    padding: .8em .4em .6em .4em;
}

nav a {
    color: #CCCC00; /* tekst kleur menu */
    text-decoration: none;
}

nav ul li:hover {
    background-color: #cc9933; /* achtergrond kleur menu bij mouseover */
}

nav ul li.submenu {
    position: relative;
}

nav ul li.submenu:hover ul {
    box-sizing: border-box;
    background-color: #208193; /* achtergrond kleur submenu bij mouseover */
    display: block;
    width: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
}

nav li li:first-child {
    border-top: none;
}

nav li li a:hover {
    color: #660000; /* tekst kleur submenu bij mouseover */
}

#hoofdmenu > li > a:hover {
    color: #660000; /* tekst kleur submenu bij mouseover */
}

article {
    padding: 1em;
}

aside h3, aside h4 {
        color: #02165a;
}

aside {
    padding: 0 0 1em 0;
    text-align: center;
}

footer {
    background-color: #003366;
    color: white;
    font-size: .95em;
    padding: 1em; /* dit is de hoogte van de onderste balk waar de copyright in staat */
    text-align: center;
}

footer a {
    color: white;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

img.rechts, img.links {
    box-sizing: border-box;
    display: block;
    margin: 0.5em auto;
    max-width: 100%;
}

@media screen and (min-width: 500px) {
    header {
        padding: 1.5em 0.5em; /* De 1e cijfer geeft de hoogte van het logo in schermen tot 500 px */
        text-align: center;
    }
    header h1 {
        font-size: 2.8em;
    }

    nav p.menuknop {
        display: none;
    }
    
    nav > ul {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }
    nav ul li {
        padding: 1.4em .4em 1.2em .4em;
    }
    nav ul li.submenu:hover ul {
        width: 8em;
        left: 0;
        top: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        border-top: 1px solid white;
    }
    nav > ul > li {
        border-top: none;
    }

    aside {
        background-color: transparent;
    }
    
    img.rechts {
        float: right;
        margin: 0.4em 0 0.4em .8em;
    }

    img.links {
        float: left;
        margin: 0.4em .8em 0.4em 0;
    }

}

@media screen and (min-width: 700px) {
    .art-aside {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    aside {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        font-size: .9em;
    }
    footer {
        background-color: #208193;
        background-size: cover;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    footer p {
        margin: 0.8em;
    }

}

@media screen and (min-width: 1000px) {
    header {
        padding: 1.0em 0.5em; /* 1e getal is de hoogte waar het logo komt bij schermen vanaf 500 px tot 1000 px  */
    }
    header h1 {
        font-size: 4.2em;
    }
    .nav-aa {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        max-width: 99%; /* Dit bepaalde de totale breedte van de website van het midelste vak. */
        margin: 0 auto;
        padding: 0.5em;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
     }
     nav {
         margin-top: 1.8em;
         -webkit-box-flex: 0;
         -ms-flex: 0 0 16%;
         flex: 0 0 16%;
     }
     nav ul {
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
     }
     nav ul li {
         border-top: 1px solid white;
     }
     nav ul li:last-child {
         border-bottom: 1px solid white;
     }
     nav ul li.submenu:hover ul {
        margin-left: 100%;
        top: -1px;
         width: 12em; /* breedte submenu knop. */
    }
 }
 
.links {
    float: left;
    margin: 0.2em 0.8em 0.6em 0;
}

.rechts {
    float: right;
    margin: 0.2em 0 0.6em 0.8em;
	width: auto;
}

.dansers  {
	margin-top: 2em;
	border: none;
}

.plaatje {
	background: transparent;
}

.spelers {
	text-align : center; 
	border: none;
	background-color: #cc9933; /* achtergrond kleur van de spelers */
}

 /* start code programma overzicht*/

table  { 

text-align : center; 

border : black outset 5px;  

table-layout: fixed;

font-weight : bolder; 

font-size : 14px; 

margin : 0 auto; 

width : 100%; 

}

/* start code dj team pagina*/

.team table  { 
width: 100%;
text-align : left; 
border: none;
} 

.team  tr{ 
background: none; 
} 

.team  a{ 
color: #ffffff;
} 
.team  a:hover{ 
color: #ffff00;
} 

 .foto  { 
background-color : #000000; 
width: 20%;
} 

 .vraag  { 
background-color : #006633; 
color : #FFFF33;
text-align : left; 
padding: 0.5em;
} 
 .antwoord  { 
background-color : #660000; 
color : #cccccc; 
text-align : left; 
padding: 0.5em;
}

/* stop code dj team pagina*/


.eric  { 

background-color : #C49F1B; 
}

.dijk { 

background-color : #00CCFF; 
}

.praet { 

background-color : #33CC66; 
}

.mcdonald { 

background-color : #6600cc; 
}

.dutch { 

background-color : #CC6600; 
}

.jolanda  { 

background-color : #993366; 
}

.tony  { 

background-color : #660000; 
}

.mastiek  { 

background-color : #6633CC; 
}

.hyper {
background-color : #0033CC; 
}

.nieuwe  { 

background-color : #CC3333; 
}

.start  { 

background-color : #CC3333; 
color : #cccccc;
font-size : 1.2em; 
} 
.einde  { 

background-color : #CC3333; 
color : #cccccc;
font-size : 1.2em; 
}

tr {
height : 40px; 
background : #544563; /* hiermee veranderd ook de achtergrond van de link tabel */
color : #FFFFFF;
} 

tr#kop2  { 

height : 30px; 

font-size : 1.1em; 

font-weight : bold; 

color : #c0c0c0; 

background : #c30; 
} 
 tr#kop2 td  { 
width : 210px; 
} 

.kop2  { 
background : #CC3333; 
color : #000099;
font-size : 1.2em; 
} 


/* stop code programma overzicht*/
 
 #balkbeneden {
    background-color: #333366;
    clear: both;
    font-family: varela,sans-serif;
    margin: 0 auto;
    width: 100%;
}

@media screen and (min-width: 1440px) {
#balkbeneden {
    width: 100%;
}
}

@media screen and (max-width: 800px) {
#balkbeneden {
    font-size: 1.5em;
    padding: 1.2em 0;
    width: 100%;
}
}

#inhoudbalkbeneden {
    padding: 0.8em 0;
    text-align: center;
    width: 100%;
	color: yellow; /* tekst kleur onderin */
}

@media screen and (max-width: 800px) {
#inhoudbalkbeneden {
    padding: 0.5em 0;
}
}

#inhoudbalkbeneden span {
    display: inline-block;
    font-size: 1.0em;
    padding: 0.5em 2em;
    white-space: nowrap;
}

@media screen and (max-width: 800px) {
#inhoudbalkbeneden span {
    padding: 0.25em 0.5em;
}
}

#inhoudbalkbeneden > span > a {
    color: #ff9900; /* tekst kleur van de link onderin */
    text-decoration: none;
}

#inhoudbalkbeneden a:hover {
    color: green; /* tekst kleur van de link onderin bij mouse over */
    text-decoration: none;
}

 .gecentreerd {
    display: block;
    margin: 0 auto 1em;
}

.audio {
text-align: center;
}

.klokje
{ 
color : #006600;
text-align : left; 
font-size : 1.0em;
margin-top: 2em;
}

.bestaan
{ 
text-align : right; 
font-size : 1.2em;
margin-top: -1em;
color : #ffff99;
}

#chat {
    width: 100%;
}

#icoontjes {
	position: relative;
	margin-top: -4em;
	background: #000000;
	color: green;
	text-align : center; 
	border: 1px;
	margin-left: 2px;
}

#regels {
	background: #000000;
	color: yellow;
	text-align : left; 
	border: 1px;
	margin-left: 2px;
}






HTML:
<!DOCTYPE html> 

<html lang="nl">

<head>
    <meta charset="utf-8">
    <title>Topdance radio - Home</title>
    <meta name="description" content="beschrijving">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
    <link rel="stylesheet" href="overig/basis.css" type="text/css" media="screen">
    <link href="https://fonts.googleapis.com/css?family=Orbitron:400,500" rel="stylesheet">
    <meta name="viewport" content="initial-scale=1.0, width=device-width">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <script src="overig/menuknop.js" type="text/javascript"></script>
</head>
 
<body>

    <header>
	    <img src="images/speakers.png" alt="muziek style" style="width: auto; max-width: 25%; height: auto;" class="links">
        <img src="images/speakers.png" alt="muziek style" style="width: auto; max-width: 25%; height: auto;" class="rechts">
        <img src="afbeeldingen/logo.png" alt="Logo" style="width: 300px; max-width: 50%; height: auto;" class="gecentreerd">
    </header>
    
    <div class="nav-aa">

            <nav>
                <p class="menuknop"><a href="#" onclick=toggle('hoofdmenu');>☰menu</a></p>
                    <ul id="hoofdmenu">
                        <li><a href="index.html">Home</a></li>
						<li class="submenu"><a href="luisterlinks.html" onClick="return true">Luister links</a></li>
                        <li class="submenu"><a href="djteam.html" onClick="return true">Dj team</a></li>
                        <li class="submenu"><a href="programma.html" onClick="return true">Programmering</a></li>
                        <li class="submenu"><a onClick="return true">Chatbox</a>
                            <ul>
                                <li><a href="chatdesktop.html">Chat via: desktop</a></li>
                            </ul>
                        </li>
						<li class="submenu"><a href="verzoekbox.html" onClick="return true">Verzoekbox</a></li>
						<li class="submenu"><a href="http://www.topdancemusic.nl" onClick="return true" TARGET="_blank">Topdance music</a></li>
						<li class="submenu"><a href="vacatures.html" onClick="return true">Vacatures</a></li>
						<li class="submenu"><a href="gastenboek.html" onClick="return true">Gastenboek</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>
				
        <div class="art-aside">
		
            <article>	
	
<table class="spelers">
        <tr class="plaatje">
		    <td><a href="http://server2-streamserver.nl:2199/tunein/topdance_radio.pls" TARGET="_blank"><img class="links" src="images/wnp.png" title="winamp" alt="luister topdance radio met winamp"></a></td>
			<td><a href="http://server2-streamserver.nl:2199/tunein/topdance_radio.asx" TARGET="_blank"><img class="links" src="images/wmp.png" title="windows media player" alt="luister topdance radio met windows media player"></a></td>
			<td><a href="http://server2-streamserver.nl:2199/tunein/topdance_radio.qtl" TARGET="_blank"><img class="links" src="images/quick.png" title="quicktime" alt="luister topdance radio met quicktime player"></a></td>
		    <td><a href="http://server2-streamserver.nl:2199/tunein/topdance_radio.ram" TARGET="_blank"><img class="rechts" src="images/real.png" title="real player" alt="luister topdance radio met realplayer"></a></td>
			<td><a href="http://tunein.com/radio/Topdance-radio-s282366/" TARGET="_blank"><img class="rechts" src="images/tunein.png" title="tunein" alt="luister topdance radio via tunein"></a></td>
			<td><a href="http://server2-streamserver.nl:8032/stream?type=http&nocache=12" TARGET="_blank"><img class="rechts" src="images/mobiel.png" title="mobiel player" alt="luister topdance radio op je mobiel"></a></td>	
		</tr>
</table>		
                    <h1>Welkom bij Topdance radio</h1>					
					
<p>Topdance is een radio station dat zich richt op mensen die van lekkere Dance hits houden. Uiteraard draaien wij voor ieder wat wils en kunt u een verzoekje aanvragen als een dj live draait.</p>

<p>Onze radio station draait op een eigen server en is nieuw online te horen, Ook hebben we een leuke chatbox met vele mogelijkheden. Zo kun je chatten en tegelijkertijd naar Topdance radio luisteren en nartuurlijk een 
verzoekje aanvragen. Om het helemaal compleet te maken, gaan wij deze pagina met regelmaat uitbreiden met meer functies!</p>

<p>Ook zoeken wij radio dj's die onze team willen komen versterken, en zijn of haar kunsten aan u willen laten horen. Deze dj's krijgen natuurlijk velen extra's die voor u als bezoeker of luisteraar interessant zijn om er 
naar te komen luisteren. 

Kortom, u heeft hier altijd veel luister plezier. </p>

<p>Op onze pagina met "dj team" staan de dj's die actueel draaien op Topdance radio. Je kunt reageren in onze gastenboek en/of ons een e-mail sturen als u vragen heeft over onze radio station.</p>

<p>Wij wensen u allen veel luister plezier bij Topdance radio.</p>

                </article>

            <aside>
<iframe src="http://server13003.irserv2.com/djdisplay/" name="iReQuest_djdisplay" scrolling="no" frameborder="no" align="center" height = "150px" width = "150px"></iframe>
<br>
<br>
<iframe src="http://server13003.irserv2.com/nowplaying/" name="iReQuest_NoWPlayinG" scrolling="no" frameborder="no" align="center" height = "42px" width = "100%"></iframe>

                       </figure>
					   
<img src="images/lamp1.gif" alt="Logo" style="width: auto; max-width: 15%; height: auto;" class="links">
<img src="images/lamp2.gif" alt="Logo" style="width: auto; max-width: 15%; height: auto;" class="rechts"> 
					   
<TABLE class="dansers">
<TR class="plaatje">
<TD><img src="images/speakers.png" alt="Logo" style="width: auto; max-width: 50%; height: auto;" class="links"></TD>
<TD><img src="images/dansers.gif" alt="dansers" style="width: auto; max-width: 100%; height: auto;"></TD>
<TD><img src="images/speakers.png" alt="Logo" style="width: auto; max-width: 50%; height: auto;" class="rechts"></TD>
</TR>
</TABLE>					   
 
                    <div class="socialmedia">
                        <h4>Social media:</h4>
<a href="https://www.facebook.com/www.topdance.nl" TARGET="_blank"><img alt="facebook" src="afbeeldingen/facebook.png" class="socialmedia"></a>
<a href="https://twitter.com/topdance_radio" TARGET="_blank"><img alt="twitter" src="afbeeldingen/twitter.png" class="socialmedia"></a>
<a href="https://www.youtube.com/channel/UCNgFRml6OBiEO7CwSguyOFQ" TARGET="_blank"><img alt="youtube" src="afbeeldingen/youtube.png" class="socialmedia"></a>
                    </div>

<br>
					
<DIV CLASS="bestaan">
<!-- BEGIN Webmaster Web javascript countup script -->
<div id="wmweb_countup_1488759167769"></div>
<script type = "text/javascript">
// Copyright (C) 2010 Ryan Wittering @ Webmaster Web - www.wmweb.nl
// URL: https://www.wmweb.nl/generators/javascript_countup
function do_wmweb_countup_wmweb_countup_1488759167769()
{
// begin variabelen -
var voorvoegsel = "Wij bestaan al";
var achtervoegsel = "lang!";
var style = "font-family: Arial; font-size: 14px;";
var toon_seconden = true;
var toon_minuten = true;
var toon_uren = true;
var toon_dagen = true;
var stamp_datum = 1479754800;
var divid = "wmweb_countup_1488759167769";
// - einde variabelen
var stamp_nu=Math.round(new Date().getTime()/1000);var sum=Math.round(stamp_nu-stamp_datum);var te_tonen_dagen=0;if(toon_dagen==true){te_tonen_dagen=Math.floor(sum/86400);if(te_tonen_dagen>0){sum=Math.floor(sum%86400);}}var te_tonen_uren=0;if(toon_uren==true){te_tonen_uren=Math.floor(sum/3600);if(te_tonen_uren>0){sum=Math.floor(sum%3600);}}var te_tonen_minuten=0;if(toon_minuten==true){te_tonen_minuten=Math.floor(sum/60);if(te_tonen_minuten>0){sum=Math.floor(sum%60);}}var te_tonen_seconden=0;if(toon_seconden==true){te_tonen_seconden=sum;}var items=[];items[0]=[];items[0]['name']='dagen';items[0]['nameOne']='dag';items[0]['amount']=parseInt(te_tonen_dagen);items[1]=[];items[1]['name']='uren';items[1]['nameOne']='uur';items[1]['amount']=parseInt(te_tonen_uren);items[2]=[];items[2]['name']='minuten';items[2]['nameOne']='minuut';items[2]['amount']=parseInt(te_tonen_minuten);items[3]=[];items[3]['name']='seconden';items[3]['nameOne']='seconde';items[3]['amount']=parseInt(te_tonen_seconden);var showedItems=[];for(i in items){var item=items[i];if(item['amount']!=undefined&&item['amount']>0){showedItems.push(item);}}var result="";for(i in showedItems){var showedItem=showedItems[i];i=parseInt(i);if(showedItem.amount!=undefined){if(i+1==showedItems.length&&i>0){result+=' en ';}else if(i>0){result+=', ';}result+=showedItem['amount']+' '+(showedItem['amount']==1?showedItem['nameOne']:showedItem['name']);}}document.getElementById(divid).innerHTML="<span style='"+style+"'>"+voorvoegsel+" "+result+" "+achtervoegsel+"</span>";
}
setInterval("do_wmweb_countup_wmweb_countup_1488759167769();",1000);
</script>
<!-- EINDE Webmaster Web javascript countup script -->
</DIV>          
 
                </aside>

        </div>
        <!-- einde art-aside -->

    </div>
    <!-- einde nav-aa -->
	
<div class="audio">
<audio controls><source src="http://server2-streamserver.nl:8410/stream?type=http&nocache=12" type="audio/mp3">Je browser ondersteunt deze audio formaat niet.</audio>
</div>

<div id="balkbeneden">

<div id="inhoudbalkbeneden">
&copy; 
<script>
now = new Date
theYear=now.getFullYear()
document.write(theYear)
</script> Topdance radio

<span><a href="links.html">Partner links</a></span>

<span><script src="http://www.freeusersonline.com/?action=track&siteurl=http://www.topdance.nl"></script></span>

<span><a href="http://www.topdance.nl/djlogin/djlogin.html">Dj login</a></span>

<p>Buma.stemra: SW15N.0048 / sena: nr.SW966.15</p>

<br>

<!-- Begin JouwStats code-->
<script src="https://www.jouwstats.nl/count.js"></script>
<script type = "text/javascript">
//<![CDATA[
count(40094);
//]]>
</script>
<!-- Einde JouwStats code-->

</div>

<!-- einde balkbeneden -->

</body>

</html>
 
Gelieve relevante code te plaatsten i.p.v. een hele lap.
 
Gelieve relevante code te plaatsten i.p.v. een hele lap.

Snap ik, alleen ik weet juist niet welke gedeelte het probleem zich bevind, daarom heel de bron van 1 pagina.

maar op verzoek de code ingekort:

Code:
nav {
    background-color: #208193; /* menu achtergrond kleur */
    font-size: .85em; /* hoogte van het menu */
}

nav p.menuknop  {
    position: responsive; /* dit bepaald de positie waar het menu staat, bij absolute staat hij boven in de top */
    top: 0;
    right: 12px;
    font-family: courier, monospace;
    font-size: 35px; /* letter groote van de menu knop */
    line-height: 1;
    margin: 0;
}

nav p.menuknop a {
    color: white;
}

nav ul {
    display: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    border-top: 1px solid white;
    padding: .8em .4em .6em .4em;
}

nav a {
    color: #CCFF33; /* tekst kleur menu */
    text-decoration: none;
}

nav ul li:hover {
    background-color: #cc9933; /* achtergrond kleur menu bij mouseover */
}

nav ul li.submenu {
    position: relative;
}

nav ul li.submenu:hover ul {
    box-sizing: border-box;
    background-color: #208193; /* achtergrond kleur submenu bij mouseover */
    display: block;
    width: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
}

nav li li:first-child {
    border-top: none;
}

nav li li a:hover {
    color: #660000; /* tekst kleur submenu bij mouseover */
}

#hoofdmenu > li > a:hover {
    color: #660000; /* tekst kleur submenu bij mouseover */
}

article {
    padding: 1em;
}

aside h3, aside  {
        color: #02165a;
}

aside {
    padding: 0 0 1em 0;
    text-align: center;
}

footer {
    background-color: #003366;
    color: white;
    font-size: .95em;
    padding: 1em; /* dit is de hoogte van de onderste balk waar de copyright in staat */
    text-align: center;
}

footer a {
    color: white;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

img.rechts, img.links {
    box-sizing: border-box;
    display: block;
    margin: 0.5em auto;
    max-width: 100%;
}

@media screen and (min-width: 500px) {
    header {
        padding: 1.5em 0.5em; /* De 1e cijfer geeft de hoogte van het logo in schermen tot 500 px */
        text-align: center;
    }
    header h1 {
        font-size: 2.8em;
    }

    nav p.menuknop {
        display: none;
    }
    
    nav > ul {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }
    nav ul li {
        padding: 1.4em .4em 1.2em .4em;
    }
    nav ul li.submenu:hover ul {
        width: 8em;
        left: 0;
        top: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        border-top: 1px solid white;
    }
    nav > ul > li {
        border-top: none;
    }

    aside {
        background-color: transparent;
    }
    
    img.rechts {
        float: right;
        margin: 0.4em 0 0.4em .8em;
    }

    img.links {
        float: left;
        margin: 0.4em .8em 0.4em 0;
    }

}

@media screen and (min-width: 700px) {
    .art-aside {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    aside {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        font-size: .9em;
    }
    footer {
        background-color: #208193;
        background-size: cover;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    footer p {
        margin: 0.8em;
    }

}

@media screen and (min-width: 1000px) {
    header {
        padding: 1.0em 0.5em; /* 1e getal is de hoogte waar het logo komt bij schermen vanaf 500 px tot 1000 px  */
    }
    header h1 {
        font-size: 4.2em;
    }
    .nav-aa {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        max-width: 99%; /* Dit bepaalde de totale breedte van de website van het midelste vak. */
        margin: 0 auto;
        padding: 0.5em;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
     }
     nav {
         margin-top: 1.8em;
         -webkit-box-flex: 0;
         -ms-flex: 0 0 16%;
         flex: 0 0 16%;
     }
     nav ul {
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
     }
     nav ul li {
         border-top: 1px solid white;
     }
     nav ul li:last-child {
         border-bottom: 1px solid white;
     }
     nav ul li.submenu:hover ul {
        margin-left: 100%;
        top: -1px;
         width: 12em; /* breedte submenu knop. */
    }
 }

HTML:
<!DOCTYPE html> 

<html lang="nl">

<head>
    <meta charset="utf-8">
    <title>Topdance radio - Home</title>
    <meta name="description" content="beschrijving">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
    <link rel="stylesheet" href="overig/basis.css" type="text/css" media="screen">
    <link href="https://fonts.googleapis.com/css?family=Orbitron:400,500" rel="stylesheet">
    <meta name="viewport" content="initial-scale=1.0, width=device-width">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <script src="overig/menuknop.js" type="text/javascript"></script>
</head>
 
<body>
    
    <div class="nav-aa">

            <nav>
                <p class="menuknop"><a href="#" onclick=toggle('hoofdmenu');>☰menu</a></p>
                    <ul id="hoofdmenu">
                        <li><a href="index.html">Home</a></li>
						<li class="submenu"><a href="luisterlinks.html" onClick="return true">Luister links</a></li>
                        <li class="submenu"><a href="djteam.html" onClick="return true">Dj team</a></li>
                        <li class="submenu"><a href="programma.html" onClick="return true">Programmering</a></li>
                        <li class="submenu"><a onClick="return true">Chatbox</a>
                            <ul>
                                <li><a href="chatdesktop.html">Chat via: desktop</a></li>
                            </ul>
                        </li>
						<li class="submenu"><a href="verzoekbox.html" onClick="return true">Verzoekbox</a></li>
						<li class="submenu"><a href="http://www.topdancemusic.nl" onClick="return true" TARGET="_blank">Topdance music</a></li>
						<li class="submenu"><a href="vacatures.html" onClick="return true">Vacatures</a></li>
						<li class="submenu"><a href="gastenboek.html" onClick="return true">Gastenboek</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>

    </div>
    <!-- einde nav-aa -->

</body>

</html>

je ziet je als je op de tekst klikt pas de link werkt.
buiten de tekst werkt die al niet meer.
Zo is b.v. dan de achtergrond kleur van de tekst slecht leesbaar, en je moet puntje precies op de tekst klikken.

mijn huidige website heeft een horizontaal menu welke wel goed werkt. Zie b.v. de sub menu van de chatbox op mijn website
 
Laatst bewerkt:
ik denk in onderstaande code het probleem zit, maar hoe los je dit dan op heel de knop een menu wordt?

Code:
@media screen and (min-width: 1000px) {

    .nav-aa {
        [COLOR="#FF0000"]display: -webkit-box;[/COLOR]
 }
 
Een <a> is een inline element, maar hier een block van.
Code:
nav ul a {
  display: block;
}
Suc6. Have fun.
 
Een <a> is een inline element, maar hier een block van.
Code:
nav ul a {
  display: block;
}

ok dan! :thumb:
zou je dan hier een vaste hoogte moeten opgeven dan?
hij pakt wel over de hele breedte hem als link, maar net boven of onder de tekst (in het blok) niet.
 
Als je van de <a> een block hebt gemaakt dan werkt padding ook in de hoogte.
Gebruik dan geen height !
Code:
nav ul a {
  display: block;
  padding: 6px 20px;  /*als voorbeeld*/
}

misschien moet je bij nav ul li dit weghalen
padding: .8em .4em .6em .4em;
 
Laatst bewerkt:
Zet vlak boven nav{} eerst wat dingen op een standaard waarde
Code:
nav, nav p, nav ul, nav li, nav a {
    margin: 0;
    padding: 0;
    border: 0;
}
nav a, nav a:hover, nav a:active {
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    outline: 0;
}
Geef de <a> een block en padding
Code:
nav ul a {
    color: #cccc00;
    display: block;
    padding: 20px 8px;
}
Omdat je overal li:hover gebruikt kan dat hier ook
Code:
nav ul li:hover > a {
    color: #660000; /* tekst kleur mouseover */
}
Haal bij de li de padding weg (op 2 plekken in de css voor de nav)
 
Laatst bewerkt:
Zet vlak boven nav{} eerst wat dingen op een standaard waarde
...>>>
Haal bij de li de padding weg (op 2 plekken in de css voor de nav)

Ik moest even goed puzelen wat je bedoelde maar ik heb het uiteindelijk voor elkaar met je hulp.
Mits ik me huiswerk goed hebt heb ik de volgende resultaat:

Code:
nav, nav p, nav ul, nav li, nav a {
    margin: 0;
    padding: 0;
    border: 0;
}
nav a, nav a:hover, nav a:active {
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    outline: 0;
}

nav {
    background-color: #208193; /* menu achtergrond kleur */
    font-size: .85em; /* hoogte van het menu */
}

nav p.menuknop  {
    position: responsive; /* dit bepaald de positie waar het menu staat, bij absolute staat hij boven in de top */
    top: 0;
    right: 12px;
    font-family: courier, monospace;
    font-size: 35px; /* letter groote van de menu knop */
    line-height: 1;
    margin: 0;
}

nav p.menuknop a {
    color: white;
}

nav ul {
    display: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav ul a {
    color: #cccc00;
    display: block;
    padding: 3px 8px;
}

nav ul li {
    border-top: 1px solid white;
}

nav a {
    color: #CCFF33; /* tekst kleur menu */
    text-decoration: none;
}

nav ul li:hover > a {
    color: #660000; /* tekst kleur mouseover */
}

nav ul li:hover {
    background-color: #cc9933; /* achtergrond kleur menu bij mouseover */
}

nav ul li.submenu {
    position: relative;
}

nav ul li.submenu:hover ul {
    box-sizing: border-box;
    background-color: #208193; /* achtergrond kleur submenu bij mouseover */
    display: block;
    width: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
}

nav li li:first-child {
    border-top: none;
}

nav li li a:hover {
    color: #660000; /* tekst kleur submenu bij mouseover */
}
 
Door alles netjes bij elkaar te houden wordt het wat duidelijhker
Code:
/* nav reset */
nav, nav p, nav ul, nav li, nav a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}
nav a, nav a:hover, nav a:active {
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    outline: 0;
}
nav {
    display: block;
    position: relative;
    min-height: 40px;
    background-color: #208193; /* menu achtergrond */
    font-size: .85em; /* tekst grootte */
}

/* nav menuknop */
nav p.menuknop  {
    position: absolute; /* waar menuknop staat */
    top: 0;
    right: 12px;
    font-family: Menlo,Monaco,Consolas,'Courier New',monospace;
    font-size: 36px; /* letter groote van menuknop */
    line-height: 1;
}
nav p.menuknop a {
    color: white;
    font-size: inherit;
}

/* nav lijst */
nav ul {
    display: none;
    list-style-type: none;
}
nav ul li {
    position: relative;
    border-top: 1px solid white;
}
nav ul ul li:first-child {
    border-top: none;
}
nav ul a {
    display: block;
    padding: 6px 2px 7px 8px; /* grootte van li */
    color: #CCFF33; /* tekst kleur menu */
}
/* nav submenu */
nav ul li.submenu:hover ul {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 50%;
    background-color: #208193; /* achtergrond kleur submenu bij mouseover */
    z-index: 2;
}

/* nav mouse-over & tap touchscreen */
nav ul li:hover,
nav ul li:active {
    background-color: #cc9933; /* achtergrond kleur menu bij mouseover */
}
nav ul li:hover > a,
nav ul li:active > a {
    color: #660000;
}
nav ul ul li:hover > a,
nav ul ul li:active > a {
    color: #660000;
}
Bij @media screen and (min-width: 500px) moet dit worden aangepast
Code:
    nav {
        min-height: 0;
    }
    nav ul li {
        /* padding: 1.4em .4em 1.2em .4em; */
    }
    nav ul a {
        padding: 6px 3px 7px 3px; /* grootte van li */
        text-align: center;
    }
Suc6. Have fun.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan