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???
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">
©
<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>