Float & Positionierung durch negatives Margin: Überlappung!

[Lu]

Hallo Forum,

ich möchte Überschriften & Grafiken links neben den Text platzieren. Dazu habe ich dem Text die Breite width:50% gegeben und Überschriften und Bilder mit margin-left:-100% umpositioniert.

Das funktioniert soweit. Folgt dicht hinter einer großen Grafik eine Überschrift, so positioniert der IE7 diese übereinander. Bei Firefox erscheinen die beiden Blockelemente wie gewünscht untereinander.

Ist es möglich die Positionierung im Internet Explorer zu ändern?

Ich habe dazu eine Beispielseite erstellt:
Demo zu Floatverhalten (Website von Ludwig Kannicht)

Herzlichen Dank!
lu

[bleicher]

Grüße,

Hallo Forum,

sag bescheid wenn die KI des forums dir antwortet^^

ich möchte Überschriften & Grafiken links neben den Text platzieren. Dazu habe ich dem Text die Breite width:50% gegeben und Überschriften und Bilder mit margin-left:-100% umpositioniert.

dürfte ich fragen warum du derart um die ecke positionieren musst/willst? evtl gibt es eine alterntivlösung?

MFG
bleicher

[Lu]

dürfte ich fragen warum du derart um die ecke
positionieren musst/willst? evtl gibt es eine alterntivlösung?

Nun, ich hätte gerne Bilder und Überschriften neben statt in dem Text. Eine Art Marginal-Spalte. Da ich den Quelltext semantisch sinnvoll halten will, sollen Bilder und Überschriften nicht in einer extra Zeile  oder gar mit Tabelle eingebunden werden.

  
  <img src="demo.jpg" />  
  <h2>Lorem Ipsum</h2>  
  <p>Lorem Ipsum Text...</p>  

Mit dem Firefox klappt das ja gut - geht es auch für den IE? Mir fällt keine andere Lösung ein und komme nicht weiter, aber ich freue mich natürlich über sinnvolle Anregungen!

[bleicher]

Grüße,
liefert float nicht de gewünschten ergebnisse?
MFG
bleicher

[Lu]

liefert float nicht de gewünschten ergebnisse?

Float, so wie ich es verwendet habe, erreicht nur im FF das erwünsche Ergebnis, im IE nicht. Dort überlappen sich die Elemente, sobald ich sie mit margin-left:-100% verschiebe.

Firefox: Die Elemente werden untereinander angeordnet.
.

Internetexplorer: Die Elemente überlappen sich

Wie lässt sich diese Überlappung umgehen? Ich habe eine Demo mit
Quellcode des Design online gestellt.

Danke, Lu

[Ingo Turski]

Hi,

Float, so wie ich es verwendet habe, erreicht nur im FF das erwünsche Ergebnis, im IE nicht. Dort überlappen sich die Elemente, sobald ich sie mit margin-left:-100% verschiebe.

und warum tust Du das? Negative margins sind oft problematisch und selten notwendig.
Teile Deine Seite zu je 50% Breite auf und nutze dafür ein DIV zur Gruppierung der Elemente.

freundliche Grüße
Ingo

[Lu]

Teile Deine Seite zu je 50% Breite auf und nutze
dafür ein DIV zur Gruppierung der Elemente.
Ingo

Ein Bild geht natürlich mit zwei Spalten oder einem float:right Div für den Text. Aber ich will ja auch die Zwischenüberschriften links neben statt in dem Text haben - das macht dann mit zwei Spalten keinen Sinn mehr.

Ich habe nun eine andere Lösung, die besser als jene mit negativen margins funktioniert (Danke, Ingo und bleicher): Der Text muss immer in <p> Blöcken stehen, die dann ein padding-left von 50% haben. Überschriften & Bilder sind float:left.

Damit scheint es besser zu gehen. Falls ich zu einer guten Lösung komme, werde ich sie hier posten.

Ein weiteres Problem war, dass der IE bei max-width seltsam reagiert hat. Er scheint diesen Bereich dann immer freizuhalten, auch wenn die Breite geringer ist.

Danke für die Hilfen, ich melde mich zurück, wenn ich weiter bin!

[bleicher]

Grüße,
ich scheitere imem rnoch an deinem problem - floate doch den div mit dem text rechts, textalign links un dbilder links - soltle es tun - wozu die ganze marginspielerei?
MFG
bleicher