2 Bilder nebeneinander - bitte um Hilfe

[Llywellyn]

Hallo liebe Community,

ich würde bitte eure Hilfe benötigen.


Mein Vorhaben:
Ich möchte gerne 2 Bilder, mit darunter etwas Text, nebeneinander darstellen.
Diese sollten dabei immer - bei jeweils 50% - über die jeweils verfügbare Breite skalieren.
(Im Grunde so, wie wenn man unter der Navigation ein Bild mit einer maximalen Höhe über die volle Breite skalieren lässt, nur dass sich hier nun 2 Bilder nebeneinander befinden sollen.)
Erst ab einem bestimmten Punkt sollen die 2 Spalten (Bild + Text) untereinander verschoben werden.

Meine Herangehensweise war nun folgende:

HTML (Schnipsel):

<div class="linke_spalte">
<div class="ce_image block" id="bild_1">
<div class="ce_text block" id="text_1">

<div class="rechte_spalte">
<div class="ce_image block" id="bild_2">
<div class="ce_text block" id="text_2">


CSS:

#bild_1,
#bild_2 {
max-width:100%;
max-height:400px;
margin:0;
padding:0;
}


#bild_1 img,
#bild_2 img {
width:100%;
height:100%;
}


#management .linke_spalte,
#management .rechte_spalte {
max-width:50%;
display:inline-block;
margin:0;
padding:0;


Das Problem was hier entsteht, ist dass sobald ich irgendwie versuche die 2 Spalten in die selbe Zeile zu bringen, jegliche vorhergehende Formatierung durch CSS verloren zu gehen scheint...

Ich bin leider ein kompletter Anfänger und baue gerade meine erste Website.
Vielleicht kann mir bitte jemand etwas weiterhelfen und mir sagen was ich falsch mache?

Vielen lieben Dank im Voraus!!!

LG

[Dee]

Hast du einen Link wo man sich dies fix anschauen kann?

[Llywellyn]

Hast du einen Link wo man sich dies fix anschauen kann?

nein leider... ist alles nur lokal...

[planepix]

Ggf.ist es hier nicht vollständig abgebildet, aber der HTML-Code müsse so aussehen (Divs geschlossen):

<div class="linke_spalte">
<div class="ce_image block" id="bild_1"></div>
<div class="ce_text block" id="text_1"></div>
</div>

<div class="rechte_spalte">
<div class="ce_image block" id="bild_2"></div>
<div class="ce_text block" id="text_2"></div>
</div>

Anderer Ansatz:
2 Inhaltselemente Text, dort die Texte rein und das dazu gehörige Bild.
Dann die beiden CSS-Klassen für die beiden Inhaltselemente vergeben.

#management .linke_spalte,
#management .rechte_spalte {
max-width:50%;
display:inline-block;
margin:0;
padding:0;
}

Dann hängt es noch davon ab, ob es andere Außen- und Innenabstände gibt, damit das mit den 50% klappt.

[Dee]

Dann hängt es noch davon ab, ob es andere Außen- und Innenabstände gibt, damit das mit den 50% klappt.

Versuch es doch mal mit nur 45% und dann merkst du schnell ob da noch margins oder paddings vorhanden sind...

[mlweb]

Habe so etwas für ein Projekt gerade realisiert, kann es aber noch nicht zeigen - keine Freigabe vom Kunden (Wenn Interesse besteht, kann ich den Link per PN rausgeben).
Verwendet habe ich eine Galerie und ein Textelement innerhalb eines Artikels. Die Galerieelemente als Flexboxen gestylt und für meinen Anwendungsfall für ce_gallery eine feste Breite vergeben und gefloatet.
Das Textelement fließt damit schön um die Galerie. Wenn das nicht gewünscht ist, kann man auch hier Flexboxen verwendet.
Das ganze funktioniert mit einer beliebigen Anzahl von Bildern und ist responsiv.

Nachtrag: Hier habe ich mir ein ganz anderes Layout vorgestellt - nämlich zwei Bilder mit einem Text.

[Llywellyn]

Vorab Danke vielmals für die schnellen Rückmeldungen!


s1.PNG

auf diesem Screenshot verhalten sich die beiden Grafiken wie gewollt. Mit einer max Breite bei den Spalten von 100%, kann ich diese über 2 Monitore vergrößern und die Bilder skalieren mit.

Ändere ich allerdings die max Breite der beiden Spalten von 100% auf 50% und füge display:inline-block hinzu...

s3.PNG

...dann skalieren die beiden Bilder ab einem bestimmten Punkt nicht mehr mit (und ebenso ist der Umbruchpunkt - rechte Spalte unter linke Spalte - beim Verkleinern, viel zu bald dran...)
Beim floaten verhält es sich genau gleich, nur ohne dem kleinen Abstand zwischen den Bildern.

s2.PNG

^ Viewportsize ca. 2120px


Die Bilder skalieren dabei bis zu einer Größe von 951x395px. - Größe vom Bild is 960x400px, danach bleiben sie sozusagen stehen.
Im Inhaltselement "Bild" habe ich keine angaben zur Größe gemacht, da ich diese mit CSS festgelegt habe.

[Dee]

hmmm.. ist noch schwer zu sagen so mit Bildern...

So auf die schnelle würde ich es so versuchen:

#management
width:100%;
max-height:400px;
position:relative;
display:block;
margin:0;
padding:0;

.linke_spalte, .rechte_spalte
width:50%;
float:left;
display:inline-block;
margin:0;
padding:0;

.linke_spalte img, .rechte_spalte img
width:100%;
margin:0;
padding:0;

Habe es aber nicht getestet...

[Llywellyn]

tausendmal DANKE!

hat funktioniert!!!