Probleme mit CSS-Boxen

[fkerber]

Hi!

Momentan bin ich echt kurz vorm Verzweifeln. Im Anhang findet ihr mein Problem. "Soll" ist eine "Fotomontage", wie ich es gerne htte. Jeder Versuch, es mit CSS bzw. diesem Box-Modell hinzubekommen ist bis jetzt gescheitert.

So schwer kann es doch nicht sein, oder?


Besonders deprimierend an der Sache find ich dann, wenn ich das Ganze mit Frames in 5 Minuten hinbekomme. Da muss ich doch sagen "Es lebe der Fortschritt!"


Ich hoffe, ihr könnt mir helfen.


Ciao, Frederic

[S2B]

Hi Frederic,

zuerst einmal musst du dich entscheiden, ob du es absolut oder relativ positionieren willst, eine Mischung geht nicht. Wenn du ein Verhahlten ähnlich zu Frames haben willst, musst du es absolut positionieren, also mit diesen Eigenschaften arbeiten:

• position: absolute
• left, right, top, bottom

Wenn du es hingegen relativ ausrichten willst, musst du dir zuerst einmal abgewöhnen, dass die Boxen unten bündig erscheinen, das ist mit "normalen Mitteln", also ohne irgendwelche fiesen Tricks nicht möglich. Die Boxen werden nach unten immer nur so groß sein, wie ihr Inhalt. Zum Anordnen zweier Boxen nebeneinander würde ich so etwas verwenden:

Code:

<div style="float: left; width: 150px">
  links
</div>
<div style="margin-left: 150px">
  rechts
</div>

Dabei musst du darauf achten, dass der margin-Wert verändert werden muss, wenn du einer der Boxen ein margin, ein padding oder ein border verpasst. Auf der sicheren Seite bist du auf jeden Fall, wenn du erst dem Inhalt dieser zwei Boxen zusätzliche Eigenschaften gibst, sprich Unterboxen einfügst (dann muss der margin-Wert nämlich nicht mehr angepasst werden):

Code:

<div style="float: left; width: 150px">
  <div style="border: 1px #000 solid; padding: 30px">
    links
  </div>
</div>
<div style="margin-left: 150px">
  <div style="margin: 5px auto; padding: 2px">
    rechts
  </div>
</div>

Auf jeden Fall solltest du aber einen XHTML-Doctype verwenden, denn sonst machen die Browser wirklich, was sie wollen.

Viel Glück und Spaß noch.