Hallo!
Versuche gerade ein eingebundenes Java-Script zu positionieren. Es ist ein Band am oberen Rand, bei dem Bilder wechseln. Siehe Anhang.
Möchte gerne, dass Kopf und Text genau übereinander sind und nicht versetzt, wie im Augenblick.
Ich bekomme aber dieses Band nicht positioniert! Hier ist der Code, der in der HTML-Seite drin ist, und der meiner Meinung nach die Postitionierung festlegen müsste:
<style type="text/css">
.next { position: absolute; top: 0; left: 100; opacity: 0; filter:alpha(opacity=0); }
.one { position: absolute; top: 0; left: 0em; opacity: 0; filter:alpha(opacity=0); }
#meinFader { position: top; }
</style>
Das gesamte Script ist unten aufgeführt.
Leider bewegt sich gar nix, wenn ich andere Werte eingebe. Weiß mir nicht mehr zu helfen. Mir ist auch unklar, warum ich das nicht ins CSS
reinbekomme. Aber wenn ich das text/css wegmache und .next und alles weitere ins CSS schreibe, funktioniert gar nichts mehr. Uff.
Wer kann mir helfen?
<script type="text/javascript">
function fade(step) {
var imgs = document.getElementById("meinFader").getElementsByTagName("img");
step = step 
0;
imgs[counter].style.opacity = step/80;
imgs[counter].style.filter = "alpha(opacity=" + step + ")"; //
step = step + 2;
if (step <= 80) {
window.setTimeout(function () { fade(step); }, 1);
} else {
window.setTimeout(next, 4000);
}
}
function next() {
var imgs = document.getElementById("meinFader").getElementsByTagName("img");
if (typeof(counter) != "number") {
counter = 0;
}
counter++;
if (counter < imgs.length) {
fade();
}
};
</script>
<style type="text/css">
.next { position: absolute; top: 0; left: 100; opacity: 0; filter:alpha(opacity=0); }
.one { position: absolute; top: 0; left: 0em; opacity: 0; filter:alpha(opacity=0); }
#meinFader { position: top; }
</style>
<title>Willkommen bei ArchajA</title>
<!--Ende Bildwechsel Head-->
</head>
<body>
<!-- Titelbild -->
<div>
<div>
<p id="meinFader">
<img src="pics/x1.jpg" class="one">
<img src="pics/x2.jpg" class="next">
<img src="pics/x3.jpg" class="next">
<img src="pics/x4.jpg" class="next">
<img src="pics/x5.jpg" class="next">
<img src="pics/x1.jpg" class="next">
<img src="pics/x2.jpg" class="next">
<img src="pics/x3.jpg" class="next">
<img src="pics/x4.jpg" class="next">
<img src="pics/x5.jpg" class="next">
<script type="text/javascript">
javascript:next();
</script>
</div>
<!-- ende Titelbild -->
Eigentlich dürfte ja nur die
keine Ahnung, warum!