nicht angemeldet
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:)