iframe breite im div
0 0 0 0 0 0 0 0 0 0 0 0 
at
iframe breite im div
Hallo zusammen!
Ich hab mal wieder ein Problem.
Ich bin immer noch dabei eine (html-)Webseite zu bauen, deren Breite sich dynamisch an die Bildschirmgröße anpasst.
Grob ist die Seite so aufgebaut
<body>
<div id="content">
<div id="banner">Inhalt</div>
<div id="maincontent>
<div id="whatever">Inhaltzeugs</div>
<div id="whatever">Inhaltzeugs</div>
<div id="whatever">nochmehrInhaltzeugs</div>
<iframe name="iframe"></iframe>
</div>
</div>
</body>
Content ist 80% breit.
Die Größe des iframes soll sich ebenfalls dynamisch anpassen. Problem ist nur, links und rechts liegen noch 2 andere divs mit fester Breite. Wenn ich die Breite des iframe auf 100% setze und dann margin-left und margin-right mit der Größe der jeweiligen divs mache, dann schiebts mir das iFrame nach rechts aus dem content raus. Wenn ich width:auto beim iframe mach, krieg ich ja nur diesen vordefinierten Wert.
Was nun?
Gibts irgendne andere Möglichkeit das zu machen? Ich hab iframe genommen, weil ich nicht möchte, dass jedes Mal die komplette Seite neu geladen wird.
In der Navi hab ich dann einfach ...target="iframe" für die links genommen.
Es gibt ja wohl ne Möglichkeit des iframe per JS anzusprechen und das dann richtig zu skalieren. Würde aber JS gern so gut es geht vermeiden...
Danke schonmal für eure Hilfe.
-
hallo,
da bist du wohl auf den "heiligen gral" gestoßen, nämlich ein 3-spalten-layout mit 2 festen spalten (: das ist in CSS nicht ganz leicht zu lösen. ich empfehle hier http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig
Gruß,
Niklas-
Hallo,
Abgesehen davon würde ich dir empfehlen, wenn irgend möglich, auf den iframe zu verzichten. Nur eine Empfehlung...
Gruß,
Niklas-
Hallo,
Abgesehen davon würde ich dir empfehlen, wenn irgend möglich, auf den iframe zu verzichten. Nur eine Empfehlung...
Gruß,
NiklasSo, dachte ich poste auch mal die Lösung - für alle, die es evtl. interessiert. iFrame einfach in ein "container"-div stopfen.
#Container {padding-left:XXXpx; padding-right:XXXpx; height:100%; width:auto;}
XXX natürlich mit den gewünschten Werten ersetzen.
Wichtig beim Container height:100%;<div id="Container"><iframe id="Frame" name="iFrame" frameborder="0" width="100%" height="100%" src="yoursourcefile.html"></iframe></div>
Und schon funktionierts!
Trotzdem Danke Niklas!
-
-
hallo,
da bist du wohl auf den "heiligen gral" gestoßen, nämlich ein 3-spalten-layout mit 2 festen spalten (: das ist in CSS nicht ganz leicht zu lösen. ich empfehle hier http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig
Gruß,
NiklasJa - nee, eben nicht, das funktioniert nicht, wenn das ganze in einem div (in meinem Fall content) steht.
Wenn ich das ganze einfach in den Body schreiben würde, wärs ja auch mit dem iframe kein Problem.
Und ich hab glaub in meinem ersten posting auch erwähnt, dass das mit dem margin left und right bei iframe in einem div nicht funktioniert. Und wenn du meinst ich soll auf iframe verzichten, dann nenn mir bitte doch auch ne Alternative, bei der nicht die komplette Seite neu geladen wird - sondern nur der Inhalt "in der mitte" :)-
Ja - nee, eben nicht, das funktioniert nicht, wenn das ganze in einem div (in meinem Fall content) steht.
schwachsinn. body ist auch nur ein layer.
Wenn ich das ganze einfach in den Body schreiben würde, wärs ja auch mit dem iframe kein Problem.
doch. zumindest wenn die äußeren spalten eine feste breite haben sollen. das ist exakt die selbe problematik
Und ich hab glaub in meinem ersten posting auch erwähnt (zu haben), dass das mit dem margin left und right bei iframe in einem div nicht funktioniert.
das ist auch nicht die lösung, die die von mir verlinkte seite vorschlägt. zumindest nicht im zusammenhang mit width:100% für das iframe, wie du es anscheinend hast (unkorrekterweise). wer lesen und verstehen kann, ist hier klar im vorteil. die vorgeschlagene technik beinhaltet weit mehr (hacks) also nur die margins.
Und wenn du meinst ich soll auf iframe verzichten, dann nenn mir bitte doch auch ne Alternative, bei der nicht die komplette Seite neu geladen wird - sondern nur der Inhalt "in der mitte" :)
das ist nur ein einziger vorteil von frames. dagegen könnte ich dir 20 nachteile nennen. schließlich willst du z.b., dass man auf die einzelnen unterseiten deiner seiten verlinken kann. dazu ist ein neuladen unerlässlich. zudem kannst du, wenn dir dieser aspekt so wichtig ist, mit javascript arbeiten, dass nur die URL ändert und den inhalt dynamisch lädt (sogar mit hübschen fortschrittsanzeigen etc. und wenn der user JS deaktiviert hat? seis drum, schließlich leben wir im DSL-1000plus-zeitalter. navi per neuladen ist stand der technik.
Gruß,
Niklas-
das ist nur ein einziger vorteil von frames. dagegen könnte ich dir 20 nachteile nennen. schließlich willst du z.b., dass man auf die einzelnen unterseiten deiner seiten verlinken kann. dazu ist ein neuladen unerlässlich.
Gruß,
NiklasNee, ehrlich gesagt, dass will ich nicht :)
Aber ok - also die einzige Lösung bei iFrame ist JS?
Was sind denn eigentlich die anderen 19 Nachteile?
Ich finde nunmal, dass es ziemlich von Vorteil ist, wenn man nicht die gleichen Grafiken immer und immer wieder laden muss. Bei großen Datenmengen kann das von erheblichen Vorteil sein, da damit deutlich weniger traffic generiert wird.-
Nee, ehrlich gesagt, dass will ich nicht :)
deine entscheidung
Aber ok - also die einzige Lösung bei iFrame ist JS?
nein. es geht so, wie es der artikel über den "holy grail" sagt. ohne javascript, nur mit css. das javascript bräuchtest du nur, um nur den inhalt, und nicht den rest neu zu laden (ohne frame)
Was sind denn eigentlich die anderen 19 Nachteile?
http://www.subotnik.net/html/frames.html
Ich finde nunmal, dass es ziemlich von Vorteil ist, wenn man nicht die gleichen Grafiken immer und immer wieder laden muss. Bei großen Datenmengen kann das von erheblichen Vorteil sein, da damit deutlich weniger traffic generiert wird.
nein. das landet alles im browsercache. einer der vielen anfängerirrtümer. was eher jedesmal neu geladen wird, ist das frameset ;) ist bei iframes jetzt nicht so fatal.
Gruß,
Niklas-
Noch was:
In der Navi hab ich dann einfach ...target="iframe" für die links genommen.
Also doch... du kannst also nicht auf deine einzelnen Unterseiten per URL von außen verlinken. Schwerer Konzeptfehler.
Nur weil dus bist, bastel ich dir jetzt mal ein layout, allerdings mit einem div statt einem iframe (was aber beliebig austauschbar ist).
Gruß,
Niklas-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>3 Cols (2 fix) in 80% Container</title>
<style type="text/css">
* { margin:0; padding:0 }
body { text-align:center; /* für IE */ }
#container { width:80%; margin:auto; }
#col1 { float:left; width:200px; background:red; }
#col2 { float:right; width:150px; background:blue; }
#content { padding-left:200px; padding-right:150px; }
#banner { background:green; height:100px; }
</style>
</head>
<body>
<div id="container">
<div id="banner">Header</div>
<div id="wrapper">
<div id="col1">
<h1>Navi links</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div id="col2">
<h1>Sidebar rechts</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div id="content">
<h1>Inhalt</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</body>
</html>-
Vielen Dank für deine Mühe!
(Ach ja, du hast im css die Eigenschaften für den wrapper vergessen. ;-) )
Du meintest div und iframe wären beliebig austauschbar?
Also ich hab einfach mal bei deinem Code das divs den content mit iframe ausgetauscht. Tja, probiers mal selber aus - bei mir skaliert sich da herzlich wenig. :-/
Sobald ich den iframe tag benutz muss ich doch zwingend eine width-Angabe machen - da ich sonst auf diese vorgefertigte Standartbreite komm.Hab mir auch mal den link angeschaut, den du mir da gegeben hast:
"Ausblicke und Alternativen:
Tabellen ...
IFRAME ...
Positionierung mit CSS ...
Includes ..."Tabellen - find ich doof ;)
IFRAME - Check
Positionierung mit CSS - Check
Includes - ??? kenn und kann ich net.-
(Ach ja, du hast im css die Eigenschaften für den wrapper vergessen. ;-) )
weil er keine braucht... is nämlich unnötig.
Du meintest div und iframe wären beliebig austauschbar?
weiß ich nicht, ich benutze nie iframes. theoretisch schon. zumindest, wenn du dem iframe width:auto lässt.
Also ich hab einfach mal bei deinem Code das divs den content mit iframe ausgetauscht. Tja, probiers mal selber aus - bei mir skaliert sich da herzlich wenig. :-/
ne mach ich nicht. ich benutze grundsätzlich divs.
Sobald ich den iframe tag benutz muss ich doch zwingend eine width-Angabe machen
wieso das? kann ich bei mir nicht nachvollziehen, die breite ist dynamisch. aber du hast recht, das mit padding-left und right funktioniert nicht. dann musst du #wrapper wohl oder übel doch drin lassen und dem die paddings geben (negative margins für die spalten dann nicht vergessen):
#wrapper { padding-left:200px; padding-right:150px; }
#col1 { margin-left:-200px; }
#col3 { margin-right:-150px; }
#col1, #col3 { display:inline; /* Für IE */ }Hab mir auch mal den link angeschaut, den du mir da gegeben hast:
das will ich doch hoffen ;)
"Ausblicke und Alternativen:
wo steht das?? zumindest nicht auf http://de.selfhtml.org/css/layouts/mehrspaltige.htm
"Ausblicke und Alternativen:
Tabellen ...grrrr
IFRAME ...
GRRRRR. 1. unschön, 2. du kriegst ja wie du selbst einsiehst die formatierung nicht hin
Positionierung mit CSS ...
lässt sich nicht gescheit clearen.
Includes ..."
mein vorschlag. php. das standardvorgehen eben.
Gruß,
Niklas-
(Ach ja, du hast im css die Eigenschaften für den wrapper vergessen. ;-) )
weil er keine braucht... is nämlich unnötig.
Du meintest div und iframe wären beliebig austauschbar?
weiß ich nicht, ich benutze nie iframes. theoretisch schon. zumindest, wenn du dem iframe width:auto lässt.
Ja nee, eben nicht. Wenn du bei iframes width:auto oder gar keine Angabe machst, dann kriegst du eine vorgefertigte Standartbreite (sind bei mir so ca. 300 px)
ne mach ich nicht. ich benutze grundsätzlich divs.
Ja, nur leider kann ich divs nicht über target ansprechen, oder? Was
wiederum heißt, dass das ganze ja nur funktioniert, wenn ich die komplette Seite neulade, was ich aber nicht möchte.
Und zum Thema Browsercache: es gibt doch da in einem ganz beschi**** Browser so eine ganz hässliche Einstellmöglichkeit, dass bei jedem Zugriff auf eine Seite das ganze Cachezeug neu geladen wird.Sobald ich den iframe tag benutz muss ich doch zwingend eine width-Angabe machen
Siehe oben^
wieso das? kann ich bei mir nicht nachvollziehen, die breite ist dynamisch. aber du hast recht, das mit padding-left und right funktioniert nicht. dann musst du #wrapper wohl oder übel doch drin lassen und dem die paddings geben (negative margins für die spalten dann nicht vergessen):
#wrapper { padding-left:200px; padding-right:150px; }
#col1 { margin-left:-200px; }
#col3 { margin-right:-150px; }
#col1, #col3 { display:inline; /* Für IE */ }Hab mir auch mal den link angeschaut, den du mir da gegeben hast:
das will ich doch hoffen ;)
"Ausblicke und Alternativen:
wo steht das?? zumindest nicht auf http://de.selfhtml.org/css/layouts/mehrspaltige.htm
http://www.subotnik.net/html/frames.html den link hast du mir auch gegeben :)
mein vorschlag. php. das standardvorgehen eben.
kann leider kein php :(
-
Hallo.
Wenn du bei iframes width:auto oder gar keine Angabe machst, dann kriegst du eine vorgefertigte Standartbreite (sind bei mir so ca. 300 px)
Diese Problematik lässt sich durch den Verzicht auf
<iframe>umgehen.ne mach ich nicht. ich benutze grundsätzlich divs.
Ja, nur leider kann ich divs nicht über target ansprechen, oder?Nein, wozu auch?
Was
wiederum heißt, dass das ganze ja nur funktioniert, wenn ich die komplette Seite neulade, was ich aber nicht möchte.Für sinnvolle Anwendungen hat sich AJAX dafür etabliert. Ob deine Anwendung dazu gehört, weiß hier niemand.
Und zum Thema Browsercache: es gibt doch da in einem ganz beschi**** Browser so eine ganz hässliche Einstellmöglichkeit, dass bei jedem Zugriff auf eine Seite das ganze Cachezeug neu geladen wird.
Es gibt in fast jedem Browser irgendwelche Optionen, die irgendetwas bewirken, was einen stört. Aber wo soll da das Problem liegen?
MfG, at
-
-
-
-
-
-
-
-
-
-