Bilderbox mit Flex

  • Hallo zusammen,

    ich bräuchte mal ein Bisschen Hilfe. Ich habe eine Imagebox (imgBX) gebaut, in der nebeneinander 3 Karten (card) angeordnet sein sollen und dann ein Umbruch in die nächste Zeile erfolgen soll. Dort wieder 3 Karten usw. Bei voller Bildschirmbreite sollen box1 und details nebeneinander angeordnet sein.


    Bei Bildschirmbreite 600px und kleiner sind die Karten vertikal angeordnet und die box1 steht über details.


    Meinen bisheriger Versuch habe ich auf Codepen gestellt. Kann mir jemand weiter helfen? Danke!


    https://codepen.io/Lupus_III/project/editor/AVmzry

  • Merkwürdig, da liegt so ein Popup über dem Codepen: "Email needs verification"?

    Ich habe Codepen gestern eingerichtet und bin da noch ganz am Anfang. Anscheinend könnt ihr meinen Code nicht sehen. Was mache ich falsch? die Verification habe ich ausgeführt.

  • ich glaube das liegt daran das er ein new projekt gemacht hat und kein pen.? Kann das sein ? Ist irgendwie ungewohnt ,

    Aber Lupus_III meinst du das so ? https://codepen.io/basti1012/pen/NVgjrw?editors=1100

    Weil ich schecke deine beschreibung gerade nicht so richtig

    Hallo basti1012, ja so habe ich das gemeint. Danke! Es ist ja nur eine Arbeitsdatei, um Flex zu üben. Mit codepen muss ich mich noch ein Wenig auseinandersetzen, siehe #5. Hast du eine paar Tipps für mich?

  • Auch wenn Lupus sie als "Cards" bezeichnet, werbe ich immer dafür, für diesen Zweck, ein Bild mit einer Beschreibung dazu, das figure-Tag zu verwenden.

    Danke Sempervivum, das werde ich künftig tun. Ist bestimmt wegen der Semantik und Google?

  • Ja, wegen der Semantik. Google ist ein gutes Beispiel, weil es dann eine präzise Zuordnung zwischen Text und Bild gibt. Wenn ich nach Bildern suche, stehe ich häufig vor dem Problem, dass ein gefundenes Bild nicht dem Suchbegriff entspricht und ich erwarte, dass das figure-Tag solche Fehler ausschließt.

  • Hallo basti1012,.

    Mit codepen muss ich mich noch ein Wenig auseinandersetzen, siehe #5. Hast du eine paar Tipps für mich?

    Wenn du oben rechts in der Ecke auf das Bild klickst ( Avater ) , kommt ein Mini Menü wo new Pen steht. Das solltest du nehmen für solche kleine Projekte. Man konnte deinen Code schon sehen , doch ist es einfach ungewohnt und man hat nicht den ganzen Code ( html,css,js ) auf einmal in Blick. Deswegen ist für solche sachen besser wen du auf new Pen klickst. Die anderen sachen wie new Project , new Post und new Collection ist für diese zwecke ehr ungeeignet