• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Bild neben Text auf entsprechender Höhe anzeigen

themrdomi

Mitglied
Guten Tag zusammen,
ich habe eine Webseite, auf welcher informative Inhalte dargestellt werden, ein kleines bisschen wie Wikipedia nur eben für ein bestimmtes Thema.
Der Text ist in einem DIV in der Mitte, welches 60% breit ist, nun möchte ich Grafiken rechts neben dem Text einblenden, diese sollten natürlich auf der entsprechenden Höhe sein, sodass man nicht neben einer Überschrift eine Grafik findet, dessen Thema erst weiter unten behandelt wird.
Leider ändert sich ja der Abstand zwischen den Bildern, jenachdem wie groß die Schrift ist oder wie breit der Bildschirm ist, da sich dann ja die Schrift breiter auf den Bildschirm verteilen kann und somit weniger Zeilenumbrüche vorhanden sind.
Hier ein Beispiel, wie ich mir das ganze vorstelle:
grafik.png
Kann mir vielleicht jemand weiterhelfen, wie ich die Bilder rechts auf dem Streifen neben dem Inhalt platzieren kann?
Mein Ansatz war ein 20% breites DIV neben dem 60% breiten DIV, in dem der Inhalt ist, jedoch habe ich ja dann keine Möglichkeit, zu bestimmen auf welcher Höhe die Bilder platziert werden, ich könnte sie nur einfach übereinander stapeln

Ich hoffe, dass man verstehen kann, was ich meine und freue mich auf hilfreiche Antworten.

Gruß,
Dominik
 
Werbung:
Hallo

Mit deinem Ansatz gibt es keine Möglichkeit, die Bilder bei den Überschriften und Texten zu halten.

Lösung: Überschrift, Text und Bild kommen jeweils zusammen in einen Container. Die Anordnung innerhalb der Container je nach Fensterbreite geschieht dann mittels Flexbox.

Gruss

MrMurphy
 
Wow, das ging ja schnell.
Danke für eure Antworten, das hilft mir weiter.
Schade, ich dachte ich könnte den gesamten Text in einen großen DIV packen.
Aber so wird es sicher auch funktionieren.

Gruß,
Dominik
 
Werbung:
Hallo

Anders gibt es halt keine Möglichkeit das Bild mit angemessenem Aufwand auf unterschiedliche Texthöhen reagieren zu lassen.

Aber das hat nichts mit dem Layout zu tun. Das von dir gewünschte Layout lässt sich trotdem verwirklichen. Ich habe mal ein Beispiel für breite Fenster erstellt:

http://boratb.bplaced.net/index098.html

Gruss

MrMurphy
 
Hallo

Ich habe das Beispiel mal erweitert. Um zu zeigen das die wechselseitige Abhängigkeit von Text und Bild in beide Richtungen funktioniert habe ich zum einen den Text zum Adler erweitert und zum anderen den Kolibri mit einem kurzen Text hinzugefügt. Die Einträge lassen sich also problemlos ohne Anpassung des Layouts erweitern und neue hinzufügen.

Text und das zugehörige Bild sind also immer auf einer Höhe.

Gruss

MrMurphy
 
Werbung:
Was wäre denn der beste Ansatz, um dein Beispiel so zu erweitern, dass es auch einen Abschnitt mit Text, jedoch ohne Bild geben kann? Wenn ich aktuell in dem article das figure lösche, breitet sich der Text auf die gesamte Breite aus und somit stimmt auch der Rand nicht mehr...

Gruß,
Dominik
 
Hallo

Ich würde nur den Inhalt des figure-Elements löschen, nicht das figure-Element selbst.

Ich habe mein Beispiel mal um einen unsichtbaren Vogel erweitert von dem des natürlich kein Bild geben kann.

Gruss

MrMurphy
 
Werbung:
Hallo

und das hat wegen min-height: 1px immer eine definierte Breite, korrekt?

Nein. Die Breite wird durch Flexbox bestimmt.

Das min-height: 1px ist eine Angabe, weil einige ältere Browser Bilder ohne diese Angabe mit Flexbox nicht richtig skalieren. Ansonsten hat es meiner Kenntnis nach keine Auswirkungen.

Gruss

MrMurphy
 
Werbung:
Zurück
Oben