nicht angemeldet
Navigations-DIV verschiebt sich nicht bei onMouseover
0 0 0 
MudGuard
Navigations-DIV verschiebt sich nicht bei onMouseover
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')">ü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.
-
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.
Das liegt daran, dass du alles absolut positioniert, damit nimmst du die Elemente aus dem Fluss.
-
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.
Das liegt daran, dass du alles absolut positioniert, damit nimmst du die Elemente aus dem Fluss.
ok, wie lautet die richtige positionierung? Stehe grad auf der Leitung, sorry ...
-
ok, wie lautet die richtige positionierung? Stehe grad auf der Leitung, sorry ...
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=relativ
-
-
-
Danke für die umfassenden Infos. Ich bin seit heute angemeldet und finde das Forum hier super. VIELEN Dank.
-
Hi,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<a href="index/home.html" target="main">
<div class="sub" id="home" onMouseOver="MM_showHideLayers('handicap','','hide','family','','hide','hobbies','','hide')">Home</div>a kann in HTML 4.01 kein div enthalten. a sollte also vor dem div wieder geschlossen werden.
a div
und
a:hover div
selektieren also kein Element, da es ja kein div in einem a gibt/geben kann.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Hi,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<a href="index/home.html" target="main">
<div class="sub" id="home" onMouseOver="MM_showHideLayers('handicap','','hide','family','','hide','hobbies','','hide')">Home</div>a kann in HTML 4.01 kein div enthalten. a sollte also vor dem div wieder geschlossen werden.
a div
und
a:hover divselektieren also kein Element, da es ja kein div in einem a gibt/geben kann.
cu,
Andreasok, ich werde es sofort umändern.
-