nicht angemeldet
Ideale Darstellung gesucht
Hi,
in meiner neu designeten Site möchte ich jede einzelne (Inhalts-)Seite so erstellen, daß oben links und unten links jeweils eine Grafik eingefügt wird (abgerundete Ecke). Nur der Optik wegen, also mit der Bedingung "so gut, wie es der Browser halt kann, aber nicht auf Deubel komm raus". Oben links ist kein Problem, das habe ich bereits idealisiert:
<body style="background-image:url(grf/upleft.gif); background-attachment:fixed; background-repeat:no-repeat;">
Erklärung:
Nicht-CSS-fähige Browser (also solche, die einen Hintergrund ewig wiederholen) stellen nix dar. Alle anderen haben die Grafik schön in der Ecke - sofern möglich sogar permanent, also auch beim Scrollen. Die Grafik bleibt dabei im Hintergrund, was besonders vorteilhaft ist.
Etwas ähnliches möchte ich jetzt für die Ecke unten links haben. Mein aktueller Stand ist folgender:
<div id="ecke" name="ecke" style="position:absolute; z-index:-1; left:0px;"><img src="/test/grf/downleft.gif" width="130" height="80" alt=""></div>
<script language="JavaScript" type="text/javascript">
<!--
if (document.layers) if (document.ecke) if (document.ecke.top) {
document.ecke.top = document.ecke.top - 76;
if (document.ecke.top+76 < window.innerHeight) { document.ecke.top = window.innerHeight-76; }
}
// -->
</script>
Erklärung:
Die Grafik wird bei CSS-fähigen Browsern am linken Rand erzeugt, ansonsten da, wo sie eben gerade ist (_nicht_ ideal). "z-index" hat offenbar keine Auswirkungen, zumindest bleibt die Grafik im Vordergrund (_nicht_ ideal). Mit JavaScript wird der Layer mit der Grafik derzeit nur bei Netscape 4 (_nicht_ ideal) zunächst nach oben verschoben, damit nicht zuviel Platz verschenkt wird, dann bei kleinen Seiten an den unteren Rand - und zwar vier Pixel zu tief, weil window.innerHeight nicht die korrekte Höhe liefert (ebenfalls _nicht_ ideal). Beim MSIE wird einfach nur die Grafik hingeklatscht, was besonders bei kleinen Seiten unschön ist, weil ein weißer Rand darunter bleibt.
Nun hoffe ich auf Hilfe zu folgenden Fragen:
- Wie ignoriere ich _mit möglichst geringem Aufwand_ Browser, bei denen die Darstellung nicht ideal sein kann?
- Kann ich die Grafik irgendwie in den Hintergrund bringen (weniger wichtig)?
- Wie kriege ich die Grafik beim MSIE an den unteren Bildschirmrand, und zwar entweder ganz unter die Seite (wie bei Netscape), oder besser als Wasserzeichen in die Ecke, analog zu oben links?
- Gibt es einen Weg, die Ungenauigkeit von window.innerHeight bei Netscape zu berechnen oder zu umgehen, so daß die Grafik auch wirklich ohne Rand unten ist?
Ich möchte tunlichst vermeiden, den gesamten Code mit JavaScript auszugeben, weil ich dann zusätzlich zur Prüfung den Code mehrfach auf jeder Seite mitführen muß. Leider fand ich keinen Weg, die Grafik beim MSIE nachträglich zu positionieren (bin ich nur zu blöd dazu?), und auch eine Positionierung "von unten" klappt nicht (CSS 2.0, und wer unterstützt das schon?). Den Wasserzeicheneffekt scheint der MSIE auch nur beim Seitenhintergrund zu beherrschen.
Hoffentlich hat jemand bis hierhin gelesen und kann mir dann auch noch helfen *g* :-)
Danke schon mal,
Cheatah
-
Hi Cheatah !
Irgendwie cool, daß ich Dir, der Du immer online zu sein scheinst und auch in jedem Forum anzutreffen bist (wie schaffst Du das?), vielleicht helfen kann.
<div id="ecke" name="ecke" style="position:absolute; z-index:-1; left:0px;"><img src="/test/grf/downleft.gif" width="130" height="80" alt=""></div>
Für das Positionieren ganz unten hab ich mal das folgende Script benutzt, das auch übrigens
für den IE funktionieren sollte:<script language="JavaScript1.2">
if (document.layers){
document.ecke.top = window.innerHeight-75;
}
else if (document.all){
document.all.ecke.style.top = document.body.offsetHeight-75;
}
</script>Also so sollte es auf jeden Fall für beide Browser gehen.
Gibt es Browser, die <Div> können, aber kein CSS ? Dann muß ich mir auch noch Gedanken
machen, wie ich die abfangen kann...Ich denke z-index hat daher keine Auswirkung, da sich das wohl nur auf Layers bezieht und die
"normale" Anzeige offensichtlich nicht als Layer betrachtet wird.Um ein Springen der Grafik auf der Seite zu vermeiden, könntest Du anfangs das Div nichtsichtbar "anzeigen" und erst nach dem Setzen der korrekten Position auch sichtbar machen.
Mit Netscape und korrekte Werte über Breite und Höhe, hab ich auch schon Bekanntschaft machen müssen. Wollte ein Div über die gesamte Bildschirmbreite strecken, ohne daß ein
Scrollbalken erscheinen muß, aber mit document.balken.width=window.innerWidth gings nicht.
(Kann ja mal einer probieren, es bleibt immer ein dicker fetter Rand!)
Erst nach dem ich mit 'Clip' gearbeitet habe, gings problemlos!!!
So hab ich's dann gemacht:in den Styles:
.redline{position:absolute;left:0;top:0;width:100%;height:1;layer-background-color:red;
background-color:red;border:0.1px solid red;}das Div
<DIV id="redline" class="redline"></DIV>und das Script
if (document.layers){
document.redline.clip.width = window.innerWidth;
document.redline.clip.height = 1;
}
else if (document.all){
document.all.redline.style.width = document.body.clientWidth;
document.all.redline.style.height = 1;
}Vielleicht hilft ein solcher "Trick" ja auch bei der senkrechten Positionierung?
Ich hoffe, ich hab Dir wenigstens a bissl geholfen...
Hambam (ICQ 43807526)
-
Hallo zusammen,
Gibt es Browser, die <Div> können, aber kein CSS ? Dann muß ich mir auch noch Gedanken
machen, wie ich die abfangen kann...man könnte ja die Grafik als Hintergrund-Image für das DIV-Tag setzen, dann stellen die auch in dem Fall nix dar.
Gruß,
Martin-
Hi,
Gibt es Browser, die <Div> können, aber kein CSS ? Dann muß ich mir auch noch Gedanken
machen, wie ich die abfangen kann...man könnte ja die Grafik als Hintergrund-Image für das DIV-Tag setzen, dann stellen die auch in dem Fall nix dar.
dachte ich mir auch, nur habe ich das irgendwie nicht zuwege gebracht. Ich experimentiere aber weiter in diese Richtung...
Cheatah
-
-
Hi,
Irgendwie cool, daß ich Dir, der Du immer online zu sein scheinst und auch in jedem Forum anzutreffen bist (wie schaffst Du das?), vielleicht helfen kann.
:-)
»» document.all.ecke.style.top = document.body.offsetHeight-75;
Komisch, als ich das gemacht habe, hat es nicht geklappt...?
Der Nachteil hieran ist, daß die Grafik auch bei längeren (=scrollbaren) Seiten auf dem ersten Bildschirm steht, aber mitscrollt. Entweder soll die Grafik ganz unter allen Inhalten sein, oder nicht scrollbar. Offenbar kann man document.all.ecke.style.position nicht nachträglich ändern (zumindest nicht auf fixed); gibt es einen anderen Weg? Kann man die reelle Seitenhöhe herausfinden?Um ein Springen der Grafik auf der Seite zu vermeiden,
Das ist nicht weiter schlimm, da will ich gar keinen großen Aufstand drum machen. Div wird geschrieben, Div wird positioniert - das ist im Bruchteil einer Sekunde geschehen.
[Netscapes Pixelgenauigkeit]
Erst nach dem ich mit 'Clip' gearbeitet habe, gings problemlos!!!
Vielleicht hilft ein solcher "Trick" ja auch bei der senkrechten Positionierung?Danke, ich werde damit mal experimentieren!
Ich hoffe, ich hab Dir wenigstens a bissl geholfen...
Hast Du, vielen Dank :-)
Cheatah
-
-
Hallo Cheatah!
du bist an der Sache (noch immer) sehr interessiert! ;-)
"z-index" hat offenbar keine Auswirkungen,
z-idex kann zwar negativen Wert haben, aber:
Im Elementenfluß hat jedes Element einen 'parent' nicht aber das Wurzel (root) Element, dessen z-index von Haus aus 0 ist.
Dieses 'root' - Element erschafft einen Stapel der Elemente, aber andere Elemente können ebanfall ihen lokalen Stapel erschaffen; so ein Element hat dann 2 'Stapelebenen' eine für den Stapel den er erschaffen hat ( das ist immer 0) und eine andere für die Ebene der es (das Element) zugehört, diese 2. wird mit z-index angegeben. Der z-index - Wert wird vererbt.
Etwa so sieht es dann aus (von hinten nach vorne wie es gesehen wird)ebene0--------body mit z-index:0;--------
ebene1----div1 mit z-index:1;----
ebene2----div2 mit z-index:2;----
----div2.1 mit z-index:1;----
----div2.3 mit z-index:-1;----
----div2.2 mit z-index:2;----
ebene3----div4 mit z-index:-1;----
ebene4----div3 mit z-index:3;----deshalb kann man nichts hinter body bringen mit z-index:-__;
PS: Es funktioniert nur wenn alle divs mit position:absolute; versehen sind.so ich hoffe es hilft etwas das z-index zu verstehen.
Grüße
Thomas-
Hi Thomas,
du bist an der Sache (noch immer) sehr interessiert! ;-)
tja, so schnell gibt man ein Design nicht auf :-)
[schnippel]
so ich hoffe es hilft etwas das z-index zu verstehen.
Ja, danke, jetzt kenne ich zumindest den Grund, warum es nicht funktioniert. Eine Art Workaround, z.B. als zweite Hintergrundgrafik, siehst Du nicht?
Cheatah
-
Hallo Cheatah!
»»Eine Art Workaround, z.B. als zweite Hintergrundgrafik, siehst Du nicht?
Nicht wirklich, eventuell:
#eck { position:absolute; top:__px; left:0px; width:_px; height:_px; z-index:0; } /*also auf die ebene von body*/
#seite { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; }<body>
<div id="eck"><img ...></div>
<div id="seite>
der inhalt der seite
</div>
</body>für #eck müsstest du die 'top' Position mit JS abfragen und schreiben.
für #seite müsste es eventuell auch ein clip: nötig sein, wie Hambam es schrieb.
Sonst fällt mir nichts ein.Grüße
Thomas-
Hi Thomas,
»»Eine Art Workaround, z.B. als zweite Hintergrundgrafik, siehst Du nicht?
Nicht wirklich, eventuell:
<body>
<div id="eck"><img ...></div>
<div id="seite>
der inhalt der seite
</div>
</body>tja, das ist es, was ich unter allen Umständen vermeiden möchte :-)
Mittlerweile bin ich aber soweit, daß ich eine JavaScript-Datei einlese und mir von dieser das <div> schreiben und positionieren lasse. Das Problem ist jetzt eigentlich nur noch der MSIE:
Ich finde beim besten Willen keinen Weg, das <div> ganz unten (also erst durch Srcollen sichtbar) oder alternativ (eigentlich besser) als Wasserzeichen zu positionieren!
Selbst Versuche mit regelmäßigem Repositionieren sind gescheitert, weil window.pageYOffset nicht bekannt ist. Abfragen der aktuellen (initialen) Position klappt auch nicht, weil document.all.ecke.style.top zunächst leer ist... und die Größe des Dokuments (nicht des Fensters) scheint der MSIE auch nicht zu verraten. Ich finde nicht mal einen passenden Event-Handler, um das Srollen mitzuloggen!
Hilfe... :-(
Cheatah
-
Hi Cheatah,
Ich finde nicht mal einen passenden Event-Handler, um das Srollen mitzuloggen!
äääh... onscroll ist es nicht?
Gruß,
Martin-
Hi,
Ich finde nicht mal einen passenden Event-Handler, um das Srollen mitzuloggen!
äääh... onscroll ist es nicht?
ja, sorry, ich hab mich falsch ausgedrückt - ich finde nicht, um wie viel und in welche Richtung (besser: an welche Position) gescrollt wurde!
Any hints?
Cheatah
-
Hi Cheatah,
ja, sorry, ich hab mich falsch ausgedrückt - ich finde nicht, um wie viel und in welche Richtung (besser: an welche Position) gescrollt wurde!
Kein Problem, ich wußte auch nicht ob ich es richtig verstanden habe. Mit JavaScript habe ich bisher nur wenig gemacht.
Any hints?
Und da bin ich mir wieder nicht sicher ob es das Richtige ist. Vermutlich nicht, denn es geht erst mit dem IE5. Und zwar die componentFromPoint Methode. Wenn ich die Beschreibung richtig verstanden habe liefert sie die Werte die du suchst.
Gruß,
Martin-
Hi,
Any hints?
Und da bin ich mir wieder nicht sicher ob es das Richtige ist. Vermutlich nicht, denn es geht erst mit dem IE5. Und zwar die componentFromPoint Methode. Wenn ich die Beschreibung richtig verstanden habe liefert sie die Werte die du suchst.
ne, dann ist es wohl nichts für mich. Es muß mindestens beim IE4 funktionieren, eher sogar noch beim IE3, der ja auch etwas CSS beherrscht. Letzteres soll aber keine Voraussetzung sein...
Dennoch dank!
Cheatah
-
-
-
-
-
-
-