nicht angemeldet
Überblenden mit JavaScript: Ein einfacher Fader -> zentrieren
Hallo,
wie kann ich das Überblendungs-bsp. von selfhtml zentrieren?
http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/ueberblendungen.htm#ueberblenden
ich habe versucht es mit <div align="center"><p style="position:relative;">...</p></div> zu zentrieren leider wird das 2. bild immer links am rand dargestellt.
mit ... style="position:absolute; left:50% ... funktioniert es leider auch nicht.
bitte um hilfe
grüße daniel
-
Lieber daniel4433221,
http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/ueberblendungen.htm#ueberblenden
ich habe versucht es mit <div align="center"><p style="position:relative;">...</p></div> zu zentrieren
benutze nie wieder das align-Attribut, wenn Du Dich nicht absichtlich unglücklich machen willst!!
bitte um hilfe
Zum Verständnis: Das <p>-Element bildet den Rahmen, innerhalb dessen das Überblendungsbild mit absoluter(!) Positionierung im linken oberen Eck angezeigt wird, um das vorherige Bild nahtlos zu überdecken. Um nun diesen Textabsatz in die Mitte zu bekommen, gibt es zwei Ansätze.
1.) (nicht zielführend!)
Man müsste diesen Textabsatz auf style="text-align:center" schalten, damit sein Inhalt zentriert dargestellt wird. Sämtliche inline-Inhalte wie Text und Bilder würden nun mittig dargestellt. Das absolut positionierte Bild wird davon aber nicht betroffen, da es mit seiner absoluten Positioniertung aus dem Textfluss gerissen und mit völlig neuen Darstellungsregeln behandelt wird. Da der Textabsatz in der Voreinstellung die volle mögliche Breite mit width:100% ausfüllt, sähe es zuerst so aus, als ob dieser Ansatz Erfolg hätte, hat er aber nicht.2.) (zielführend)
Was mit dem text-align:center im Textabsatz nicht funktioniert hat, kann aber eine Ebene darüber sehr wohl gelingen. Wenn man nun den Textabsatz mit einer Maximalbreite versieht, sodass er eben nicht mehr die volle verfügbare Breite bekommt (z.B. die Bildbreite), dann kann man ihn selbst als inline-Element schalten und mittig anzeigen lassen. Dazu müsste das Elternelement ein text-align:center erhalten und der Textabsatz selbst ein display:inline-block (sonst wirkt das text-align des Elternelements nicht).Probiere einmal dieses:
<body> <h1>Einfacher Fader</h1> <div style="text-align:center"> <p style="position:relative;display:inline-block;width:600px;"> <img src="images/berge1.jpg" alt=""> <img src="images/berge2.jpg" alt="" style="position:absolute; left:0; top:0; opacity:0; filter:alpha(opacity=0)"> </p> </div> <p><a href="javascript:fade()">überblenden</a></p> </body>Diese ganzen Inline-Styles wirst Du ganz bestimmt im endgültigen Dokument entfernen und entweder dynamisch durch Dein JavaScript erzeugen, oder aber das Ganze durch sinnvolle Klassennamen ersetzen (siehe die späteren Beispiele des Lehrgangs)!
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Guten Tag Hr. Felix Riesterer
danke für die Antowrt, hat mir sehr weitergeholfen! werde mich noch bzgl. inline-styles schlauer machen.
mfg, daniel
-
Lieber daniel4433221,
Guten Tag Hr. Felix Riesterer
warum so förmlich? Bist Du ein Schüler von mir (gewesen)?
danke für die Antowrt, hat mir sehr weitergeholfen! werde mich noch bzgl. inline-styles schlauer machen.
Es freut mich, dass ich Dir weiterhelfen konnte.
Im Nachhinein weiß ich nicht, ob meine Lösung semantisch nicht noch feiner sein könnte. Auch wenn das jetzt vielleicht eine Spitzfindigkeit ist, so stört es mich doch, ein <div>-Element einzusetzen, wenn es nur ein einziges Kindelement erhalten soll. Betrachte meine folgende Lösung also meinetwegen als übertriebene "reine Lehre", ignoriere sie aber bitte deswegen nicht ganz:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>einfacher Fader</title> <style type="text/css"> ~~~~~~css p.fader { text-align:center; } p.fader span { display: inline-block; position: relative; width: 600px; } ~~~~~~html </style> <script type="text/javascript"> ~~~~~~javascript //<![CDATA[ function fade(step) { var imgs = document.getElementsByTagName("img"); step = step || 0; imgs[1].style.opacity = step/100; imgs[1].style.filter = "alpha(opacity=" + step + ")"; // IE step = step + 2; if (step <= 100) { window.setTimeout(function () { fade(step); }, 1); } } //]]> ~~~~~~html </script> </head> <body> <h1>Einfacher Fader</h1> <p class="fader"> <span> <img src="images/berge1.jpg" alt="" /> <img src="images/berge2.jpg" alt="" style="position:absolute; left:0; top:0; opacity:0; filter:alpha(opacity=0)" /> </span> </p> <p><a href="javascript:fade()">überblenden</a></p> </body> </html>Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
-
-