iFrames wie Frameset positionieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anfang
annehmen
aufgabe
code
ende
erzeugen
header
hintergrundfarbe
http
index
klicken
kundenwunsch
party
position
positionieren
problem
setzen
tabelle
url
wahl
-
ho ;)
Ich gehöre zu den Menschen, die sich nicht wirklich gerne mit Frames und iFrames auseinandersetzen, aber nun ist es eine Aufgabe, und ich habe nicht wirklich eine Wahl :D
Die erste Aufgabe war, eine Seite zu erstellen, die wie folgt aussieht:
Oben ein Header (Über die ganze Breite)
Unter dem Header links ein Menü
Rechts davon der Main-Part der Seite
Alles sollte mit Frames gemacht werden und war nicht wirklich schwer.
Die neue Aufgabe lautete nun, das ganze mit iFrames zu machen (die für so etwas meiner Meinung nach gar nicht geeignet sind, aber bitte...)
-> Aussehen ident, nur statt Frames -> iFrames
Nach langem herumprobieren und fragen kam ich auf ein Ergebnis, das zwar annähernd brauchbar, aber nicht wirklich zufriedenstellend ist. Es funktioniert soweit in allen modernen Browsern, außer im IE8.
Ansehen kann man sich das ganz hier.
Hinter bzw. unter den Frames:
Hier klicken, um die Aufstellung der farblich gekennzeichneten DIVs anzusehen.
Das Problem:
Die Breite wird schön ausgefüllt. Die Höhe wird im IE8 leider nicht komplett ausgefüllt.
Wie kann ich also in allen Browsern das gleiche Ergebnis erlangen, sprich die Höhe voll auszufüllen?
Das Problem ist einigen von euch sicher auch bekannt... Ich benötige eine Lösung für die Höhe 100% - 120px
Die Divs machen das Automatisch, wie man an der Hintergrundfarbe erkennen kann, aber die iFrames machen nicht mit... zumindest nicht im Internet Explorer 8.
Der relevante Code:
index.html
<html> <head> <title>Bouncer AG</title> <link rel="stylesheet" type="text/css" href="style/style.css"> </head> <body> <div id="allframe"> <div id="head"><div id="head-sub"><iframe src="head.html" id="head-frame" name="head" frameborder="0" border="0" framespacing="0"></iframe></div></div> <div id="menu"><div id="menu-sub"><iframe src="menu.html" id="menu-frame" name="menu" frameborder="0" border="0" framespacing="0"></iframe></div></div> <div id="main"><div id="main-sub"><iframe src="main.html" id="main-frame" name="main" frameborder="0" border="0" framespacing="0"></iframe></div></div> </div> </body> </html>
Das dazu passende Style-Sheet:
/* Stylesheet der Übung2 */ /* Allgemein ANFANG */ html { height:100%; } body { margin:0; height:100%; } /* Allgemein ENDE */ /* ----- */ /* Frames Positionieren ANFANG */ #allframe { width:100%; height:100%; } #head { background-color:red; position:absolute; top:0; left:0; width:100%; height:120px; z-index:3; } #head-sub { position:absolute; top:0; left:0; right:0; bottom:0; } #head-frame { width:100%; height:100%; } #menu { background-color:green; position:absolute; top:0; left:0; width:230px; height:100%; float:left; z-index:2; } #menu-sub { position:absolute; left:0; top:120px; right:0; bottom:0; } #menu-frame { width:100%; height:100%; } #main { background-color:blue; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; } #main-sub { position:absolute; left:230px; right:0; bottom:0; top:120px; } #main-frame { width:100%; height:100%; } /* Frames Positionieren ENDE */
Erklärung zum Code:
Es sind 3 DIV Bereiche (Header (oben), Menu (links auf der Seite), Main (der Rest).
Der Header hat eine bestimmte Höhe (120px)
Das Menü (unter dem Header) hat eine bestimmte Breite (230px)
Das Problem besteht nur durch die Höhe. Es soll die ganze Seite ausgefüllt werden. (Das geht überall, außer im IE8)
Bin für alle Vorschläge offen :)
lg
Sincer -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Naja, das Problem ist halt das du ein DIV niemals auf 100% Höhe bekommen wirst. Entweder überzeugst du deinen Kunden davon nur für den Content ein IFrame zu nutzen oder auf ein Frameset zu setzen. Und wenn das alles nicht fruchtet musst du das Grundgerüst für deine IFrames aus einer Tabelle erzeugen. Tabellen können im Gegensatz zu DIVs eine 100% Höhe annehmen.
-
Es handelt sich um eine Aufgabe. Kein Kundenwunsch.
Gehen muss es auf jeden Fall, ich habe zumindest irgendwo bei Lima schon eine Lösung für ein ähnliches Problem gesehen. -
ho ;)
Auf die Tabelle wurde ich auch schon aufmerksam gemacht. Das ist wahrscheinlich die beste Alternative.
Ich hatte nur gehofft, vil. doch eine Lösung mit DIVs zu finden.
Auf jeden Fall danke für die schnelle Antwort ;)
Bin für weitere Vorschläge offen :)
thx
Sincer -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
