Feedback gewünscht Überlagerung einzelner Elemente in einem <div>

[Misanthrop]

Ich komme mit meinem kleine Projekt nicht voran...
HIer also dir Startseite die mit Links zu den einzelnen Terminen (Unterseiten) führt.
Derjenige wird erahnen wessen Lehr - Beispielprojekt ich hier modifiziert habe.
Dennoch stoße ich auf Hürden, welche ich einfach nicht kapieren will:
A)
Die <article class="cards"> hat also einzelne dieser <section class="card">...
soweit so gut....
nun sind in dem einzelnen <section class="card"> links zwei img`s übereinander
und: rechts ein <div> welches einen text als auch einen link darunter, mit flex-direction: column;
angeordnet beinhaltet.
Da bin ich mir nicht sicher ob man das so machen kann....
Mein Problem war, das sich ja kein <a> - tag innerhalb von <dl> befinden darf.
Also machte ich es so.
Da hätte ich gern von Euch Anregungen... ob so machbar oder nicht und wenn nicht dann WIE?
Jetzt geht es mir darum, wenn man das Bildschirmfenster staucht dann überlappen sich irgendwann
das IMG links mit dem Erläuterungstext rechts.
Wie bringe ich nun das IMG dazu genau die Breite die es hat zu behalten
(alle IMG`s werde ich 360px breit machen NUR die Höhe variert manchmal!)
und das der Text flexibel bleibt, das er umbricht wenn <dl> schmaler wird?
Oder aber auch das IMG schrumpft proportional mit, je nachdem was einfacher wird!
P.S. Kan man mit flex-basis die Breiten vom IMG und die des <dl> (also des Textes rechts)
beeinflussen, wenn ja, wie mache ich das?
B)
Habe ich ein Höhenproblem: Ganz unten im blauen <section class="card" sieht man es:
Der Link ragt nach unten heraus.
Wie kann man DAS beheben?

Hier nun der Link: LINK GELÖSCHT

Fragen über Fragen... ich hoffe jemand hier weiß die Antworten!

P.P.S. Bitte nicht über die Farben und die fehlenden Abstände etc. aufregen.... das wollte ich später
noch erledigen.

Gruss der Misanthrop

 

[Aaron3219]

Frage 1 (flex-direction: column):
Klar man kann das so machen. Du kannst sogar das flex-direction wegnehmen, da du ja deine Boxen in 2 hälften Unterteilt hast.


Frage 2 (Bilder sollen feste Größe haben, Text soll flexibel bleiben:
Nimm erstmal das max-width und das min-width aus deinen img und figures.
Außerdem hast du auch '* {min-width: 0}' gesetzt. Das muss auch (zumindest bei den figures und Bildern) auf standard gesetzt werden (initial). Schwupp und alles sieht normal aus.
Jedoch muss ab eine Bildschirmbreite von 1180px nun eine neu-anordnung stattfinden, also am besten mit proportionalen größen, da der Text nicht weiter zusammenschrumpfen kann und manches somit in die nächste Reihe rutscht.



Frage 3 (Höhenproblem):
Nein das liegt an dem padding: 0 0.7rem 0.5rem 0.7rem; wenn du es am bottom entfernst, wirst du einen Unterschied bemerken.

 

[Aaron3219]

Ach ja entferne auch noch ".card dl {max-width: 21rem}" Ansonten ist der Text nicht komplett responsive sondern sowas passiert.

 

[Misanthrop]

PRIMA, Danke! Werde ich nachher mal ausprobieren. :) Ob es funktioniert.... ;)

Aber eine kurze Zwischenfrage: Wäre es komplizierter wenn das IMG auch flexibel bleibt?
Das es also mit - (herunter) - scaliert wenn das Fenster gestaucht wird?
Momentan macht es das zwischen bestimmten Break-Points, aber kurz nur!

Danke Dir!

Grüsse der Misanthrop

 

[Misanthrop]

Mom, wie ist DAS gemeint?
"Jedoch muss ab eine Bildschirmbreite von 1180px nun eine neu-anordnung stattfinden, also am besten mit proportionalen größen, da der Text nicht weiter zusammenschrumpfen kann und manches somit in die nächste Reihe rutscht."
Also : flex-basis: xx em , xx em;
oder % benutzen oder vw?

