Liebes Forum,

auf einer in Arbeit befindlichen Website habe ich Probleme mit dem 2spaltigen Layout. Normalerweise steht der Inhalt rechts, und auf manchen Unterseiten ist links eine 2. Spalte für Bilder etc. Ich habe die rechte Spalte also mit einer breiten Margin nach rechts geschoben und positioniere die linke Spalte als div absolut.

Jetzt dachte ich durch die absolute Positionierung sei der linke Teil aus dem Dokumentenfluß herausgenommen und ich könnte ihn beliebig plazieren – aber er verhält sich immernoch relativ zum rechten Teil, ich muß also eine negative margin-top angeben um das Bild überhaupt links (und nicht unterhalb) des Textes zu plazieren, und wenn ich die Breite des Browserfensters verändere wandert es auf und ab, je nachdem wie lang der Text in der rechten Spalte ist.

Was mache ich falsch? Ich werde noch verrückt…

Die Adresse: www.marginalie.de/ammonundsturm/test/bio.html

Das Stylesheet ist unter www.marginalie.de/ammonundsturm/test/aunds.css

Wäre lieb wenn mir jemand einen Tip geben kann!

Christina

Hallo Christina

Versuch mal

Code

#links     { position: absolute; top: 95px; left: 120px; visibility: visible; display: block } 

Ganz wichtig, schau Dir Deine Seiten immer auch im IE an und nicht nur mit ff. Da hasst Du noch ziemlich viele Differenzen ...

Gruss
FSt

Danke FSt,

aber das Bild wandert immer noch, wenn ich das Browserfenster verändere. Wie kann das denn sein? Ich dachte "position: absolute" nimmt es aus dem Seitenfluß heraus.

Ja, mit IE hast Du Recht, ich arbeite am Mac und deswegen ist es nicht so einfach – im IE 5 für Mac sieht es meist auch o.k. aus, diese Boxmodel-Probleme sind wohl nur im IE Win. Naja, ich fange erst an mit CSS und werde es schon noch lernen (nicht zuletzt mit Eurer Hilfe!).

Christina

Hallo Christina,

lies mal hier nach:

http://edition-w3c.de/...tml#heading-9.3.1%A0

Zitat:"Die Position (und möglicherweise Größe) der Box wird mit Hilfe der Eigenschaften 'left', 'right', 'top' und 'bottom' angegeben. Diese Eigenschaften geben Abstände relativ zum umschließenden Block der Box an. Absolut positionierte Boxen werden aus dem normalen Fluss entfernt. Das bedeutet, sie haben keinen Einfluss auf das Layout späterer gleichrangiger Elemente."

Die absolute Position von "portrait" ist also relativ zu "links".

<div id="links">
<div id="portrait">
<img src="bilder/fake.jpg" alt="Frank Ammon und Thekla Sturm" width="357" height="227" /></div>
</div>

Was ich noch nicht verstehe, soll der gesamte Seiteninhalt beim Verändern des Browserfensters "wandern"?
Und nur "portrait" darf die Position nicht verändern?

Das würde ja dann dazu führen, daß sich das Bild über den Text schiebt.

Wenn das zweispaltige Layout insgesamt mit einer festen Breite zentriert sein soll,
dann schau Dir mal diese Anleitung
http://projectseven.com/...s/qdmacfly/index.htm
mit fertigen Beispielseiten an
http://projectseven.com/...y/finished_lefty.htm
Gruß Sabine

Ah, danke Sabine!

Da scheint der Fehler zu liegen, ich muß nochmal über das ganze Design des unteren Seitenbereichs gehen. Ich werde es mir in Ruhe anschauen. Das ganze Design soll schon fest sein und nicht wandern, ich dachte nur es ist besser wenn die Textspalte sich in einem gewissen Rahmen anpasst, und bei einer festen Breite wird es ja auch kompliziert wenn jemand den Text vergrößert. Im Prinzip soll es also links fest sein, rechts variabel.

Gar nicht so einfach, die CSS-Positionierung!

Besten Dank für Eure Unterstützung!
Christina