nicht angemeldet
Positionierung & Co.
Hi,
vielleicht erinnert sich noch jemand, ich versuche gerade, ein Element (abgerundete Ecke) fixed in der unteren linken Ecke zu positionieren. Da muß man wohl systematisch rangehen... :-)
Fangen wir erst mal mit dem MSIE an. Version 4 beherrscht kein "position:fixed", deswegen muß man wohl mit "absolute" Vorlieb nehmen. Die Ecke darf sich beim Scrollen nicht beliebig verschieben (sieht halt blöd aus, wenn sie mitten im Dokument steht...), ich möchte nicht dynamisch die Position regelmäßig neu setzen (Stichwort Geocities), also muß sie ganz unten im Dokument stehen. Sie taucht also nur auf, wenn man nach ganz unten scrollt. Nur: Wie kriegt man den Wert raus?! Alles, was ich ausprobiert habe, war entweder undefined, oder die Höhe des Bildschirmbereiches. Niemals aber bekam ich die Höhe des Body-Bereiches. Kann mir da jemand helfen?
MSIE 5:
Dieser beherrscht hoffentlich "position:fixed", was die Sache vereinfacht. Leider habe ich ihn (noch) nicht hier (Festplattenknappheit); bei Bedarf bitte ich dann um einen Test :-)
Netscape 4:
Da sieht es ja wohl noch schlimmer aus als beim MSIE 4, deswegen habe ich die Tests bisher auf ein Minimum beschränkt. Den "richtigen" Wert bekam ich aber auch nicht. Wie findet man den?
Netscape 5:
Dürfte auch kein Problem sein, hoffe ich :-) Das kann ich aber noch selbst austesten. Gecko verbraucht zum Glück längst nicht so viel wie ein ganzer IE...
Opera:
Ab wann geht eigentlich was? Ich habe Opera noch überhaupt nicht getestet, über sachdienliche Hinweise wäre ich glücklich.
Ältere Browser:
Die werde ich wohl manuell ausklammern müssen... naja, kein großes Problem soweit :-)
Also, die Schwierigkeit sind die beiden 4er-Browser. Ich brauche also jeweils einen Weg, die Länge des Dokuments (in px) herauszufinden. Dabei wäre es sehr gut, wenn ich nicht die ganze Seite in ein <div>/<layer>-Konstrukt setzen müßte, aber was tut man nicht alles... :-)
Über Hilfe freue ich mich!
Cheatah
-
Hallo Cheatah!
Zuerst die Gute nachricht:
Ich habe dir die Lösung für NS4.5 IE4 und Opera3.5http://www.unet.univie.ac.at/~a9105535/forum/cheatah.html
Eigentlich nützen wir da nur die ungenügende Interpretation von CSS der Browser aus [fixed sollte nich mitscrollen]Wenn du die <bilder> so im Elementenfluß positionierst, daß die jeweils ganz am Anfang und am Ende der Seite stehen, hast du es.
Jetzt die schlechte Nachricht:
MSIE 5: Dieser beherrscht hoffentlich "position:fixed",
»»
Nein das tut der IE5 nicht!! Im Gegenteil, er hat einen merkwürdigen bug, wenn mehrere <div>s mit 'position:fixed;' in der Seite vorkommen, wird nur das letzte in der Seite dargestellt.
Wenn Elementen mit 'positon:relative; in der Seite vorkommen ist der IE5 ganz verrückt (ich verschuche erst nicht zu beschreiben was er dann alles falsch macht)Also, die Schwierigkeit sind die beiden 4er-Browser.
»»
Eigentlich sind dein Problem die 5-er! Die CSS entweder richtig interpretieren (gecko) oder bughafter sind als die 4-er (IE5)[in diesem Fall!!]
Sonst fällt mir nur ein:<body style="background-image:url(bg.gif); background-repeat:no-repeat;">
wobei, bg.gif z.B. 50x1000px groß ist.
Das verstehen soweit ich weiss alle Browser.Grüße
Thomas-
Hi Thomas,
Zuerst die Gute nachricht:
Ich habe dir die Lösung für NS4.5 IE4 und Opera3.5tja, vielen Dank... aber ehrlich gesagt bin ich darüber schon etwas hinaus :-)
Schau mal den aktuellen Stand von http://cheatah.net/test/ an, dort habe ich zumindest die obere Ecke schon bestmöglichst drin. Jetzt fehlt nur noch die untere, und ich wollte sie eigentlich nicht einfach hinter das Dokument setzen :-)Jetzt die schlechte Nachricht:
MSIE 5: Dieser beherrscht hoffentlich "position:fixed",
Nein das tut der IE5 nicht!!
ARGH!!!
Naja, dann werde ich ggf. einfach Netscape 5 abfragen und dafür eine optimierte Fassung einsetzen, der Rest hat halt nur ganz unten eine Ecke.Hey, dabei fällt mir ein: Ich kann doch einfach das <div> erst mal ganz normal hinter den Text setzen und dann um 80 Pixel (Höhe der Grafik) hochsetzen! Kurz in den Raum gefragt (kriege ich vermutlich auch selbst raus, bin aber gerade in Tippwut), wie erfahre ich das yOffset eines <div>s?
Sonst fällt mir nur ein:<body style="background-image:url(bg.gif); background-repeat:no-repeat;">
Das verwende ich, mit background-attachment:fixed. Dadurch habe ich die obere Ecke. Die untere ist das Problem... :-)
Danke einstweilen für Deine Mühe,
Cheatah
-
Hallo Cheatah!
»»Hey, dabei fällt mir ein: Ich kann doch einfach das <div> erst mal ganz normal hinter den Text setzen und dann um 80 Pixel (Höhe der Grafik) hochsetzen! Kurz in den Raum gefragt (kriege ich vermutlich auch selbst raus, bin aber gerade in Tippwut), wie erfahre ich das yOffset eines <div>s?
»»Mich würde interessieren, wie man die Höhe des Dokuments(nicht die Höhe des Fensters) rausbekommt. (document.body.offsetHeight macht es nämlich nicht. oder habe ich was übersehen?)
Grüße
Thomas-
Hi,
»»Hey, dabei fällt mir ein: Ich kann doch einfach das <div> erst mal ganz normal hinter den Text setzen und dann um 80 Pixel (Höhe der Grafik) hochsetzen! Kurz in den Raum gefragt (kriege ich vermutlich auch selbst raus, bin aber gerade in Tippwut), wie erfahre ich das yOffset eines <div>s?
Mich würde interessieren, wie man die Höhe des Dokuments(nicht die Höhe des Fensters) rausbekommt. (document.body.offsetHeight macht es nämlich nicht. oder habe ich was übersehen?)
wenn ich das wüßte, bräuchte ich obiges nicht herauszufinden... Übrigens klappt es, wenn ich ein <div id="ecke"> definiere und document.ecke.top=document.ecke.top-78 (für 80 Pixel, ein bißchen Toleranz muß wohl sein) ausführe. Jedenfalls mit Netscape 4. Gecko scheint in der Hinsicht noch nicht ausgereift zu sein, da hat zumindest vieles nicht geklappt. Der MSIE macht mir auch noch Probleme. Hach, ist das alles schlimm...
Cheatah
-
Hallo Cheatah!
Andre Idee:
Man kann ja die sichtbare Höhe des fensters herausfinden:
var y;
if (document.layers){
y = self.innerHeight;
}
else {
y = document.body.offsetHeight/2;
}
hoehe = y25;
Oder so irgendwie.
Was ist wenn mann demnach ein dynamisches <div> erzeugt?
document.write ...bla bla bla
und die ermittelte Höhe als div height=y eischreibt.
Das ganze absolut positionieren, das dann etwa so ausshen sollte:
nach <body> gleich:
<div style="position:absolute; top:0; left:0; width:80px; height:[y];"><img src="ecke1.gif" height="80" width="80" valign="top" border="0" vspace="0" hspace="0" alt=""><br>
<img src="ecke1.gif" height="80" width="80" valign="bottom" border="0" vspace="0" hspace="0" alt="">
</div>Wenn's nicht so nicht geht, könnte man noch zwischen den <img> ein
<div style="position:relative; width:80px; height:[y-160]; background-color:#ffffff; layer-background-color:#ffffff; border:none;></div>
einfügen (was einen leeren box unter IE & NS erzeugt)
Probiert habe ich es nicht, aber klingt machbar.Grüße
Thomas-
Hi,
Man kann ja die sichtbare Höhe des fensters herausfinden:
[...]
Das ganze absolut positionieren, das dann etwa so ausshen sollte:
[...]
stimmt schon, das Problem ist dann nur, daß es mitscrollt! Und das darf es nun mal nicht. Wenn es scrolt, muß es gaaanz am Ende sein. Da kann man natürlich (für Seiten, die kleiner als ein Bildschirm sind) die Größe berechnen und entsprechend anwenden. Nur wie berechne ich die Höhe des _Dokuments_, wenn ich für die Grafik keinen weiteren Platz darunter beanspruchen möchte? Bei Netscape habe ich bereits eine Umpositionierung hingekriegt (direkt nach der Definition habe ich sinngemäß Höhe=Höhe-78 gesagt, danach konnte ich auch nicht mehr darunter scrollen).
Hach, ist Perfektionismus mühsam... :-)
Cheatah
-
-
-
-
-