nicht angemeldet
Java-Fader zentrieren (absolute - relative?)
0 0 0 
MudGuard
Java-Fader zentrieren (absolute - relative?)
Hallo an die Runde ...
Für einen temporären Hinweis auf einer Startseite müsste ein Hinweis erfolgen, den ich über einen Fader etwas dynamischer erscheinen lassen möchte. Hierfür habe ich ein Java-Skript mit einem Bildwechsel gewählt.
Zum Starten des Skripts gibt es eine Subline, mit der die Information an der gleichen Stelle des vorherigen Bildes eingeblendet werden soll. Beide Bilder haben die gleiche Größe und sollen auf der Seite zentriert dargestellt werden. Die Subline befindet sind zentriert darunter.
Ich habe schon die unterschiedlichsten Parameter umgestellt. Aber es klappt einfach nicht, dass das zweite Bild auf der gleichen Position des ersten Bildes eingeblendet wird. Das zweite verrutscht mal nach links oder die Bilder erscheinen nebeneinander.
Ich vermute hier den Fehler in der Positionierung "relative" und "absolute", aber die verschiedenen Alternativen mit "margin-left" und "margin-right" oder verschiedene Prozentangaben haben mich auch nicht weitergebracht.
Hat jemand eine erlösende Idee?
<html><head><title>NEWS</title>
<style type="text/css">
a:link { text-decoration:none; font-weight:bold; color:#d2d2d2; }
a:visited { text-decoration:none; font-weight:bold; color:#d2d2d2;}
a:hover { text-decoration:none; font-weight:bold; color:#000000; }
a:active { text-decoration:none; font-weight:bold; color:#d2d2d2; }
a:focus { text-decoration:none; font-weight:bold; color:#d2d2d2; }
</style>
<script type="text/javascript">
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);
}
}
</script>
</head><body>
<div align="center">
<p style="position:relative; top:50%; left:50 %">
<img src="images/logo.gif" alt="">
<img src="images/hinweis.gif" alt=""
style="position:absolute; left:0; top:0; opacity:0; filter:alpha(opacity=0)">
</p>
<p><a href="javascript:fade()">NEWS NEWS NEWS NEWS NEWS</a></p>
</div>
</body></html>
-
Nach etwas Probieren habe ich zumindest in meiner Darstellung ein zufriedenstellendes Ergebnis erzielt. Für das zweite Bild habe ich den Positionswert "left" auf 27 % eingerichtet. Den zweiten Wert auf 0 %. Jetzt passt auf meine Monitor- und Browserkonstellation die Ausrichtung.
Richtig ist dieses sicherlich nicht, da die Einstellung lediglich auf "Try and Error" beruht und keine fundierte Begründung hat.
-
Hallo,
<p style="position:relative; top:50%; left:50 %">
<img src="images/logo.gif" alt="">
<img src="images/hinweis.gif" alt=""
style="position:absolute; left:0; top:0; opacity:0; filter:alpha(opacity=0)">
</p>Als erstes würde ich mal einen passenden Doctype suchen und einfügen. Danach dem <p> eine Hintergrundfarbe geben um zu sehen, wo es tatsächlich ist. Das <p> ist zudem ein Blockelement, d.h. mit der position left: 50% ragt es aus der rechten Seite heraus bzw. erzwingt einen horizontalen Scrollbalken (unschön). Möglicherweise gibt's ein passenderes Element oder Style.
Dann würde ich die <img mit /> schließen. Anschließend würde ich mir Firebug besorgen und mal schauen, welche css-Eigenschaften tatsächlich "vorhanden" sind. Könnte mir gut vorstellen, dass die img per default einen border oder sowas haben.
Und last but not least: Die style="" gehört natürlich nicht ins Element, aber das weißt du sicher.
Viele Grüße
Siri-
Danke für die verschiedenen Hinweise.
Das mit dem style="" habe ich so aus einem anderen Internetbeitrag zum Thema "Fader" übernommen. Wie ich schon geschrieben habe, mit ein paar Anpassungswerten hinter "absolute" habe ich einen Zufallstreffer genau für meine Bildschirmdarstellung hinbekommen.
Bei Safari war das zweite Bild dann etwas nach rechts verschoben. Folglich ist meine "Try and Error"-Lösung wie erwartet nicht wirklich brauchbar. Daher werde ich deine Vorschläge in aller Ruhe abarbeiten.
Wohin gehört denn die style-Anweisung?
Gruss vom Shark
-
Hallo,
Wohin gehört denn die style-Anweisung?
Die style-Amweisung gehört in das head-Element oder in eine separate CSS-Datei:
<style type="text/css"> </style>oder:
<head> <link rel="stylesheet" href="style.css" type="text/css"/> </head>Viele Grüße
Siri-
Die style-Amweisung gehört in das head-Element oder in eine separate CSS-Datei:
<style type="text/css">
</style>
> > oder: > > ~~~html <head> > > <link rel="stylesheet" href="style.css" type="text/css"/> > > </head>Ich persönlich finde eine "saubere" Programmierung ebenfalls sehr hilfreich. Speziell für diejenigen, die mit der Materie nicht so vertraut sind. Wenn das Ziel über Abkürzungen ebenfalls erreicht werden kann, umso besser.
Dafür ist das Forum ja da. Jeder kann sich dann die Info für sich selbst entnehmen. Daher an euch beide meinen Dank für die hilfreichen Erklärungen.
Ich interpretiere die Programmierung für das Element wie folgt. Die Position für das erste Bild wird relativ gesetzt. Durch den Prozentwert (50%) sollte es zur Seite vermittelt werden. Folglich immer zentriert auf den Monitor. Die absolute Position bezieht sich dann auf das zweite Bild, welches mit dem absoluten Wert auf das erste Bild fixiert wird.
Daher wundere ich mich, dass ich mit dem absoluten Prozentwert von 27 % durch Zufall die Darstellung im Firefox deckungsgleich zu dem ersten Bild hinbekomme. Erschließt sich mir nicht.
-
Bei einem Test auf dem IE habe ich festgestellt, dass der Link (NEWS NEWS ...) nicht angezeigt wird und das Bild insgesamt nach unten rutscht. Somit konnte ich auch das JavaScript nicht vom Link aus starten.
Hat jemand eine Idee, wo hier der Bug sitzt?
-
Fehler gefunden. Position "top:50 %" rausgenommen. Jetzt funktioniert es auch im IE auf verschiedenen Rechnern. Im Script selbst war der IE bereits berücksichtigt.
opacity (FF)
filter = "alpha(opacity ...)" (IE)Nur bei Safari (auf dem Smart-Phone) verrutscht das zweite Bild noch etwas nach rechts.
Wenn es mehr nicht ist, kann/muss die Welt damit leben.Vermutlich wäre für diese einfache Seite das alte Tabellenlayout sogar eine bessere (barrierefreiere) Lösung gewesen.
-
-
-
-
-
[latex]Mae govannen![/latex]
Dann würde ich die <img mit /> schließen.
Wieso das? Im geposteten Quelltext deutet ansonsten nichts auf XHTML hin, und für neue Projekte sollte man[1] ohnehin HTML5 nutzen (auch wenn man auch dort theoretisch die XHTML-Schreibweise nutzen könnte, allerdings bliebe die Frage, aus welchem Grund man dies tun sollte)
Stur lächeln und winken, Männer!
Kai
[1] außer, wenn man Kai345 ist, der ist zu faul, was neues zu lernen
--
Array(16).join("x" - 1) + " Batman!"
I am Pentium of Borg. Division is futile. You will be approximated.
SelfHTML-Forum-Stylesheet
-
Hallo,
Dann würde ich die <img mit /> schließen.
Wieso das? Im geposteten Quelltext deutet ansonsten nichts auf XHTML hin, und für neue Projekte sollte man[1] ohnehin HTML5 nutzen (auch wenn man auch dort theoretisch die XHTML-Schreibweise nutzen könnte, allerdings bliebe die Frage, aus welchem Grund man dies tun sollte)
Ich arbeite viel mit XSL und modelliere auch mal XML, da hab ich mir das angewöhnt, mal abgesehen davon, dass ich es für einen guten Stil halte. Ob es das ist oder nicht wurde im Forum wohl oft genug dikutiert ;-)
Das "würde" kann man als Empfehlung werten, ebenso wie der Hinweis auf die Auslagerung des CSS. Direktformatierung ist ja schließlich auch "erlaubt".Viele Grüße
Siri
-
-
-
Hi,
<p style="position:relative; top:50%; left:50 %">
Whitespace zwischen Zahl und Einheit ist m.M.n. nicht erlaubt.
CSS2.1 ist meiner Meinung:
The format of a percentage value (denoted by <percentage> in this specification) is a <number> immediately followed by '%'.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.