2. IMG werden doch nur mit:
img { width: 100%; height: auto }
resposive skaliert ? Oder?

Grüsse der Misanthrop

 

[Aaron3219]

1.
Ich meinte damit, dass ein neues @media screen angelegt werden muss, da einer der Container in die nächste Reihe rutscht.

2.
Nein Bilder werden immer automatisch skaliert, solange du nicht width und height gleichzeitig als feste größe angibst (width: 50%; height: 150px; würde nicht funktionieren). Also gebe deine Bilder einfach in width ODER height an.

3.
Nein ich glaube es wäre nicht komplizierter. Muss ich nachher mal ausprobieren, bin gerade am handy. Aber probier mal selber herum. Das Bild und die figure brauchen dann eine width in %, vmin, vmax oder vw, bei height dann % oder vH, vmax, vmin, etc.

 

[MrMurphy]

Hallo

nun sind in dem einzelnen <section class="card"> links zwei img`s übereinander
und: rechts ein <div> welches einen text als auch einen link darunter, mit flex-direction: column;
angeordnet beinhaltet.

flex-direction: column; funktioniert hier nicht, da der übergeordnete Container kein display: flex; enthält. Bei dem aktuellen Quelltext sehe ich auch keinen Grund an dieser Stelle Flexbox zu verwenden.

Mein Problem war, das sich ja kein <a> - tag innerhalb von <dl> befinden darf.

Ähm - richtig. Das a-Element darf kein Kindelement vom dl-Element sein. Mit Kindelement ist aber ein direktes Kind-Element gemeint. Innerhalb von dt- oder dd-Elementen ist das a-Element aber zulässig und in deinem Beispiel in dd-Elementen auch sinnvoll.

Wie bringe ich nun das IMG dazu genau die Breite die es hat zu behalten
(alle IMG`s werde ich 360px breit machen NUR die Höhe variert manchmal!)
und das der Text flexibel bleibt, das er umbricht wenn <dl> schmaler wird?
Oder aber auch das IMG schrumpft proportional mit, je nachdem was einfacher wird!

