Positionierung nicht möglich

    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

    Das heißt du möchtest dass der Slider oder was auch immer, mittig auf der Seite ist, genauso wie der Text?

    Oder habe ich das falsch verstanden?

    Geht es mit text-align:center nicht?

    Zitat von Kläuschen

    Warum würde align nur Probleme machen?


    Davon spruch ich nicht.

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

    Hallo Archaja,

    probiere es mit:

    Code
    margin: 0 auto;


    mit diesem Code sagst du das er sich centriert an den jeweiligen Bildschirm positionieren soll, das heißt du hast dann auch keine problme wenn einer einen kleineren oder größeren Bildschirm wie du hast. :)

    Hallo!

    Danke für die Tips.

    Kläuschen:
    Mit "text-align:center" passiert nichts. Ich habe jetzt mal folgendes versucht, da passiert wenigstens etwas, aber nicht das, was ich will.


    <div>
    <div align="center">
    <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">
    </div>
    <script type="text/javascript">
    javascript:next();
    </script>

    </div>

    Jetzt positioniert es mir den Slider ganz rechts :confused: keine Ahnung, warum!

    Hallo WebHolz

    Wenn ich "margin: 0 auto;" hier einsetze:

    <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>

    oder auch "position: absolute;" ersetze kommt nix gescheites bei raus. Es werden nur die einzelnen Sliderbilder plötzlich untereinander angeordnet, statt übereinander.

    Hallo!
    Habe jetzt das Design etwas geändert. Aber das Problem bleibt. Jetzt wird der linke Rand des Sliders zentriert wird. Warum auch immer.
    Ich habe verschiedene Einstellungen versucht. Aber es ändert sich nichts. Im Augenblick habe ich folgenden Code:

    <style type="text/css">
    .next {
    position: absolute;
    margin: 0 auto;
    top: 0;

    opacity: 0;
    filter:alpha(opacity=0);
    }

    .one {
    position: absolute;
    margin: 0 auto;
    top: 0;

    opacity: 0;
    filter:alpha(opacity=0);
    }
    #meinFader {
    position: top0;
    margin: 0 auto;
    }
    </style>


    So sieht es jetzt aus!