nicht angemeldet
Hallo miteinander,
ich versuche gerade, von einem Frame- oder Tabellenlayout wegzukommen und versuche deshalb, die Bereiche meiner Seite mit DIVs zu positionieren.
Leider erlebe ich dabei gleich mehrere Überraschungen, die ich noch nicht richtig begreife. Eine Testseite findet sich unter
http://do4fun.homeip.net/wrath/main.htm
Stört euch nicht an den quietschbunten Hintergrundfarben, die sind nur dazu da, um die Grenzen und Größen der DIVs klar zu sehen. Mir macht nun als erstes der IE (hier in Version 5.5) Sorgen.
[1] Für das graue und das pinkfarbene Feld ist die Position mit
position: absolute; left: xxx; right: yyy;
angegeben. Die Breite, die sich daraus ergeben müsste (und die mit der Fenstergröße variieren soll), scheint der IE zu ignorieren. Er macht das DIV nur so breit, wie es für den Inhalt nötig ist.
[2] Das gelbe DIV ist mit
position: absolute; top: xxx; bottom: yyy;
positioniert. Hier sehe ich einen ganz ähnlichen Effekt, aber mit umgekehrtem Vorzeichen. Der IE scheint die Höhe, die sich aus diesen zwei Angaben ergibt, zu ignorieren, und macht das DIV stattdessen so hoch, wie er es für nötig hält. HTML und BODY haben übrigens beide schon height: 100%. Das gelbe DIV soll INNERHALB des Browserfensters bleiben - andernfalls ist ja auch ein separater Scrollbalken für das DIV sinnlos!
[3] Dann hat der gelbe Bereich einen ziemlich großen Abstand vom rechten Fensterrand, bei mir ungefähr 50px, obwohl laut Stylesheet right: 16px angesagt ist.
Außerdem überlagert bei mir der Scrollbalken rechts einen schmalen Streifen vom Text. Das könnte man evtl. mit margin und/oder padding hinkriegen, aber eigentlich sollte es eine bessere Lösung geben, denn es kann IMHO nicht Sinn der Sache sein, dass der Web-Autor selbst bei seinem Layout schon die Breite der Scrollbalken mit einkalkulieren muss. Da wären wir wieder beim neuen Lieblingsthema von Gernot Back. ;)
[4] Kopfzerbrechen machen mir auch noch die Mini-Grafiken, aus denen ich den sanftblauen Rahmen aufbauen möchte. Auch hier versuche ich, über die Eigenschaften top/bottom und left/right die Rahmensegmente in der Höhe bzw. in der Breite zu strecken. Das glaubt mir aber weder mein IE noch mein Opera. :(
Opera 7.23 hat wohl weniger Schwierigkeiten mit den Größenangaben für die DIVs, obwohl er den rechten Rand des gelben DIVs auch wesentlich weiter nach innen rückt als vorgesehen. Allerdings nur schätzungsweise 30px anstatt etwa 50 wie der IE. Aber das graue und das pinkfarbene DIV streckt er auf annähernd die Breite, die ich erwarten würde.
Irgendwelche guten Ratschläge? Möglichst solche, die auch dem CSS-schwachen IE aufs Pferd helfen?
Grüße aus der sonnigen Region Stuttgart,
Martin