• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

div Layout im IE und FF

U

undeat

Neues Mitglied
Hallo

Ich habe ein Problem beim Layouten mit den verschiedenen Browsern

zum Aufbau. Oben befindet sich ein Div mit 100% breite und einer fixen höhe für das Banner
darunter
links ein Frame mit 100% höhe und fixer breite für das Menü
in der mitte ein Frame mit relativer Breite und 100% Höhe für den Inhalt
und Rechts ein mit dem Linken div identischer div für diverse andere Sachen

Ergebnis in Beiden Browsern sieht erstmal super aus. Aber! Die 100% höhe der unter dem Banner angeorneten Divs beziehen sich auf die Gesamte Fensterhöhe ohne Banner. Es entsteht also ein scrollbalken.

Kann man irgendwie etwas machen wie hight = 100% - 200px?

Nun zum größeren Problem:
Wird das Mittlere Frame mit Inhalt gefüllt, der länger ist als die 100% Fensterhöhe hergeben schreibt der FF den hinhalt über den DIV hinaus einfach weiter. (Sieht man am Hintergrund) Der IE dehnt nur den Mittleren Frame aus. Links und rechts behalten ihre länge. Dies habe ich im IE behoben, indem ich ein Main Div mit 100% höhe erstellt habe, in dem sich die anderen DIVs befinden erstellt habe. Dies führt aber beim FF auch nicht zum Erfolg, das er die DIVs nicht mit dem Inhalt ausdehnt.

Was kann ich da nun machen? Danke für eure Antworten
 
bei den 100% höhe -200px kann ich dir nicht helfen.
das zweite problem geht relativ einfach zu lösen.

der IE(7) reagiert prima auf height:100%; und erweitert dann auch das element nach unten.
der FF aber nicht.
für den musst du unter height:100%; noch zusätzlich min-height:100%; angeben.
der IE(7) ignoriert diese angabe, da er sie nicht kennt.
der FF (und ich glaube auch IE8 ) wird sie aber als letzte anweisung akzeptieren und so umsetzen wie du es haben möchtest.
 
Das min-height wird bei mir von beiden Browsern ignoriert. Ich abe herrausgefunden, dass ich wenn ich nen Doctype verwede:

