Veröffentlicht 30. Oktober 200519 j hi, aus diversen Gründen nutze ich auf einer meiner Seiten keine Frames, sondern ein Div-Layer mit Overflow: auto (scrollbar) Problem: Neben diesem Div-Layer soll ein menü erscheinen. das content-Divlayer ist position:absolute; da sonst kein overflow:auto möglich ist das Problem das bleibt: ich möchte, das dieses Content-Div allen Platz einnimmt, der neben dem Menü bliebt. Auch wenn sich die größe des Browsers verändert. Bisherige Lösung: Javascript. bei onload und onresize wird das Content-Div an die neue größe angepasst. Wenn ich nun aber seiten mit einigen Bildern habe, die auf einer ISDN-Leitung einige Sekunden zu laden brauchen, dann habe ich Zeitweise nur die größe, die das Content-Div beim Start hatte, onresize greift nicht wärend des Ladevorgangs. irgendwelche Ideen ? möglichkeiten diesen teil ohne JS umzusetzen ?
30. Oktober 200519 j Problem: Neben diesem Div-Layer soll ein menü erscheinen. das content-Divlayer ist position:absolute; da sonst kein overflow:auto möglich ist das Problem das bleibt: ich möchte, das dieses Content-Div allen Platz einnimmt, der neben dem Menü bliebt. Auch wenn sich die größe des Browsers verändert. Wieso sollte overflow: auto; nur bei absolut positionierten Elementen funktionieren? "auto" ist doch der Default-Wert von overflow. Hast Du mal Code für uns, oder zumindest einen Screenshot wie's aussehen soll oder so? Ich versteh nämlich nicht so ganz was Du meinst. Gruß, Tobias
30. Oktober 200519 j ich habe ausprobiert was passiert wenn ich position:relative und overflow: auto benutze, dann habe ich Scrollbar am Browserfenster, nicht am Div-Layer. ich möchte ein 2 Spalten Layout mit header drüber --------------- Header --------------- Nav | Content | Nav | Content | Nav | Content | wobei der Content Scrollbar sein Soll. Das ganze mit Divs. Nav hat z.b. 200px breite. Content soll verfügbare Breite nehmen. Vielleicht habe ich ja nur nen dummen, unsichtbaren Fehler gemacht ^^
30. Oktober 200519 j ich habe ausprobiert was passiert wenn ich position:relative und overflow: auto benutze, dann habe ich Scrollbar am Browserfenster, nicht am Div-Layer. Warum nicht einfach im Elementfluss lassen? <div style="overflow:auto; height:100px; widht:100px;"></div> fertig.. Gruß, Markus
30. Oktober 200519 j Hi Aiun! Meinst Du so: http://www.tobias-digital.de/stuff/test/overflow.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> ul { width: 100px; float: left; } div { height: 300px; overflow: auto; } </style> </head> <body> <ul id="menu"> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> </ul> <div id="content"> <h1>Lorem Ipsum Dolor</h1> <p>Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna.</p> <p>Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna.</p> <p>Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna.</p> <p>Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna.</p> <p>Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna.</p> <p>Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna.</p> </div> </body> </html> Gruß, Tobias
31. Oktober 200519 j prinzipiell: ja sowas meinte ich. Allerdings soll der Div-Container jetzt 100% höhe bekommen. bei X% höhe funktioniert (Firefox, IE unbekannt) Overflow nicht mehr. Es hat dann die größe, die vom Inhalt gefordert wird.
31. Oktober 200519 j - menü 200 px - content verfügbarer platz - content 100% hoch - wenn browserfenster kleiner inhalt content dann wird scrollbalken am contentDiv angezeigt getestet IE 6, firefox <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> html, body{ height: 100%; } #menu { width: 200px; height: 100%; float: left; } #content { height: 100%; overflow: auto; } </style> </head> <body> <div id="menu"> <ul> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> </ul> </div> <div id="content"> <h1>Lorem Ipsum Dolor</h1> <p>Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna.</p> <p>Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna.</p> <p>Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna.</p> <p>Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna.</p> <p>Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna.</p> <p>Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna.</p> </div> </body> </html>
31. Oktober 200519 j @Aiun: meinst Du so? http://www.tobias-digital.de/stuff/test/overflow.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body { padding: 0px; margin: 0px; height: 100%; } ul { margin: 0px; padding: 0px; width: 100px; float: left; } div { position: absolute; height: 100%; margin: 0px 0px 0px 100px; overflow: auto; } </style> </head> <body> <ul id="menu"> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> </ul> <div id="content"> <h1>Lorem Ipsum Dolor</h1> <p>Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna.</p> <p>Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna.</p> <p>Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna. Sed sollicitudin velit eu magna.</p> </div> </body> </html>
2. November 200519 j hi alle Vorschläge haben 1 Problem: der Header wird nicht mit bedacht. Schon allein wenn ein Margin-Top wirkung annimmt, rutscht das Div-Layer nach unten und das Browserfenster bekommt eine Scrollbar um das ganze div einzunehmen. Div height:100% nimmt die höhe vom Browserfenster, nicht die verfügbare höhe (FF) das heißt: schiebe ich es um 200px nach unten (für den header), habe ich auch 200px überstand unten aus dem Fenster
2. November 200519 j Ja, ist doch klar oder? Warum willst Du denn überhaupt den Content Bereich 100% hoch haben? Vielleicht kann man deinen Plan ja auch anders lösen. Gruß, Tobias
2. November 200519 j ich möchte eine Seite, die ich normalerweise mit Frames machen würde, mit einem scrollbaren Div-Layer lösen. "warum" ist erstmal egal das bedeutet, ich habe links ein Menü, oben einen Header und den Content-Bereich. Der Content-Bereich soll allen verfügbaren Platz einnehmen und dann scrollbar werden wenn der inhalt zu groß für diesen Bereich wird. bisher löse ich das mit einem Javascript das die feste breite & höhe meines Div-Layers ändert, wenn die Fenstergröße verändert wird. Für mich klingt es wie ein Fehler, wenn ein Div-Layer bei 100% die größe des Fensters nimmt. Wofür brauche ich denn eine % Angabe die über mein Fenster hinausgeht *verwirrtgugt* habe gerade festgestellt, das ein <table style="height:100%"> auch nur bis HTML4-Trans funktioniert *kopfschüttel*
2. November 200519 j Der Content-Bereich soll allen verfügbaren Platz einnehmen und dann scrollbar werden wenn der inhalt zu groß für diesen Bereich wird. Aber das passiert doch automatisch, wenn der Contentbereich größer wird als das Browserfenster, erscheint rechts eine Srollleiste. :confused: Gruß, Tobias PS: Wenn Du Frames einsetzen möchtest, dann setz doch Frames ein. Ich finde es nicht grade guten Stil wenn man mit einer Technik eine andere Technik neu erfinden will.
2. November 200519 j Aber das passiert doch automatisch, wenn der Contentbereich größer wird als das Browserfenster, erscheint rechts eine Srollleiste ich denke dass er aber nur den contentbereich scrollen will. wenn der, ohne dass er in einem div mit fester größe untergebracht ist, größer als das browserfenster wird, dann scrollt der scrollbalken ja das gesamte fenster und somit is dann der header nicht mehr sichtbar. beim rest stimme ich tobias-digital zu
2. November 200519 j hm, verstehe, aber da würde sich imho "position: fixed;" für den header anbieten. "position: fixed;" kann der IE aber nicht, ergo, wenn das Layout tatsächlich genau so und nicht anders umgesetzt werden soll bleibt IMHO nur der Weg über Javascript oder tatsächlich Framesets, denn dafür wurde es unter anderem erfunden. Gruß, Tobias
2. November 200519 j Hi, Naja er such eine Möglichkeit, einen Scrollbaren Inhalt zu haben (In diesem Fall macht das der Browser) und einen Header der oben stehen bleibt. Er kann den Inhalt scrollen und der Header bleibt absolut oben am Bild stehen... ist doch der Gleiche Effekt.. oder sehe ich das falsch? Gruß, Markus
2. November 200519 j ja? also wenn ich das div mit "absolute" positioniere kann ich zwar sagen "bitte stehe auf left:0px; top: 0px" aber beim scrollen der browserscrollbar verschwindet das div doch mit...??? reden wir gerade an einander vorbei?? :beagolisc
2. November 200519 j @Aiun: Hast du es dir in etwa so Beispiel vorgestellt? (Verkleinere mal das Browserfenster) Hier ist e möglich nur den Content zu scrollen und alles ist rein CSS basiert. Das ganze habe ich vor einiger Zeit mal gemacht. Schau dir den Quelltext mal dazu an und falls du noch Fragen dazu hast melde dich ruhig bei mir (ich hoffe ich weiß dann noch, was ich damals so geschrieben habe) Gruss Markus
2. November 200519 j @kills: Ich habe da 'ne bescheidene Bitte, kannst du deine Aussage evntuell mit ein wenig Code verdeutlichen? TinTin
2. November 200519 j Siehe die Navi auf dieser Seite: http://de.selfhtml.org/css/layouts/anzeige/fixiert.htm
2. November 200519 j @kills: das funktioniert im IE nicht. @Krain: danke, das sehe ich mir mal an...funktioniert auch im IE .... und ich konnte auf anhieb kein JS erkennen ... oder ?
2. November 200519 j Reines HTML mit CSS ohne irgendwelche JavaScript-Spielchen. Ist getestet für IE, FF, Netscape und Opera. An die CSS usw. kommst du ja ohne Probleme ran. Vielleicht hilft es dir weiter.
7. November 200519 j also ich bin mir jetzt nicht sicher ob ich totalen müll laber aber ne theoretische möglichkeit dass das banner da oben bleibt wäre doch dieser float befehl... float:top; oder sowas,...oder irre mich mich da jetzt :confused:
8. November 200519 j ne theoretische möglichkeit dass das banner da oben bleibt wäre doch dieser float befehl... float:top; oder sowas,...oder irre mich mich da jetzt :confused: Ja, theoretisch wäre theoretisch vieles möglich float kennt nur left oder right
Archiv
Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.