Frames simulieren mit Div & Overflow

Aiun · 30. Oktober 2005

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 ?

tobias-digital · 30. Oktober 2005

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

Aiun · 30. Oktober 2005

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 |

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 ^^

kills · 30. Oktober 2005

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

tobias-digital · 30. Oktober 2005

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

Aiun · 31. Oktober 2005

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.

forTeesSake · 31. Oktober 2005

- 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>

tobias-digital · 31. Oktober 2005

@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>

Aiun · 2. November 2005

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

tobias-digital · 2. November 2005

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

Aiun · 2. November 2005

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*

tobias-digital · 2. November 2005

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.

forTeesSake · 2. November 2005

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

tobias-digital · 2. November 2005

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

kills · 2. November 2005

Einfach den Header absolut positionieren im normalen Browserfenster...

forTeesSake · 2. November 2005

kills, was bringt das genau?

kills · 2. November 2005

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

forTeesSake · 2. November 2005

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

Krain · 2. November 2005

@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

TinTin · 2. November 2005

@kills:

Ich habe da 'ne bescheidene Bitte, kannst du deine Aussage evntuell mit ein

wenig Code verdeutlichen?

TinTin

kills · 2. November 2005

Siehe die Navi auf dieser Seite:

http://de.selfhtml.org/css/layouts/anzeige/fixiert.htm

Aiun · 2. November 2005

@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 ?

Krain · 2. November 2005

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.

kasp0r · 7. November 2005

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:

geloescht_JesterDay · 8. November 2005

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

Anmelden

Frames simulieren mit Div & Overflow

Empfohlene Beiträge

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte