nicht angemeldet
scrollbaren Bereich hinter fixierten Bereich legen
2 
JürgenB
scrollbaren Bereich hinter fixierten Bereich legen
Hallo Community,
ich habe ein kleines Problem bei meiner Darstellung. Ich möchte gerne dass der scrollbare Bereich, beim scrollen, hinter den fixen Bereich der Navigation verschwindet. Was teilweise auch funktioniert, dass heisst der Text und die Bilder liegen hinter der Navigation aber sie verschwinden nicht ganz sondern die Bilder einfach hinter der Navigation verschwinden aber nicht ganz hinter den fixen Bereich, gibt es eine Möglichkeit dass zu ändern ?
Hier ist mein Quelltext und vielen Dank für die Hilfe im voraus.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Die Chroniken der Leandra</title>
<style type="text/css">
a:link { text-decoration: none; color: #874620; }
a:visited { text-decoration: none; color: #874620; }
a:hover { text-decoration: none; color: black; }
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
#hintergrund {position:absolute; z-index:1; width:100%; height:100%;}
#scrollbar {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#inhalt {margin:0; padding:0; width:100%; height:100%;}
#navigation {margin:o; padding:0; position:fixed; width:98%; height:19%; z-index:3;}
</style>
</head>
<body>
<div>
<img id="hintergrund" src="hintergrund1.jpg" alt="scan"/>
</div>
<div id="navigation">
<br>
<br>
<br>
<br>
<table border="0" align="center"cellpadding="0"cellspacing="0" width="1000"> <!--Tabelle für Verweise definiert-->
<tr>
<th><a href="index.html"><font face="Monotype Corsiva" size="6">Home</font></a></th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<th><a href="autor.html"><font face="Monotype Corsiva" size="6">Autorin</font></a></th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<th><a href="buecher.html"><font face="Monotype Corsiva" size="6">Bücher</font></a></th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<th><a href="neuigkeiten.html"><font face="Monotype Corsiva" size="6">Neuigkeiten</font></a></th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<th><a href="gaestebuch.html"><font face="Monotype Corsiva" size="6">Gästebuch</font></a></th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<th><a href="links.html"><font face="Monotype Corsiva" size="6">Links/Kontakt</font></a></th>
</tr>
</table>
</div>
<div id="scrollbar">
<div id="inhalt">
<script type='text/javascript'>
msg='Die Chroniken der Leandra';
font='Monotype Corsiva';
size=2; // nur 1-7
color='#222222';
speed=0.6;
//ab hier nichts mehr ändern
ns=(document.layers);
ie=(document.getElementById);
msg=msg.split('');
n=msg.length;
a=size*10;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+color+">";
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
}
if (ie){
document.write('<div id="outerscript" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+i+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(e){
ymouse = (e)?e.pageY+20-(window.pageYOffset):event.y+20;
xmouse = (e)?e.pageX+20:event.x+20;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
y=new Array();
x=new Array();
Y=new Array();
X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}
function assign(){
if (ie) document.getElementById('outerscript').style.top=document.documentElement.scrollTop;
for (i=0; i < n; i++){
var d=(ns)?document.layers['nsmsg'+i]:document.getElementById('iemsg'+i).style;
d.top=y[i]+scrll+"px";
d.left=x[i]+(i*(a/2))+"px";
}
}
function ripple(){
scrll=(ns)?window.pageYOffset:0;
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
assign();
setTimeout('ripple()',10);
}
//-->
</script>
<script type="text/javascript">function addEvent178(obj,type,fn){if(obj.addEventListener){obj.addEventListener(type,fn,false)}else if(obj.attachEvent){obj["e"+type+fn]=fn;obj[type+fn]=function(){obj"e"+type+fn};obj.attachEvent("on"+type,obj[type+fn])}};if(ns||ie)addEvent178(window,'load',ripple);</script>
<div style="position:absolute; left:260px; top:675px;"> <!-- Position für Zeitungsartikel-->
<img src="artikel.jpg" alt="Zeitungsartikel"></img>
</div>
<div style="position:absolute; left:635px; top:740px;"> <!--Textausrichtung zu Zeitungsartikel-->
<table border="0" width="460">
<tr>
<td><span style="font-family:Monotype Corsiva; font-size: 129%;"> <h3>9.03.2013</h3>Am 9.03.2013 ist das Interview der jungen Autorin Chrissi Smith in der Odenwälder Zeitung erschienen. Hierbei spricht Sie über Herausforderungen, Ihre Zukunftspläne und einer eigentlich ungewollten Veröffentlichung der spannenden und geheimnissvollen Buchreihe: Die Chroniken der Leandra...</td></span>
</tr>
</table>
</div>
<div style="position:absolute; left:320px; top:260px"> <!--Ausrichtung Bild Kreidacher Hoehe-->
<img src="khoehe.jpg" alt="Kreidacher Höhe"></img>
</div>
<div style="position:absolute; left:635px; top:153px;"> <!--Textausrichtung zu Lesung-->
<table border="0" width="460">
<tr>
<td><span style="font-family:Monotype Corsiva; font-size: 129%;"> <h3>12.04.2013</h3>Am 12.04.2013 um 19:00 Uhr veranstaltet Chrissi Smith zusammen mit dem Team der Kreidacher-Höhe ihre erste Lesung aus "Elfenwald - Die Chroniken der Leandra 1"<br> Eingeladen ist jeder der sich von einer spannenden und leidenschaftlichen Fantasygeschichte verzaubern lassen möchte. Reservierungen bitte bei der Autorin oder der Kreidacher-Höhe<br> Tel.: 06207/92220<br> Wir freuen uns auf Ihr Kommen </td></span>
</tr>
</table>
</div>
<div style="position:absolute; top:500px; left:460px"> <!-- Ausrichtung Pfeile-->
<table border="0" width="500">
<tr>
<td><font size="6">⇓</font></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><font size="6">⇓</font></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><font size="6">⇓</font></td>
</tr>
</table>
</div>
<div style="position:absolute; left:300px; top:1200px"> <!--leere Tabelle-->
<table border="0" width="1">
<tr>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
-
Hallo st.julian,
... dass heisst der Text und die Bilder liegen hinter der Navigation aber sie verschwinden nicht ganz sondern die Bilder einfach hinter der Navigation verschwinden aber nicht ganz hinter den fixen Bereich, gibt es eine Möglichkeit dass zu ändern ?
ich hoffe, ich habe das richtig verstanden :)
Hier ist mein Quelltext und vielen Dank für die Hilfe im voraus.
<br>
<br>
<br>
<br>mich hats auch geschüttelt, nachdem ich das gesehen habe:
<td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <th><a href="autor.html"><font face="Monotype Corsiva" size="6">Autorin</font></a></th> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td>Was willst du damit erreichen? Warum überhaupt eine Tabelle?
Zu deinem Problem: gib mal dem fixen Bereich eine(n) Hintergrund(farbe).
Gruß, Jürgen