Am Samstag, 23. Oktober 2004 01:08 schrieb Christian Boltz:
Hallo Matthias, hallo Leute,
Am Donnerstag, 21. Oktober 2004 14:11 schrieb Matthias Houdek:
Mir geht es um eine einfache Möglichkeit, feste und scrollende Bereiche auf einer Seite zu kombinieren, ohne Frames zu benutzen oder permanent die betreffenden Objekte neu zu positionieren (über JS) und gleichzeitig unabhängig von der Fenstergröße (gut, eine bestimmte Mindestgröße sollte man voraussetzen können) und vom Browser zu sein.
Mit Frames ist das kein Problem, ohne Frames kann ich das nur über position:fixed (was den IE außen vor lässt). Alles andere, was mir dazu einfällt, ist Murx, weil viel zu aufwändig (<div>-Elemente, in denen dann ein anderes <div>-Element, das größer ist, scrollt // Neupositionierung der "feststehenden Elemente" nach jedem Event auf der Seite mittels JS // ...)
Wie schon mehrfach gesagt wurde, unterstützt der IE position:fixed nicht (außer auf dem Mac, IIRC). Jedenfalls muss man mit mehreren Stylesheets arbeiten: - ein "normales" Stylesheet für alle Browser (mit position:fixed) - ein i-esel.css für den IE, in dem "fixed" Elemente auf position absolute gesetzt werden und außerdem ein div mit dem scrollbaren Bereich auf 100% Höhe und Breite sowie overflow:auto - Das i-esel.css am Besten über "Conditional Comments" einbinden. Geschickterweise als zweites Stylesheet, das gezielt Teile aus dem ersten überschreibt. (Damit man nicht alles nochmal im i-esel.css pflegen muss, sondern nur die Abweichungen.)
Grobschema der HTML-Datei, stark gekürzt:
<html><head> <link rel='stylesheet' type="text/css" href="allgemein.css"> <!--[if gte IE 5]> <link rel='stylesheet' type="text/css" href="i-esel.css"> <![endif]--> </head> <body> <div id="feststehend">feststehendes Element</div> <div id="hintergrund"><div id="inhalt">scrollbarer Bereich</div></div> </body></html>
allgemeines Stylesheet (jeweils extrem gekürzt): #feststehend {position:fixed; top:30px;left:0px; } #inhalt {position:absolute; top:20px;left:150px; } /* ... diverse weitere Styles ... */
i-esel.css body {overflow-y:hidden; } #feststehend {position:absolute; } #hintergrund {position:absolute; width:100%; height:100%; left:0;top:0 } #inhalt {position:static; }
IE/Mac hat Probleme mit overflow:auto (wird als overflow:hidden interpretiert :-( ) - man sollte es also entsprechend verstecken. Immer noch i-esel.css:
/* Bloeder MacIE \*/ #hintergrund {overflow:auto;} /* Ende des Versteckspiels */
Wichtig ist bei letzterem der Backslash am Ende des ersten Kommentars. Alles bis zum folgenden Kommentar wird vom MacIE ignoriert.
Danke, werde ich mal ausprobieren. Meine (Test-)Lösung war bisher, ein <div> mit overflow als Elternobjekt nur für den zu scrollenden Bereich anzulegen. Das erzeugt dann aber Scrollbalken innerhalb der Seite (eben am Rand dieses <div>) - und das ist ja nun das allerletzte.
Einzig IE 4 (und älter) verträgt dieses Konstrukt nicht, für den bräuchte man dann JavaScript. Aber da der ja so langsam ausstirbt, ist das die Mühe nicht wert ;-)
Ja, den kann man IMHO nun wirklich außen vor lassen. (ggf. Hinweis auf Download von Firefox oder gleich eine Linux-Distri anbieten *g*)
Woher ich das alles weiß? Ich darf mich derzeit mit einer Seite "rumärgern", in der so Tricks verwendet werden. (Und für die Printversion kommt noch ein drittes Stylesheet dazu, das aber nur am Rand. Nein, @media print ist in diesem Fall nicht erwünscht.)
Lesetipp: Kai Laborenz: CSS-Praxis (Verlag: Galileo Computing) http://suse-linux-faq.koehntopp.de/php/amazon.php?isbn=3898424413
Mals sehen, was es kostet - aber scheint wohl sein Geld wert zu sein.
Obiger Workaround zur scheinbar "fixed" Positionierung im IE stammt auch aus diesem (empfehlenswerten) Buch. Insbesondere die Browser- Kompatibilitätsliste für alle CSS-Befehle möchte ich nicht mehr missen.
Gruß
Christian Boltz
PS: Ich habe ja Hoffnung, dass sich die ganzen Fehler und "Anti-Fehler" im IE gegenseitig "aufheben" und am Ende bleibt nichts übrig, nichtmal der IE. Schön wärs ;-)
Wird wohl ein Wunschtram bleiben - es sei denn - mal überlegen - ein Virus, der immer den IE deinstalliert ... ? *eg* --- NEIN! ICH MACHE SOWAS NICHT!
PPS: Solange die feststehenden Elemente nicht "klickbar" sein müssen, funktioniert auch ein feststehendes Hintergrundbild in (fast) allen Browsern. *SCNR*
Das Feststehende sind ja meist Navigationselemente - also unbrauchbar (oder doch? Sowie gescrollt wird, schaltet JS die Sichtbarkeit des Menüs ab und es bleibt nur noch das identisch aussehende Hintergrundbild stehen ... ;-) -- Gruß MaxX Hinweis 1: PMs an diese Adresse werden automatisch vernichtet. Hinweis 2: Bitte unbedingt beachten: http://www.suse-etikette.de.vu