Dazu verwende ich ein paar grundsätzliche CSS-Angaben, die du leider mit anderem CSS überschrieben und damit außer Kraft gesetzt hast:

   /*Grafiken*/
   @media all {
      figure {
         min-width: 0;
         max-width: 100%;
         margin: 0rem;
      }
      img {
         min-width: 0;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }

Wobei ich für min-widht aktuell 1px als Vorgabe verwende. Die min-width-Angabe ist wichtig um Browserprobleme mit Flexbox zu vermeiden.

P.S. Kan man mit flex-basis die Breiten vom IMG und die des <dl> (also des Textes rechts) beeinflussen

Ja. Wobei wegen Browserproblemen Flexbox nie direkt auf img-Elemente angewandt werden sollte. Auch darum umgebe ich img-Elemente immer mit einem figure-Element.

Habe ich ein Höhenproblem: Ganz unten im blauen <section class="card" sieht man es:
Der Link ragt nach unten heraus.

Das a-Element ist von Haus aus ein Inline-Element. Und die Zeilen von Inline-Elementen überschneiden sich meistens. Da die Webseitenersteller dies aber nicht sehen glauben sie es nicht. Ist aber so.

Zum einen kannst du den a-Elementen die Anweisung display: block; auf den Weg geben. Hier aber nur innerhalb von .cards. Das ist aber nicht notwendig.

Bei den Cards erledigt sich das Problem aber schon alleine wenn das a-Element wie vorgeschlagen innerhalb eines dd-Elements steht.

IMG werden doch nur mit:
img { width: 100%; height: auto }
resposive skaliert ? Oder?

Nein. Genau damit überschreibst du die Angaben, die img-Elemente responsive machen.

height: auto; ist ein Aberglaube, der sich leider fest hält.

Und die Bilder sollen ja grade nicht stur 100% breit sein.

"Jedoch muss ab eine Bildschirmbreite von 1180px nun eine neu-anordnung stattfinden, also am besten mit proportionalen größen, da der Text nicht weiter zusammenschrumpfen kann und manches somit in die nächste Reihe rutscht."
Also : flex-basis: xx em , xx em;
oder % benutzen oder vw?

Ich verstehe zwar nicht was du meinst. Müssen tut überhaupt nichts. Die Gestaltung richtet sich nach dem Inhalt, und zwar nur nach dem Inhalt, nicht nach irgendwelchen Geisterzahlen.

Jetzt hole ich erst mal Luft.

Gruss

MrMurphy

 

[MrMurphy]

Hallo

Zunächst zum HTML-Quelltext.

Du würdest die Seite benutzerfreundlicher machen und dir die Arbeit erleichtern wenn du nicht so künstlerisch, sondern strukturierter vorgehen würdest.

Erst mal ein paar Vorbemerkungen.

      <h1>Aktuell <wbr>// tassilo&#x200b;sturm.de&#x200b;/welten-&#x200b;bau.de</h1>
      <p>Neuigkeiten <wbr>// Ausstellungen <wbr>/ Lectures <wbr>/ Workshops</p>

Das wbr-Element bewirkt hier überhaupt nichts. Es ist dafür gedacht Worte / Zeichenketten ohne Leerzeichen vom Browser Zeilenumbrüche ohne Trennzeichen zu ermöglichen. Du hast aber Leerzeichen eingefügt. Funktionieren würde es zum Beispiel so:

Donau<wbr>dampf<wbr>schiff<wbr>fahrts<wbr>kapitäns<wbr>patent

Aber sinnvoll?

<a href="http://www.stadt-muenster.de/ms/tourismus/presse/html/21-schauraum-D.html">weitere Infos zum Schauraum 2017</a>

Das a-Element ist in diesem Fall besser in einem dd-Element aufgehoben, also

<dd>
    <a href="http://www.stadt-muenster.de/ms/tourismus/presse/html/21-schauraum-D.html">weitere Infos zum Schauraum 2017</a>
</dd>

<dd>04. August 2017  19:00 Uhr</dd>

Die zwei Leerzeichen bewirken überhaupt nichts. International für deutschsprachige Webseiten vorgesehen und auch benutzerfreundlicher ist die deutsche Schreibweise mit einem Komma, also

<dd>04. August 2017, 19:00 Uhr</dd>

<dd>Studio 2.6 / Speicher II / Hafenweg 28 / 48155 Münster</dd>

und

<dd>Showroom 4.1, Hafenweg 28</dd>

und

<dd>Atelierhaus Speicher II</dd>
<dd>Hafenweg 28</dd>
<dd>D-48155 Münster</dd>

Egal was für eine Schreibweise du wählst - halte die komplett durch. Die Besucher freuts.

&

Es gibt drei Zeichen, die auch unter UTF-8 maskiert werden sollten um Browserprobleme zu vermeiden. Dazu gehört das &-Zeichen, also besser

&

Macht kaum Arbeit, vermeidet aber spätere Probleme.

Listen sollten eine gleichbleibende Struktur aufweisen, in deinem Fall sehe ich

<dt>Titel</dt>
<dd>Teaser / Kurzbeschreibung</dd>
<dd>Zeit</dd>
<dd>Ort</dd>
<dd>Aktion / was passiert?</dd>
<dd><a href="">weitere Infos</a></dd>

Die solltest du dann konsequent durchhalten.

Zwischen den Infos sollte auch ein Abstand für eine optische Struktur sein. Das aber später mit CSS.

Zeilenumbrüche innerhalb von dt und dd können mit dem br-Element erzeugt werden. Noch flexibler wären span-Elemente, aber ich will nicht zu viel ändern.

Mein Quelltext für die Cards würde demnach so aussehen:

      <article class="cards">

         <section class="card">
            <figure>
               <!-- <img src="2017_07_01_rhea_cardlayout_img_01b.jpg"> -->
               <img src="img/schauraum.jpg" alt="Lange Nacht der Museen und Galerien / Schauraum 2017">
               <!-- <img src="2017_07_01_rhea_cardlayout_img_02b.jpg"> -->
               <img src="img/showroom4_1_artisttalk.jpg" alt="showroom 4.1 artist-talk">
            </figure>
            <div>
               <dl>
                  <dt>Schauraum 2017</dt>
                  <dd>Lange Nacht der Museen und Galerien / Schauraum 2017</dd>
                  <dd>02.09.2017</dd>
                  <dd>Studio 2.6 / Speicher II / Hafenweg 28 / 48155 Münster</dd>
                  <dd>Tassilo versenkt eine Gurke in einem Wasserglas.</dd>
                  <dd><a href="http://www.stadt-muenster.de/ms/tourismus/presse/html/21-schauraum-D.html">weitere Infos zum Schauraum 2017</a></dd>
               </dl>
            </div>
         </section>

         <section class="card">
            <figure>
               <!-- <img src="2017_07_01_rhea_cardlayout_img_01b.jpg"> -->
               <img src="img/showroom4_1_artisttalk.jpg" alt="showroom 4.1 artist-talk">
            </figure>
            <div>
               <dl>
                  <dt>Showroom 4.1 - Artist Talk - <br>Tassilo Sturm</dt>
                  <dd>Einladung zu Vortrag &amp; Diskussion mit <br> Tassilo Sturm</dd>
                  <dd>04. August 2017, 19:00 Uhr</dd>
                  <dd>Showroom 4.1 / Hafenweg 28</dd>
                  <dd>Tassilo spricht über seine realisierten Arbeiten und zeigt u.A. seine architektonischen Beiträge...</dd>
                  <dd><a href="aktuell3.html">weitere Infos</a></dd>
               </dl>
         </div>
         </section>

         <section class="card">
            <figure>
               <!-- <img src="2017_07_01_rhea_cardlayout_img_01b.jpg"> -->
               <img src="img/showroom4_1_artisttalk.jpg" alt="showroom 4.1 artist-talk">
               <!-- <img src="2017_07_01_rhea_cardlayout_img_02b.jpg"> -->
               <img src="img/showroom_4-1_karte.jpg" alt="showroom 4.1 einladungskarte">
            </figure>
            <div>
               <dl>
                  <dt>showroom 4.1</dt>
                  <dd>Teasertext / Kurzübersicht</dd>
                  <dd>10.06. – 01.10.2017<br> Dienstag – Freitags 15 – 19 Uhr<br> Samstags &amp; Sonntags 12 – 18 Uhr</dd>
                  <dd>Atelierhaus Speicher II / Hafenweg 28 / 48155 Münster</dd>
                  <dd>Tassilo spricht ...</dd>
                  <dd><a href="aktuell3.html">weitere Infos</a></dd>
               </dl>
            </div>
         </section>

         <section class="card">
            <figure>
               <!-- <img src="2017_07_01_rhea_cardlayout_img_01b.jpg"> -->
               <img src="img/showroom_4-1_karte.jpg" alt="showroom 4.1 einladungskarte">
               <!-- <img src="2017_07_01_rhea_cardlayout_img_02b.jpg"> -->
               <img src="img/showroom_4-1_karte.jpg" alt="showroom 4.1 einladungskarte">
            </figure>
            <div>
               <dl>
                  <dt>Showroom 4.1 - Artist Talk - Tassilo Sturm</dt>
                  <dd>Einladung zu Vortrag &amp; Diskussion mit Tassilo Sturm</dd>
                  <dd>04. August 2017, 19:00 Uhr</dd>
                  <dd>Showroom 4.1 / Hafenweg 28</dd>
                  <dd>Tassilo spricht über seine realisierten Arbeiten und zeigt u.A. seine architektonischen Beiträge...</dd>
                  <dd><a href="aktuell3.html">weitere Infos</a></dd>
               </dl>
            </div>
         </section>

         <section class="card">
            <figure>
               <!-- <img src="2017_07_01_rhea_cardlayout_img_01b.jpg"> -->
               <img src="img/showroom_4-1_karte.jpg" alt="showroom 4.1 einladungskarte">
            </figure>
            <div>
               <dl>
                  <dt>Showroom 4.1 - <br>Artist Talk - Tassilo Sturm</dt>
                  <dd>Einladung zu Vortrag &amp; Diskussion mit Tassilo Sturm</dd>
                  <dd>04. August 2017, 19:00 Uhr</dd>
                  <dd>Showroom 4.1 / Hafenweg 28</dd>
                  <dd>Tassilo spricht über seine realisierten Arbeiten und zeigt u.A. seine architektonischen Beiträge...</dd>
                  <dd><a href="aktuell3.html">weitere Infos</a></dd>
               </dl>
            </div>
         </section>

      </article>

Also immer ein dt- und fünf dd-Elemente in einer Liste.

Gruss

MrMurphy

 

[MrMurphy]

Hallo

Fehlt noch eine Praxislösung für das CSS.

Zunächst wieder ein paar Vorbemerkungen.

<!-- flex-basis: calc(45% - 2px);  -->

Auch in einer HTML-Datei werden CSS-Angaben CSS-üblich auskommentiert. Natürlich im gesamten CSS, also

/* flex-basis: calc(45% - 2px); */

max-width: 360px;

Damit wird

max-width: 100%;

unnötigerweise überschrieben.

.card dl {
   ...
   max-width: 21rem;
   ...
}

und

.cards {
   width: 210px;
}

Es hat sich bewährt und vermeidet Folgeprobleme maximale Breiten immer einem möglichst übergeordneten Element zuzuweisen. In diesem Fall also .cards oder .content.

Nun zur Praxis.

Zunächst solltest du dein CSS löschen. Nicht, weil es komplett falsch ist, aber um Fehler durch Einzeländerungen zu vermeiden. Damit meine ich nicht alles, sondern von

   /*.cards*/
   @media all {
   }

bis

   /*Spezielle Einstellungen*/
   @media all and (max-width: 290px){
       .cards {
           width: 210px;
       }
   }

Ich gehe von folgenden CSS-Grundangaben aus:

      * {
         /*box-sizing: border-box;*/
         /*min-width: 1px;*/
      }

wird nicht benötigt. Ich habe das aber nur auskommentiert, damit die Angaben zum Testen / Ausprobieren nötigenfalls schnell wiederhergestellt werden können. Das kann also auch direkt gelöscht werden.

      body {
         max-width: 1800px;
         padding: 1rem 0.5rem 2rem 0.5rem;
         margin: 0rem auto 0rem auto;
      }

und

   /*Grafiken*/
   @media all {
      figure {
         min-width: 1px;
         max-width: 100%;
         margin: 0rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
   }

und

   /*Listen dl*/
   @media all {
      dl {
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      dt,
      dd {
      }
      dt {
         font-weight: bold;
         margin: 0rem 0rem 0rem 0rem;
      }
      dd {
         margin: 0rem 0rem 0rem 0rem;
      }
   }

Die width: 1800px; finde ich nach Inaugenscheinnahme passend. Andere Werte können genau so gut sein.

Die anderen Angaben haben sich browserübergreifend bewährt.

Dann würde ich Blöcke mit vielen gleichartigen Angaben extra zusammenfassen. In diesem Fall zum Beispiel die Farben auslagern. Dadurch wird das CSS übersichtlicher und Änderungen / Löschen / Auskommentieren / was auch immer der Hintergrundfarben lassen sich einfacher durchführen.

Damit erhalte ich im CSS die folgenden drei Bereiche:

   /*.cards*/
   @media all {
   }

   /*.card*/
   @media all {
   }

   /*.card - background-color*/
   @media all {
   }

Die Farben sind schnell abgehandelt. Die willst du ja noch ändern, aber grade beim Seitenerstellen sind Hintergrundfarben sinnvoll, da sie das Layout nicht stören.

   /*.card - background-color*/
   @media all {
      .card:nth-of-type(7n+1) {
         background-color: hsla(51, 100%, 50%, 1);
      }
      .card:nth-of-type(7n+2) {
         background-color: hsla(300, 47%, 75%, 1);
      }
      .card:nth-of-type(7n+3) {
         background-color: hsla(55, 67%, 80%, 1);
      }
      .card:nth-of-type(7n+4) {
         background-color: hsla(351, 100%, 86%, 1);
      }
      .card:nth-of-type(7n+5) {
         background-color: #B4C8C6;
      }
      .card:nth-of-type(7n+6) {
         background-color: #B9CB9C;
      }
      .card:nth-of-type(7n+7) {
         background-color: #EBDAAC;
      }
   }

Bei schmalem Bildschirm sollte der Inhalt und grade auch Bilder so breit wie möglich sein. Bis an den Rand stört nicht, ein kleiner Abstand aber auch nicht.

Wegen der Hintergrundfarben sollte seitlich der Bilder etwas zusätzlicher Platz bleiben. Falls die Farben später gelöscht werden können die also noch etwas breiter gemacht werden. Ansonsten dient das CSS für schmale Bildschirme gleichzeitig als Fallback. Dabei wird also auf alle "modernen" CSS-Anweisungen verzichtet, nicht nur Flexbox.

Dazu reicht

   /*.card*/
   @media all {
      .card {
         padding: 0rem 0.5rem 0rem 0.5rem;
         border: 1px solid grey;
         border-radius: 0.3rem;
         margin: 1rem 0rem 0rem 0rem;
      }
      .card img {
         box-shadow: 2px 2px 2px hsla(0, 0%, 0%, 0.5);
         border-radius: 0.3rem;
         margin: 1rem auto 1rem auto;
      }
      .card dt {
         font-family: Questrial, sans-serif;
         font-size: 1.6rem;
      }
      .card dd {
         margin-top: 1rem;
      }
   }

Gleich gehts weiter ...

 

[MrMurphy]

Durch (Erfahrung und) konkretem Ausprobieren bin ich zu dem Ergebnis gekommen, dass es passt, wenn zunächst die einzelnen Cards zweispaltig werden und bei noch breiterem Fenster dann auch zwei Cards nebeneinander stehen.

Dazu verwende ich folgendes CSS:

   @media only screen and (min-width: 800px) {
      .card {
         display: flex;
         justify-content: space-between;
      }
      .card figure {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(40% - 0.5rem - 0rem - 0px - 0rem);
      }
      .card div {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(60% - 0.5rem - 0rem - 0px - 0rem);
      }
   }

Durch den Verzicht auf die Kurzschreibweise werden wieder mal Browserprobleme vermieden. Es hat also seinen Sinn warum ich die Werte einzeln aufführe.

Durch justify-content: space-between; rücken die beiden Container figure und div an den äußeren Rand vom article.

Durch flex-grow: 0; und flex-shrink: 0; gelten die Werte von flex-basis direkt.

Die Angabe in der Form

         flex-basis: calc(40% - 0.5rem - 0rem - 0px - 0rem);

scheint zunächst unübersichtlich, hat sich in der Praxis aber bewährt.

Zunächst kommt die gewünschte Breite, also 40% (beziehungsweise 60%).

Die letzten drei Ziffern sind bei mir immer padding, border, und margin in den von mir bevorzugten Einheiten. In diesem Fall alle mit Null, da weder seitliches padding noch seitliches border noch seitliches margin vergeben wurden. Falls die doch noch hinzugefügt werden müssen nur noch die Zahlen geändert werden.

Damit stehen die beiden Container abstandlos nebeneinander und füllen 100% aus.

Dazwischen stehen immer weitere Abzüge, in diesem Fall 0.5rem.

Da die beiden Container möglichst weit außen stehen entsteht zwischen ihnen (und nur zwischen ihnen) ein Abstand von 1rem. Der Vorteil dieser Vorgehensweise macht sich erst richtig bemerkbar, wenn drei oder mehr Container nebeneinander stehen sollen und dabei von ganz links außen bis nach ganz rechts außen gehen sollen. Darauf ist das Layout damit also auch schon vorbereitet.

Ähnlich gehts beim folgenden Schritt weiter.

Ab 1200px sollen dann immer zwei Card-Container nebeneinander stehen. Das erfolgt mit

   @media only screen and (min-width: 1200px) {
      .cards {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
      }
   }

und

   @media only screen and (min-width: 1200px) {
      .card {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(50% - 0.5rem - 1rem - 2px - 0rem);
      }
   }

Das Vorgehen ist das gleiche wie eben beschrieben.

Die .cards sollen jeweils 50% breit sein. Sie haben jeweils ein padding von 0.5rem und ein border von 1px. Die Angaben müssen für die calc-Angaben verdoppelt werden, da links und rechts.

Der Abstand soll wiederum 1rem betragen, deshalb die 0.5rem als zusätzlicher Abzug.

Das gesamte getauschte CSS, welches das gelöschte ersetzen soll, noch mal im Zusammenhang, auch zum einfacheren Kopieren:

   /*.cards*/
   @media all {
   }
   @media only screen and (min-width: 1200px) {
      .cards {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
      }
   }

   /*.card*/
   @media all {
      .card {
         padding: 0rem 0.5rem 0rem 0.5rem;
         border: 1px solid grey;
         border-radius: 0.3rem;
         margin: 1rem 0rem 0rem 0rem;
      }
      .card img {
         box-shadow: 2px 2px 2px hsla(0, 0%, 0%, 0.5);
         border-radius: 0.3rem;
         margin: 1rem auto 1rem auto;
      }
      .card dt {
         font-family: Questrial, sans-serif;
         font-size: 1.6rem;
      }
      .card dd {
         margin-top: 1rem;
      }
   }
   @media only screen and (min-width: 800px) {
      .card {
         display: flex;
         justify-content: space-between;
      }
      .card figure {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(40% - 0.5rem - 0rem - 0px - 0rem);
      }
      .card div {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(60% - 0.5rem - 0rem - 0px - 0rem);
      }
   }
   @media only screen and (min-width: 1200px) {
      .card {
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(50% - 0.5rem - 1rem - 2px - 0rem);
      }
   }

   /*.card - background-color*/
   @media all {
      .card:nth-of-type(7n+1) {
         background-color: hsla(51, 100%, 50%, 1);
      }
      .card:nth-of-type(7n+2) {
         background-color: hsla(300, 47%, 75%, 1);
      }
      .card:nth-of-type(7n+3) {
         background-color: hsla(55, 67%, 80%, 1);
      }
      .card:nth-of-type(7n+4) {
         background-color: hsla(351, 100%, 86%, 1);
      }
      .card:nth-of-type(7n+5) {
         background-color: #B4C8C6;
      }
      .card:nth-of-type(7n+6) {
         background-color: #B9CB9C;
      }
      .card:nth-of-type(7n+7) {
         background-color: #EBDAAC;
      }
   }

Das wäre meine Lösung.

Gruss

MrMurphy

 

[Misanthrop]

Vielen vielen Dank ersteinmal für Deine ausführliche Hilfe. Ich werde mich heut Abend mal daransetzen!
Grüsse der Misanthrop

 

[Misanthrop]

Ich arbeite noch daran, Farben, Bilder und Texte müssen noch bearbeitet werden,
einige Abstände brauchen noch ein padding,
aber ich habe es soweit:
Siehe: LINK GELÖSCHT

Soweit tut es das alles, mal BITTE um eine Überprüfung!

Zwei Dinge aber noch die mich stören:
Und zwar A):
Ich weiß nicht wie es bei Handys oder Smartphones oder Tabletts etc. aussieht und ob es
dafür dann auch relevant ist, wo villeicht auch nicht alles sofort auf dem screen zu sehen ist
wie an einem PC - Bildschirm:

Wenn man die Schriftgrösse bei Opera auf 500% setzt
( beim Firefox ist es auch so, natürlich nur 300%! )
UND: das Fenster schiebt man eng zusammen bis es nicht mehr geht
(so stelle ich mir es bei Smartphones etc. vor / das dann die mindest Breite erreicht ist!)

dann springt der Text über den body bzw. .cards Rahmen,
(zur Veranschaulichung hier als gestrichelte Linie!)

das finde ich unschön,

deshalb hatte ich soetwas eingebaut (was ich auf anraten gelöscht habe) wie:
( ein Beispiel: )
/*Spezielle Einstellungen*/
@media all and (max-width: 290px){
.cards {
width: 210px;
}
}

Das wenn also das Fenster extrem klein ist, also etwas gescrollt werden müsste, aber die 500%
Schrift ist ordentlich zu lesen.
ODER: wie ich es nun habe (was ich unschön finde!) ich hab bei html

overflow-wrap: break-word;

gesetzt. Dann wird ja auf jedem Fall alles umgebrochen und das Layout ist stimmig.

Allerdings macht dies der IE natürlich nicht mit, und ich weiß nicht wie man das nun wieder beheben könnte!

Wie macht man das nun in der Praxis?

Grüsse der Misanthrop

 

[Aaron3219]

Wenn du wissen willst, wie es auf einem Smartphone aussieht, dann geh bei Google-Chrome in die Developer Tools und dann oben auf das kleine Smartphone-Symbol.

Zum Thema "overflow-wrap",
versuch mal "word-wrap: break-all;"
(ungetestet)

Edit: Jetzt getestet und funktioniert:
Ich weiß vorher stand da break-word. Ist aber falsch:
word-wrap: break-all;
ist richtig

WICHTIG:
Es muss sowohl
"overflow-wrap: break-word;"
als auch
"word-wrap: break-all;"
enthalten sein, da word-wrap: break all in chrome z.B. nicht enthalten ist, aber dafür in IE


Edit2:
Mir ist aufgefallen, dass du z.B. bei
"h1" hypens geschrieben hast. Es heißt aber "hyphens"

 

[Misanthrop]

Hmmm, neeee, scheint im IE nicht zu funktionieren:
Bei einer Schriftgrösse von 100% schon...
aber sobald die Schriftgrösse im IE auf 400% gesetzt wird
geht der Text über den .cards - Rand hinüber....

Meine Frage: Wie würde man das auf einer professionellen Seite machen?

Ich bin immer noch dafür wenn die Schrift eine extreme Grösse hat
( IE 400% / Opera 500% )
das wenn das Fenster bis ans äußerste zusammengeschoben wird (bei mir ca. 203px???)
ruhig horizontal ein Scrollbalken erscheint das man ein wenig scrollen kann,
sodass der Text bei 400% oder 500% einiger - massen lesbar ist...

Würde man es so machen?

Ich würde Media Queries so in der Art einsetzen:
@media screen and (min-width: 90px) and (max-width: 280px) {

Hier wird dann <body> oder <cards> auf eine "erträgliche" Breite in px gesetzt!!!

}

Hoffe auf Antworten!

Grüsse der ratlose Misanthrop

 

[Tronjer]

Meine Frage: Wie würde man das auf einer professionellen Seite machen?

Hatte ich dir bereits erklärt: In dem man ein für den Anwendungsfall passendes UI-Framework einsetzt, welches neben reponsivem Grid ein Basis-Layout für font-size, margin, padding, etc. liefert - und dessen Styles bedarfsweise anpasst oder erweitert. Das erspart 90% des Arbeitsaufwandes.

Niemand vergrößert eine Seite um das vier- bis fünffache. Es sei denn, die Schriftgröße wäre von vornherein deutlich zu klein gewählt oder der Betreffende hätte erhebliches Sehprobleme. Auch ist es völlig irrelevant, den Viewport von 90px - 280px per Media-Queries abzudecken. Der kleinste gemeinsame Nenner liegt bei iPhone 4/5 und vergleichbaren Displaygrößen, also 320px.

 

[Misanthrop]

Eigentlich wollte ich alles von der "Piecke auf lernen".... dabei ganz klein anfangen...
Klar ist es einfach mit einem UI-Framework wie Bootstrap, Framework 7 etc. zu arbeiten,
dieses verstehe ich aber nicht komplett und man muss sich doch wieder mühsam hineinarbeiten
um zum Beispiel Änderungen vorzunehmen.
Nee, nee....
Sorry... ist zwar "schick"....

@MrMurphy
Jetzt mal der Fall das meinetwegen der .card figure { ... } - Bereich
eine feste Breite hätte ( Ich denke nach für ein anderes Projekt! )
und rechts daneben der Textbereich <dl> wäre fliessend & variabel...

( Übrigens habe ich um die <dl> ´s KEINE zusätzlichen <div> `s mehr gemacht,
irgendwie kamen die mir unnötig vor.
Die <div> ´s , so ohne Funktion! Weil ja das <a> - Tag letztlich in ein <dd> gepackt wurde! )

Ich meine wenn ich :

1. .card figure {
2. ...
3. flex-basis: calc(450px - 0.5rem - 0rem - 0px - 0rem);
4. }
5. .card dl {
6. ...
7. flex-basis: calc(55% - 0.5rem - 0rem - 0px - 0rem);
8. }

Oder so in der Richtung einsetze??? Bei px handelt es sich ja um eine "feste unflexible Grösse", oder?
Aber dann ist ja die Frage, wie verhält sich der flexible rechte Textteil, der in % angegeben ist?

Fragende Grüsse der Misanthrop