For my school i need to make a website, i'm trying for days now to fix this problem. The menubar looks great. But i can't click the links. If you hoover above the links it should show a line, by the first two it does: Home and Componenten. By the rest it doesn't show up and i can't click on it. here is my html and css, i really can't find the problem
<!DOCTYPE html>
<html lang="nl">
<head>
<link href="contact.php" type="text/php">
<link rel="stylesheet" href="layout.css" type="text/css">
<title>webshop game artikelen</title>
</head>
<body>
<div id="container">
<table class="header-tabs" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="actief"><a href="index.html">Home</a></td>
<td style=" width: 120px;"><a href="component.html">Componenten</a></td>
<td><a href="randapparatuur.html">Randapparatuur</a></td>
<td><a href="laptop-amp-pc.html">Laptop & PC</a></td>
<td><a href="tablets-amp-telefoons.html">Tablets & Telefoons</a></td>
<td><a href="netwerk.html">Netwerk</a></td>
<td><a href="software.html">Software</a></td>
<td><a href="printing.html">Printing</a></td>
<td><a href="contact.html">Contact</a></td>
</tr>
</tbody>
</table>
<a href="contact.html"></a>
</div> <!--header-->
<div id="content">
<video poster="poster.jpg" width="618" height="347" controls preload>
<source src="stopmotion.mp4" media="only screen and (min-device-width: 568px)"></source>
<source src="stopmotion.mp4" media="only screen and (max-device-width: 568px)"></source>
<source src="video.ogv"></source>
</video>
</div> <!--content-->
<div id="footer">
2014, all right reserved
<a href="mailto:schoolscs%40gmail.com">Webmaster</a>
</div> <!--footer-->
</div> <!--container-->
</body>
</html>
and this is my css
#page {width: 800px;
position: relative;
min-height: 100%;
height:auto !important; /* voor moderne browsers */
height:100%; /* voor IE */
}
/* blauwe menubalk */
.header-tabs {
float: left;
border-collapse: collapse;
border-spacing: 2px;
font-size: 11pt;
}
.header-tabs td a, .header-tabs td a:visited{
height: 26px;
background-color: #424C77;
color: #eff2fe;
font-size: 0.8em;
text-decoration: none;
display: block;
line-height: 24px;
}
.header-tabs td.actief a{
background-color: #eff2fe;
color: #424C77;
}
.header-tabs td:hover a{
text-decoration: underline;
}
/* //menu */
#content
{
background-color: ######;
width: 80%;
position:relative;
#footer
{position: absolute;
bottom: 0; /* heel belangrijk */
height: 20px;
width: 100%;
}
1) Remove the float from:
.header-tabs {
border-collapse: collapse;
border-spacing: 2px;
font-size: 11pt;
}
2) Or you can clear the floats after the table, like so:
#container { position: relative; overflow: hidden; }
3) Or you can add height to the container:
#container { height: 26px; }
And tell your school to teach you modern html/css, drop the use of the tables for such things.