Code: 
[LEFT][SIZE=2][COLOR=#3f5fbf][SIZE=2][COLOR=#3f5fbf]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"[/COLOR][/SIZE][/LEFT]
[SIZE=2][COLOR=#3f5fbf]"http://www.w3.org/TR/html4/frameset.dtd">[/COLOR][/SIZE]
[SIZE=2][COLOR=#3f5fbf]
[/COLOR][/SIZE]

Das verhalten vom IE und FF erfreulicherweise zumindest schonmal gleich sind. Allerdings ist es hier so, dass das height Atribut der Inhaltes ignoriert wird. Habe ich also keinen Inhalt sehe ich den Frame auch nicht. Selbst wenn ich min-height angebe. Dafür aber pass mit diesem Doctype auch der FF die DIV höhe an den Inhalt an. Allerdings wie gesagt immer auch wenn der Inhalt kürzer ist als height oder min-height
[/COLOR][/SIZE]
 
Zuletzt bearbeitet:
Haben wir heute eine Epidemie von Frameset-Doctypes oder verteilst du nur deine Fragen auf mehrere Accounts? http://www.html.de/css/32724-div-zentrieren.html#post244683

Dazu: SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Grundgerüst einer HTML-Datei

Es gibt viele viele Seiten im Internet, die erklären, wie sich so ziemlich jede Variation eines Spaltenlayouts mit CSS umsetzen lässt. Da solltest du mal reinschauen, denn deine Technik scheint im Ansatz fehlerhaft oder zumindest ungünstig zu sein. Eine geeignete Suche: "css spalten layout".

Du erwartest hier die Lösung eines Problems, zu dem im Internet hundertfach Beispiele gefunden werden können, und du postest noch nicht einmal Code. Wie soll dir da jemand helfen?

Ich abe herrausgefunden, dass ich wenn ich nen Doctype verwede:
Zum Vergrößern anklicken....

DOCTYPE-Switch und seine Auswirkungen
 
Space Vampire schrieb:
der IE(7) reagiert prima auf height:100%; und erweitert dann auch das element nach unten.
der FF aber nicht.
Zum Vergrößern anklicken....

jeder Browser kann nur auf height:100% reagieren, wenn seine Vorfahren eine definierte Größe haben.
Bei Prozent muss das sogar hinauf bis zum Initial Containing Block (html) gehen, sonst fällt height auf auto zurück.
Prozent heißt ja immer Prozent von was.

Space Vampire schrieb:
für den musst du unter height:100%; noch zusätzlich min-height:100%; angeben.
der IE(7) ignoriert diese angabe, da er sie nicht kennt.
Zum Vergrößern anklicken....

Wie kommste denn darauf?
Der IE6 kennt kein min-height der IE7 sehr wohl. :wink:
 
Ich habe mitlerweile schon 1000 Sachen ausprobiert bin noch nicht ganz am Ziel:

Es soll so sein:

top Frame: von Links nach rechts 100% Breite
Menü Frame: links unter Topframe fix Breite aber von der höhe bis zum ende des Dokumentes
Inhalt Frame: Fixer Rand links und rechts, unterhalbt top Frame, variable Breite höhe angepasst an Inhalt (Hat einfluss auf das Dokument Ende)
Rechter Frame: Genau wie Menü nur eben an der rechten Seite.

Es funktioniert nun alles super bis auf dass der Menüframe und der Rechte Frame sich nicht über das ganze Dokument erstrecken.

Code: 
[LEFT][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]#Title[/COLOR][/SIZE]
[/COLOR][/SIZE][SIZE=2]{[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]postition[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]absolute[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]background-color[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]#E5E0C0[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]width[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]100%[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]height[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]100px[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]margin[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]0px[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]border[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]1px[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]border-color[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]#000000[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]border-style[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]solid[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2]}[/SIZE][/LEFT]
  

[SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]#Menü,
[/COLOR][/SIZE][/COLOR][/SIZE][LEFT][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]#Inhalt,[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]#Rechts[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#3f7f7f]
[LEFT][/COLOR][/SIZE][SIZE=2]{[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]border[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]1px[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]border-color[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]#000000[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]border-style[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]solid[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2]}[/SIZE][/LEFT]
 
[LEFT][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]#Menü[/COLOR][/SIZE]
[/COLOR][/SIZE][SIZE=2]{[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]z-index[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]2[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]background-color[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]:[/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]#E5E0C0[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]position[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]absolute[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]left[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]0px[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]top[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]142px[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]bottom[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]0px[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]width[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]200px[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2]}[/SIZE][/LEFT]
 
[LEFT][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]#Inhalt[/COLOR][/SIZE]
[/COLOR][/SIZE][SIZE=2]{[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]z-index[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]1[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]position[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]absolute[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]top[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]142px[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]left[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]220px[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]right[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]220px[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]background-color[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]:[/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]#E5E0C0[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]height[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]auto[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]min-height[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]100%[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2]}[/SIZE][/LEFT]
 
[LEFT][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]#Rechts[/COLOR][/SIZE]
[/COLOR][/SIZE][SIZE=2]{[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]z-index[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]3[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]position[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]absolute[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]background-color[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]:[/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]#E5E0C0[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]top[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]142px[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]right[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]0px[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]bottom[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]0px[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE]
[SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]width[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]: [/SIZE][I][SIZE=2][COLOR=#2a00e1][SIZE=2][COLOR=#2a00e1]200px[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2];[/SIZE][/LEFT]
[SIZE=2]}[/SIZE]

[/LEFT]
 
Code: 
[SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]<![/COLOR][/SIZE]
[LEFT][/COLOR][/SIZE][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]DOCTYPE[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]HTML[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#808080][SIZE=2][COLOR=#808080]PUBLIC[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]"-//W3C//DTD HTML 4.01//EN">[/COLOR][/SIZE][/COLOR][/SIZE][/LEFT]
 

[LEFT][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]<[/COLOR][/SIZE][/COLOR][/SIZE][/LEFT]
[SIZE=2][COLOR=#008080]
 
[LEFT][/COLOR][/SIZE][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]html[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]>[/COLOR][/SIZE][/COLOR][/SIZE][/LEFT]

[SIZE=2][COLOR=#008080][LEFT][SIZE=2][COLOR=#008080]<[/COLOR][/SIZE][/COLOR][/SIZE][/LEFT]
[SIZE=2][COLOR=#008080]
 
[LEFT][/COLOR][/SIZE][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]head[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]>[/COLOR][/SIZE][/COLOR][/SIZE][/LEFT]

[SIZE=2][COLOR=#008080][LEFT][SIZE=2][COLOR=#008080]<[/COLOR][/SIZE][/COLOR][/SIZE][/LEFT]
[SIZE=2][COLOR=#008080]
 
[LEFT][/COLOR][/SIZE][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]title[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]>[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]DPSG-Stahle[/SIZE][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]</[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]title[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]>[/COLOR][/SIZE][/COLOR][/SIZE][/LEFT]

[SIZE=2][COLOR=#008080][LEFT][SIZE=2][COLOR=#008080]</[/COLOR][/SIZE][/COLOR][/SIZE][/LEFT]
[SIZE=2][COLOR=#008080]
 
[LEFT][/COLOR][/SIZE][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]head[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]>[/COLOR][/SIZE][/COLOR][/SIZE][/LEFT]
 

[LEFT][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]<?php[/COLOR][/SIZE][/COLOR][/SIZE][/LEFT]
[SIZE=2][COLOR=#ff0000]
 
[LEFT][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]include[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]([/SIZE][SIZE=2][COLOR=#008200][SIZE=2][COLOR=#008200]"Layout.css"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]);[/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]?>[/COLOR][/SIZE][/COLOR][/SIZE][/LEFT]
 

[LEFT][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]<[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]div [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]id[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]=[/SIZE][I][SIZE=2][COLOR=#2a00ff][SIZE=2][COLOR=#2a00ff]"Title"[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]>[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]<?php [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]include [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]([/SIZE][SIZE=2][COLOR=#008200][SIZE=2][COLOR=#008200]"module/Banner.php"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]);[/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]?>[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]</[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]div[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]>[/COLOR][/SIZE][/COLOR][/SIZE]
[LEFT][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]<[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]div [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]id[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]=[/SIZE][I][SIZE=2][COLOR=#2a00ff][SIZE=2][COLOR=#2a00ff]"Menü"[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]>[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]<?php [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]include [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]([/SIZE][SIZE=2][COLOR=#008200][SIZE=2][COLOR=#008200]"module/Menue.php"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]);[/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]?>[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]</[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]div[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]>[/COLOR][/SIZE][/COLOR][/SIZE]
[SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]<[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]div [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]id[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]=[/SIZE][I][SIZE=2][COLOR=#2a00ff][SIZE=2][COLOR=#2a00ff]"Inhalt"[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]>[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]<?php [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]include [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]([/SIZE][SIZE=2][COLOR=#008200][SIZE=2][COLOR=#008200]"module/Main.php"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]);[/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]?>[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]</[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]div[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]>[/COLOR][/SIZE][/COLOR][/SIZE]
[SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]<[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]div [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#7f007f][SIZE=2][COLOR=#7f007f]id[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]=[/SIZE][I][SIZE=2][COLOR=#2a00ff][SIZE=2][COLOR=#2a00ff]"Rechts"[/COLOR][/SIZE][/COLOR][/SIZE][/I][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]>[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]<?php [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]include [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]([/SIZE][SIZE=2][COLOR=#008200][SIZE=2][COLOR=#008200]"module/Rechts.php"[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2]);[/SIZE][SIZE=2][COLOR=#ff0000][SIZE=2][COLOR=#ff0000]?>[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]</[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]div[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]>[/COLOR][/SIZE][/COLOR][/SIZE][/LEFT]
[/LEFT]

 
[LEFT][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]</[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#3f7f7f][SIZE=2][COLOR=#3f7f7f]html[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#008080][SIZE=2][COLOR=#008080]>[/COLOR][/SIZE][/COLOR][/SIZE][/LEFT]

Hier nochmal nen Link zu der Seite:
http://www.dpsg-stahle.de/DPSG_Neu/index.php

Danke für Antworten
 
Zuletzt bearbeitet:
Ah danke. das mit der Validation ist ja echt genial. Ich versteh zwar atm nur schwer was gemeint ist mit manchen Sachen aber ich wurschtel mich mal da durch
 
OK ich hab mal alles auf das Layout beschränkt und so angepasst das es keine Fehler mehr gibt. Wie zu sehen ist, gibt es immernoch das Problem, dass die Höhen des linken und rechten <div> nur 100% der Fensterhöhe haben und nicht 100% des Dokumentes. Das Mittlere Frame hat als hight: auto; und min-height: 100%;

Wie bekomme ich das jetzt hin, dass links und rechts genau so bis unten an das Dokument gehen wie das Mittlere.
 
Gelöst:

Heute Nach kam mir die Idee. Das linke, mittlere und rechte div sind in einem Übergeordneten Div. das linke und rechte div erhalten somit mit top: 0px und bottom 0px; die höhe des übergeordneten div. Das übergehordnete und mittlere Div hat height: auto;. Dadurch passt sich ihre höhe an de Texthinhalt an. Damit linkes und rechtes Div nicht zu weit zusammen geschoben werden haben sie min-height: 100%.

Das geht soweit wunderbar solange auch genügend inhalt im mittleren div ist. Sobalt der inhalt zu kurz wird schieb es sich zusammen. Da position auf relative stehen muss lässt sich auch keine höhe festlegen. Nun haben ich ein weiteres Div erstellt an der gleichen Stelle wie das mittlere allerdings mit Absoluter Position von bottom: 0px bis top: 0px; und einem nidrigerem Z-Index.
Nun sieht es so aus als würde das mittlere Div immer bis unten hin gehen. Ist der Inhalt größer als eine Fensterhöhe dehnt sich alle Automatisch aus
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben