Hallo
ZitatIst es OK, wenn ich nach vermeintlich erfolgreicher Umsetzung eines weiteren Tipps wieder nachfrage, ob das so korrekt ist und wie es dann weitergehen kann?
Klar.
Zitatder im HTML als myTextColumn und myFooter bezeichnete Text sollen bei ausreichender Auflösung / Bildschirmbreite nicht über und unter den Bildern stehen sondern beides rechts daneben.
Wie schon geschrieben wirst du ein paar Abstriche an deinen Layoutwünschen machen müssen. Das kommt aber später.
Die Anordnung erscheint mir sinnvoll und ist mit Flexbox umsetzbar. Wie du aber wohl schon vermutest passt die Struktur deiner Seite noch nicht.
Momentan hast du folgenden Aufbau
body
#myHead
#myNavLeft
#myNavRight
#myTextColumn
#myImgColumn
.imgWrap
.imgWrap
.imgWrap
.imgWrap
.imgWrap
.imgWrap
#myFooter
Alles anzeigen
Mit Flexbox können jedoch "nur" Container innerhalb eines übergeordneten Containers angeordnet werden. Für deine Wünsche benötigst du also folgende Struktur
body
#myHead
#myNavLeft
#myNavRight
#myCardWrap
#myTextColumn
.imgWrap
.imgWrap
.imgWrap
.imgWrap
.imgWrap
.imgWrap
#myFooter
Alles anzeigen
Nebenbei: Wobei id nur verwendet werden sollten, wenn sie sachlich erforderlich sind. Schöner und praxisgerechter wäre demnach
body
.myHead
.myNavLeft
.myNavRight
.myCardWrap
.myTextColumn
.imgWrap
.imgWrap
.imgWrap
.imgWrap
.imgWrap
.imgWrap
.myFooter
Alles anzeigen
Weiter zur Lösung:
#myCardWrap wird dann zum Flex-Container und #myTextColumn, .imgWrap sowie #myFooter zu Flex-Items.
Ich habe mal eine Testseite erstellt. Du kannst ja mal schauen ob das Verhalten deinen Vorstellungen entspricht. Nicht das wir die ganze Zeit aneinander vorbei schreiben:
Wobei ich darauf geachtet habe die Regeln von HTML5/CSS3 einzuhalten, auf besucherfreundlichkeit geachtet habe und die aktuelle und zukünftige Entwicklung berücksichtigt habe. hover-Effekte zum Beispiel machen in Zeiten von um sich greifenden Touchscreens nur noch wenig Sinn.
Gruss
MrMurphy