Margin neben gefloatetem Element

[elektrowolf]

Ich habe einen Textfluss mit p und h3-Ueberschriften. In einem p befindet sich ein Bild, welches links gefloatet ist. Es wird nicht gecleart, also rutscht auch die nächste Ueberschrift rechts neben das Bild. Die Ueberschriften haben alle einen margin nach links. Bei der Ueberschrift neben dem Bild wird dieser margin jedoch nicht angezeigt! Mit padding gehts auch nicht. Was kann man da machen?

 

[ingoS]

Hast du die Breite des Bildes bedacht?
Der Text umfließt zwar das Bild, das margin-left orientiert sich aber nach wie vor am Rand des umschließenden Elements.

 

[Efchen]

Soll heißen, Deine Überschrift ist ein Block-Element. Block-Elemente nehmen immer 100% der Breite des Elternelements ein. Gefloatete Elemente stehen nicht im Textfluss, verkürzen daher auch nicht die Breite des Block-Elements. Wenn Du Deiner Überschrift einen Rahmen oder eine Hintergrundfarbe setzt (oder Dir das Firefox-Plugin Firebug holst, mit dem sowas noch besser geht), dann siehst Du, wie breit Deine Überschrift wirklich ist, dass sie nämlich unter Deinem Bild liegt. Daher funktioniert das margin trotzdem prächtig.

Aber vielleicht ist es eine bessere Lösung für Dich, wenn Du dem Bild ein margin-right gibst?

Gruß,
-Efchen

 

[prm]

In einem p befindet sich ein Bild, welches links gefloatet ist. Es wird nicht gecleart, also rutscht auch die nächste Ueberschrift rechts neben das Bild. Die Ueberschriften haben alle einen margin nach links.

Wie groß ist der?
Er sollte so bemessen sein, dass er der Bildbreite plus dem gewünschten Abstand zwischen Bild und Überschrift entspricht.

xxxxxxxxxxxxxxxx yyyyyyy
xxxxgefloatetxxx yyyyyy
xxx150px breitxx yyyyyy
xxxxxxxxxxxxxxxx yyyyyy

Beim element y müsstest du also margin: left von 150px + Abstand zwischen x und y hinterlegen. Dabei auch noch padding, border und margin von x berücksichtigen.

 

[elektrowolf]

Ich hab Firebug und hab das schon verstanden, das der Margin zum Elternelement berechnet wird. Die Frage ist: Wie löse ich das trotzdem? Margin right vom Bild geht nicht, da da auch noch anderer Text daneben ist, der normalen Abstand haben soll.

 

[Efchen]

Naja, wie Du das löst, hat man Dir doch nun schon mehrfach gesagt. Addiere die Breite und Abstände des Bildes zu dem, was Du als Abstand zwischen dem Bild und der Überschrift haben willst. Weil, Dein margin der Überschrift zählt halt vom linken Rand der Überschrift und das ist unterhalb des Images. Bei Firebug siehst Du es ja.

 

[elektrowolf]

Na, in das Design soll später vll. mal dynamischer Content rein, und da kann man nicht vorraussehen, ob neben der Ueberschrift ein gefloatetes Element ist oder nicht..

 

[Efchen]

Was passiert denn eigentlich, wenn Du ein padding setzt? Berechnet der das auch ab dem Rand des Block-Elements, oder ab dem Content, also ab dem Image? Weil, der Content des Elements liegt ja auch nicht unterhalb des Images, sondern daneben.

Nein...das geht wohl auch nicht.

 

[elektrowolf]

Ja, hatte ich ja auch schon probiert..