Einstein89: Navigations-DIV verschiebt sich nicht bei onMouseover

Beitrag lesen

Hallo,

erstmal ein großes Lob an Euch, selfhtml hat mir schon oft bei HTML oder PHP Problemen geholfen... bei meinem Problem habe ich schon auf Google geschaut, jetzt möchte ich mich an Euch wenden und zwar folgendes:

Ich habe für meine eigene Homepage eine Navigationsliste mit DIVs gemacht die wie folgt aussieht:

  
  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >  
<title></title>  
<link href="css/main.css" rel="stylesheet" type="text/css">  
<script type="text/JavaScript">  
<!--  
function MM_findObj(n, d) { //v4.01  
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {  
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  
  if(!x && d.getElementById) x=d.getElementById(n); return x;  
}  
  
function MM_showHideLayers() { //v6.0  
  var i,p,v,obj,args=MM_showHideLayers.arguments;  
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];  
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }  
    obj.visibility=v; }  
}  
//-->  
</script>  
</head>  
<body>  
<a href="index/home.html" target="main">  
<div class="sub" id="home" onMouseOver="MM_showHideLayers('handicap','','hide','family','','hide','hobbies','','hide')">Home</div>  
</a>  
  
<a href="about.html#ueber"  target="main">  
  <div class="sub" id="about" onMouseOver="MM_showHideLayers('handicap','','show','family','','show','hobbies','','show')">&uuml;ber mich</div>  
</a>  
  
<a href="about.html#behinderung" target="main">  
  <div class="sub" id="handicap">Behinderung</div>  
</a>  
  
<a href="about.html#familie" target="main">  
<div class="sub" id="family">Familie</div>  
</a>  
  
<a href="about.html#hobbies" target="main">  
<div class="sub" id="hobbies">Hobbies</div>  
</a>  
  
<a href="about.html#work" target="main">  
<div class="sub" id="source">Quellen/Verweise </div>  
</a>  
</body>  
  

Die CSS dazu:

  
  
@font-face{  
font-family: 'DTNOTED';  
src: url('DTNOTED_.ttf');  
format('truetype');  
}  
  
body  
{  
cursor:auto;  
background-color:#FFFFFF;  
color:#000000;  
}  
  
em  
{  
font-weight:bold;  
}  
  
h1  
{  
font-family: 'DTNOTED';  
text-align:center;  
font-size:70px;  
}  
  
  
a div  
{  
text-align:center;  
text-decoration:none;  
text-transform:capitalize;  
font-family:Verdana;  
font-size:20px;  
font-weight:bold;  
font-variant:small-caps;  
color:#000000;  
}  
  
a:hover div  
{  
text-align:center;  
text-decoration:none;  
text-transform:capitalize;  
font-family:Verdana;  
font-size:20px;  
font-weight:bold;  
font-variant:small-caps;  
color:#FFFFFF;  
}  
  
a:focus div  
{  
text-align:center;  
text-decoration:none;  
text-transform:capitalize;  
font-family:Verdana;  
font-size:20px;  
font-weight:bold;  
font-variant:small-caps;  
color:#990000;  
}  
  
  
.navmain {  
	font-family: Verdana;  
	font-size: 24px;  
	color: #FFFFFF;  
	text-align:center;  
	background-color:#000000;  
}  
#navmain {  
	position:absolute;  
	left:0;  
	top:0;  
	width:284px;  
	height:34px;  
	z-index:1;  
}  
  
#home {  
	position:absolute;  
	left:0;  
	top:177px;  
	width:284px;  
	height:24px;  
	z-index:2;  
}  
  
#about {  
	position:absolute;  
	left:0;  
	top:201px;  
	width:284px;  
	height:24px;  
	z-index:3;  
}  
  
.sub {font-size: 20px;  
	background-color: #999999;  
}  
#handicap {  
	position:absolute;  
	left:0px;  
	top:225px;  
	width:284px;  
	height:25px;  
	z-index:4;  
	visibility: hidden;  
}  
#family {  
	position:absolute;  
	left:0;  
	top:250px;  
	width:284px;  
	height:25px;  
	z-index:5;  
	visibility: hidden;  
}  
#hobbies {  
	position:absolute;  
	left:0;  
	top:275px;  
	width:284px;  
	height:25px;  
	z-index:6;  
	visibility: hidden;  
}  
#source {  
	position:absolute;  
	left:0;  
	top:300px;  
	width:284px;  
	height:25px;  
	z-index:7;  
}  
  
  

Soweit so gut... jetzt kommt das Problem: Wenn ich über "home" mit der Maus fahre werden die DIVs "handicap", "family" und "hobbies" ausgeblendet, der DIV "source" steht auf der Stelle. Aber es soll beim Ausblenden der drei oberen DIVs direkt unter "about" rutschen, bzw. beim Einblenden der Unterpunkten wieder auf die Ursprüngliche Position wandern.