Hallo allerseits,

ich such' mich schon den ganzen Tag tot nach einer Lösung für folgendes Problem, also bitte nicht gleich draufhauen, falls ich inzwischen den Wald vor lauter Bäumen nicht mehr sehe:

Ich habe mehrere Bilder, die ich im Textbereich einbauen möchte, mal links-, mal rechtsbündig, jeweils mit kurzen erklärenden Texten.
Den Textfluss habe ich schön vorschriftsmäßig formatiert, klappt auch soweit alles. Allerdings sind die Texte zum Teil recht kurz, kürzer als die Bildhöhe, und dann rutscht das nächste Bild schon soweit hoch, dass der Text nicht mehr beim richtigen Bild sitzt oder unglücklich zwischen zwei Bildern hängt.

Behelfsweise kann ich da natürlich einen Haufen Leerzeilen bzw. Zeilenumbrüche einfügen, bis das Bild bzw. der Text wieder auf der richtigen Höhe ist. Aber ich habe so den leisen Verdacht, dass das nicht die offizielle Lösung ist und möglicherweise auf unterschiedlichen Browsern/ Bildschirmen auch unterschiedlich ausfallen könnte.

Mit einer Linie ( <hr> ) habe ich es auch schon versucht, aber das bringt anscheinend überhaupt gar nichts, weil die Linie hinter den Bildern verschwindet und sie nicht voneinander abgrenzt.

Eine Tabelle wäre sicherlich auch nicht das Richtige, oder?

Was wäre denn hier die eleganteste und standardkonforme Lösung?

Vielen Dank schonmal vorab und Gruß,
bougi81

.

Die Frage ist jetzt. Ist das Ganze einmalig, wird der Text oft geändert?

Wenn das Ganze auf statischer Basis passiert, reicht denke ich pro Bild/Text-Gefüge eine Div-Box in der alles angeordnet ist.

Weiß aber grad nicht inwieweit das von deinem Vorhaben abweicht...

Gruß...

Hallo Zeji,
vielen Dank für Deine Antwort!

Das Ganze wird, wenn es einmal fertig ist, tatsächlich einigermaßen statisch sein.
Ich bin im Moment sowieso dabei, die gesamte Website so zu umzubauen, dass ich die notwendigen Aktualisierungen auf einige wenige Seiten beschränken kann. Und die bebilderten Seiten sind eigentlich eher so "Bilderbuch" und bleiben dauerhaft stehen.

Gut, also Div-Box - das gucke ich mir jetzt mal an! Vielen Dank für den Tipp!

Gruß,
bougi81

Edit: Eben nochmal streichen... das war wohl Murks, und ich probiere gerade nochmal was anderes...

So, nächster Anlauf - auch gescheitert.
Egal was ich mache, das Bild ragt unten aus der Box raus bzw. kümmert sich überhaupt gar nicht um die Box.

Habe ich das mit div box nun überhaupt richtig verstanden? Mein Code sieht im Moment so aus:
Außerdem bin ich bei meiner Suche nun noch auf die Möglichkeit mit "clearing" gekommen. Komme ich damit evtl. weiter? Ich habe damit jetzt auch schon Verschiedenes nach den Tutorials etc. versucht, aber genützt hat auch noch nichts.

So, nun aber erst mal guats Nächtle für heute!
Gruß,
bougi81

Ohne komplette HTML- und CSS-Code können wir Dir schlecht helfen

Vielleicht eine begründete Vermutung: Wenn Du das img floatest, nimmst Du es aus dem normalen Elementefluss heraus, sprich, die Wechselwirkung zwischen den HTML-Elementen ist verändert und beschränkt. Daher kann es "raushängen". Die Lösung wäre z. B. diesen beiden Elementen (umliegendes div und img) die Chance zu geben, miteinander in gewünschter Weise zu interagieren.

Wie das geht, kannst Du hier nachlesen:

12. Der Flow und Positionieren mit position - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

So wie es aussieht, solltest Du auch das Online-Buch komplett durchlesen.
Lohnt sich. Oder der Kauf der Werke 1 + 2. (Nein, ich bin nicht der Autor und bekomme auch keine Provision o.ä. )

__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Vielen Dank für Deine Antwort!
Kannst Du das bitte nochmal gaaanz langsam zum Mitschreiben sagen bzw. erklären?

Das "Little Boxes" ist eins von denen, die ich schon vorwärts und rückwärts und systematisch durcharbeitend und per Suchfunktion durchforstet habe.

Am verheißungsvollsten schien mir jetzt gerade eine Lösung mit der Funktion "clear", aber ich kriege es irgendwie nicht hin, die funktionierend in mein Stylesheet einzubauen. Also dass sowas wie hier dabei herauskommt.

Gruß,
bougi81

Ich hab Dir natürlich den falschen Link gegeben

14 Containing Floats: gefloatete Elemente einschließen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

Zitat daraus:
Wenn Du das Ding durchgearbeitet hättest - naja... in diesem Kapitel findest Du eine mögliche Lösung.

__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte

Danke für den Link...
Höre ich da einen leisen Zweifel heraus?

Ich habe genau dieses Kapitel nicht einmal durchgearbeitet, sondern inzwischen bestimmt fünfmal.
Es enthält sogar nicht nur einen, sondern vier mögliche Lösungswege. Leider funktioniert von denen bislang bei mir nicht ein einziger.

Aber ich war dadurch zumindest auf diese Schiene mit dem "clear" gekommen - kriege sie nur halt nicht zum Laufen.

Dann poste einen Link, wo wir deinen Testcase zerreißen dürfen oder wenigstens eine sofort lauffähige HTML-Datei mit inkludiertem CSS.

Clearing nützt Dir nur was, wenn Du noch einem Element direkt am Ende vor dem Schließen des div ein "clear:left" ( oder right) mitgibst. Oder eben die easy-clearing-Methode verwendest.

Je nach deinem sonstigen Konstrukt deiner Seite ( harhar) kann die eine oder andere Möglichkeit zu weiteren Problemen führen (float nearly everything)... das kommt auf deine bisherige Konstruktion an.

__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte