[HTML/CSS] Bilder in Text einbetten

[Loopo]

Wie man hier erkennt, überlappen sich die Bilder im Text horizontal, wenn zu viel Platz ist (also der Browser breiter als eine bestimmte Auflösung ist). Wie kann ich das vermeiden? Die Bilder sollten immer untereinander sein.

Ich habe schon probiert, Text und Bild in <p></p> zusammenfassen, das hilft aber auch nicht.

 

[Gobble-G]

Ich habe schon probiert, Text und Bild in <p></p> zusammenfassen, das hilft aber auch nicht.

Hm, sollte es aber. Hast du das float durch clear zwischen den beiden <p>-Blöcken aufgehoben?

 

[krizzelfix]

Da du hast die bilder mit align="left" gefloatet.

Musst wie Gobble-G schon sagte zwischen die Bilder ein <br style="clear: both;" /> schreiben.

 

[Adagio]

Du musst den Bildern nur ein clear: left oder ggfs clear: both zuweisen, wenn du nicht willst, dass sie bei zu viel Platz ineinander verschacheln.

Die anderen beiden Tips sind nett gemeint, bringen hier aber nix als unnötigen Balastcode

 

[Zweipunktnull]

Oder wie du's eh schon gemacht hast den Text und die Bilder in p's zusammenfassen und denen dann die style-Eigenschaft overflow: hidden geben. Damit es auch im IE5&6 funktioniert zusätzlich auch noch die Eigenschaft height: 1%.

Na ja, wayne, du siehst, es gibt viele Lösungen. Ich würde allerdings meine vorziehen, da die anderen gewisse Risiken beinhalten. Zum Beispiel funktioniert Adagio's Lösung nur korrekt, wenn du auf der Seite nicht schon an einer anderen Stelle irgendeinen float-Wert zugewiesen hast. Ist dies der Fall, werden dir die Bilder am Boden der Website kleben. Meine Lösung dürfte dagegen eigentlich keine Nebenwirkungen haben, unabhängig davon, wie der Rest der Seite programmiert wurde. (Jetzt ist mal wieder der Zeitpunkt gekommen, an dem sich jeder Möchtegern-C++-Freak darüber aufregen darf, dass ich soeben im Zusammenhang von HTML von "programmieren" gesprochen habe, aber mir ist grad kein anderes Verb eingefallen. )