Problem mit Zellen als Hyperlinks!

JanBreier · 07.01.2006, 16:13

Hallo,
ich habe da ein Menü aus einer Tabelle mit Links in den Zellen gebastelt, bei dem sich die Hintergrundfarbe der Zellen Hintergrund ändert wenn ich mit der MAus rüber gehe. Mit Hilfe von dem Befehl "Block" habe ich es auch schon hin bekommen, dass der Link sich über die ganze Zellenbreite erstreckt. Allerdings bekomme ich es absolut nicht hin, dass der Link auch die gesamte Zellenhöhe erfasst. Der Hintergrund ändert sich zwar, aber die Zelle ist ober und unterhalb des Textes kein Link mehr :-/ Kann mir da jemand helfen?

Hier der Quelltext der HTML Datei:

Code:

<html>
<head>

<title>Bewerbungsmappe - Über mich</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="de">
<meta name="author" content="Jan Breier">
<meta name="copyright" content="Jan Breier">
<meta name="MSSmartTagsPreventParsing" content="TRUE">

<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
    <tr> 
      <td align="center" valign="top"><table width="700" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
        <tr>
          <td width="1" rowspan="3" bgcolor="8a877c"><img src="bilder/leer.gif"></td>
          <td>&nbsp;</td>
          <td width="1" rowspan="3" bgcolor="8a877c"><img src="bilder/leer.gif"></td>
        </tr>
        <tr>
          <td height="90" align="center" valign="top">
            <table width="698" height="36" border="0" cellpadding="0" cellspacing="0" bgcolor="#E6E5E1">
            <tr>
              <td height="6" colspan="4" align="center" valign="middle" bgcolor="#FFFFFF"><img src="bilder/leer.gif" width="1" height="3"></td>
              </tr>
            <tr>
              <td width="174" height="30" align="center" valign="middle"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F2F2F0">
                <tr>
  <td ><a class="navi">&Uuml;ber mich</a></td> 
</tr></table></td>
              <td width="174" align="center" valign="middle"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td class="menu_normal" onMouseOver="className='menu_over'" onMouseOut="className='menu_normal'"><a class="navi" href="#">Arbeitsproben</a></td>
                  </tr>
                </table></td>
              <td width="175" align="center" valign="middle"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="menu_normal" onMouseOver="className='menu_over'" onMouseOut="className='menu_normal'"><a class="navi" href="#">Kontakt</a></td>
                </tr>
              </table></td>
              <td width="175" align="center" valign="middle"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="menu_normal" onMouseOver="className='menu_over'" onMouseOut="className='menu_normal'"><a class="navi" href="#">Zeugnisse</a></td>
                </tr>
              </table></td>
            </tr>
          </table></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
        </tr>
        
      </table></td>
    </tr>
</table>
</body>
</html>

Und die CSS Datei:

Code:

body  { background-color:#c6c3bb;
        background: url(bilder/hintergrund.jpg) repeat-x fixed top;
        margin:0cm;
        scrollbar-arrow-color:#FFFFFF;
        scrollbar-face-color:#c6c3bb;
        scrollbar-highlight-color:#FFFFFF;
        scrollbar-shadow-color:#FFFFFF;
        scrollbar-darkshadow-color:#FFFFFF;
        scrollbar-3dlight-color:#FFFFFF;
        scrollbar-track-color:#FFFFFF;
}

.text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #3a3b32;
	text-align: left;
	line-height: 17px;
}

.text_links {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #3a3b32;
	text-align: right;
	font-weight: bold;

}

.text_rechts {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #3a3b32;
	text-align: left;
	line-height: 17px;

}

a {
	font-family: Arial, Helvetica, sans-serif;
	color: #3a3b32;
	text-decoration: none;
}
a:hover {
	font-family: Arial, Helvetica, sans-serif;
	color: #3A3B32;
	text-decoration: underline;
}

.menu_normal {
background-color:#E6E5E1; }

.menu_over {
background-color:#F2F2F0; }

A.navi {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #3A3B32;
	text-align: center;
	display: block;
	text-decoration: none;
	border-top-width: 6px;
	border-right-width: 6px;
	border-bottom-width: 6px;
	border-left-width: 6px;
}
	
A:hover.navi 	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #3A3B32;
	text-align: center;
	display: block;
	text-decoration: none; }
img {
	border-top-color: #8A877C;
	border-right-color: #8A877C;
	border-bottom-color: #8A877C;
	border-left-color: #8A877C;
}