Erste CSS - Layout Tests und Probleme

[dida]

Hallo!

Bin gerade dabei vom Tabellen-Layout auf CSS-Layout umzusteigen - Also noch ziemlicher Anfänger in CSS-Fragen.

Habe eine eine Testsite erstellt (siehe Link) und dazu zunächst zwei Fragen:

1. Im IE 6.0 werden die div Container zwar korrekt positioniert aber der führt das height:100% nicht aus.

2. Im Mozilla ist zwischen dem oberen und den unteren 3 Felder ein Spalt und er macht das height:100% höher als das Browserfenster ist.

Woran kann das jeweils liegen?

Weiter würde mich  noch interessieren, was ich an dem content (das mittlere) Feld noch ändern muss, damit ich hier vertikale Scrollbalken bekomme.
Sprich: Die Seite insgesamt soll stehen bleiben, nur das mittlere Feld mit dem Inhalt soll scrollen.

Vielen Dank

dida

[Auge]

Hallo

Weiter würde mich  noch interessieren, was ich an dem content (das mittlere) Feld noch ändern muss, damit ich hier vertikale Scrollbalken bekomme.
Sprich: Die Seite insgesamt soll stehen bleiben, nur das mittlere Feld mit dem Inhalt soll scrollen.

Zu den ersten beiden Punkten kann ich dir auf Anhieb nichts sagen.

Zur letzten Frage:
Entweder du arbeitest mit overflow http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow,
der Scrollbalken erschiene im formatierten Element, oder du fixierst alle
anderen Elemente, außer dem content-Bereich. Damit würde der Scrollbalken
am rechten Fensterrand erscheinen.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

Beide Methoden funktionieren allerdings _nicht_ mit allen Browsern. Dies kann
zu unerwünschten Layoutverschiebungen führen. Um das zu umgehen, kannst du
bestimmte Browser von den entsprechenden Formatierungen ausschließen.
http://aktuell.de.selfhtml.org/tippstricks/css/browserweiche/index.htm

Tschö, Auge

[Ingo Turski]

Hi,

Bin gerade dabei vom Tabellen-Layout auf CSS-Layout umzusteigen - Also noch ziemlicher Anfänger in CSS-Fragen.
Habe eine eine Testsite erstellt

wie man sieht ... sorry, aber Du solltest Dich zunächst noch etwas mit den Grundlagen beschäftigen.
float und position zusammen macht keinen Sinn. float und margin schon eher. Ein Tip: verzichte auf position ...

1. Im IE 6.0 werden die div Container zwar korrekt positioniert aber der führt das height:100% nicht aus.

... und auf eine fixe Höhe für die Seite. Der normale Scrollbalken des Browsers wird meistens mehr geschätzt als seiteninterne. Außerdem ist das Layout dann wesentlich einfacher.

freundliche Grüße
Ingo

[dida]

Hallo Ingo!

wie man sieht ... sorry, aber Du solltest Dich zunächst noch etwas mit den Grundlagen beschäftigen.

Da werd ich wohl eh nicht drum herumkommen :-)

float und position zusammen macht keinen Sinn. float und margin schon eher. Ein Tip: verzichte auf position ...

Kann das den Fehler verursachen? - Werde es mal testen!

1. Im IE 6.0 werden die div Container zwar korrekt positioniert aber der führt das height:100% nicht aus.
   ... und auf eine fixe Höhe für die Seite. Der normale Scrollbalken des Browsers wird meistens mehr geschätzt als seiteninterne. Außerdem ist das Layout dann wesentlich einfacher.

Das ist aber in diesem Fall nicht erwünscht, dass das gesamte Browserfenster scrollt. Das Menu (links + oben) und aktuelle Infos (rechts) sollten immer sichtbar bleiben. Nur der Inhalt (mitte) sollte scrollen. Geht das mit css nicht? - Brauche ich dann doch Tabellen oder gar Frames?

Vielen Dank

dida

[Ingo Turski]

Hi,

Das ist aber in diesem Fall nicht erwünscht, dass das gesamte Browserfenster scrollt. Das Menu (links + oben) und aktuelle Infos (rechts) sollten immer sichtbar bleiben. Nur der Inhalt (mitte) sollte scrollen. Geht das mit css nicht? - Brauche ich dann doch Tabellen oder gar Frames?

also bleibt für den eigentlich wichtigen Inhaltsbereich gerade mal die Hälfte des Anzeigefensters übrig? Und das dauerhaft? Wenn nun umfangreiche Inhalte angezeigt werden, müßte ich doppelt soviel scrollen?

Nunja, wenn dies unbedingt gewünscht ist, würde ich doch Frames verwenden. Ein links- oder rechtsseitig positioniertes Menü im IE zu fixieren ist noch relativ einfach zu bewerkstelligen, aber das?
In ein paar Jahren vielleicht, wenn position:fixed allgemein unterstützt wird, dann könntest Du so etwas leicht mit CSS umsetzen.

freundliche Grüße
Ingo

[dida]

Hallo!

Ich habe dazugelernt: Auf einmal ist der IE das Problem!

Habe meine Tests verbessert!
So wie es im Mozilla aussiehen könnte ich gut mit leben.
Da ist nur noch das Problem, das er im mittleren Teil ungefähr in der Mitte die Hintergrundfarbe ändert. Ist die Ebene da zu ende? Oder was ist da sonst los?

Den IE konnte ich (dank an Auge) austricksen und ihm eigene css Befehle geben. Bzw. umgekehrt.

Damit hätte ich nun zwei verschieden Layouts. Einmal (im Mozilla) scrollt der Browser und einmal im IE scrollt die Ebene.
Das wäre meiner Meinung nach vertretbar.

Aber: Das Dumme ist das ich für den IE eine feste Höhe eingeben muss. Warum macht der IE nicht height:100%?
Gibt es dafür auch einen Workaround?

Vielen Dank nochmal an Ingo und Auge - Eure Tipps haben mir sehr geholfen.

Gruß dida