Einzelnen Beitrag anzeigen
  #2 (permalink)  
Alt 30.07.2019, 23:02
MrMurphy MrMurphy ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.066
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Deine Informationen sind leider sehr mager, ich kann meine Antwort aber nur an deinen Angaben ausrichten.

Vorweg: Dein HTML-Quelltext enthält viel zu viele unnötige Container, meist divs. Da kämpfe ich mich nicht durch. Die aktuellen HTML-Regeln besagen zudem, dass unnötige Container zu vermeiden sind.

Außerdem soll der Quelltext möglichst schlank sein und keine überflüssigen Angaben enthalten. Dadurch bleibt er auch viel übersichtlicher. Das gilt zum Beispiel für class und id. Für dein Vorhaben ist nur eine einzige Klasse erforderlich.

div-Elemente sollen nur noch verwendet werden, wenn es keine geeigneteren gibt. Für deinen Darstellungswunsch ist kein einziges div erforderlich.

Ein aktueller HTML-Quelltext kann zum Beispiel folgendermaßen aufgebaut sein:

Code:
<article class="cardlayout">
   <section>
      <a href="">
         <img src="http://lorempixel.com/600/300/transport/2" alt="Bildinfo">
      </a>
      <h1>Header</h1>
      <p>text text text text text text</p>
      <a href="">Read More &gt;</a>
   </section>
   <section>
      <a href="">
         <img src="http://lorempixel.com/600/300/transport/5" alt="Bildinfo">
      </a>
      <h1>Header</h1>
      <p>text text text text text text</p>
      <a href="">Read More &gt;</a>
   </section>
   <section>
      <a href="">
         <img src="http://lorempixel.com/600/300/transport/6" alt="Bildinfo">
      </a>
      <h1>Header</h1>
      <p>text text text text text text</p>
      <a href="">Read More &gt;</a>
   </section>
   <section>
      <a href="">
         <img src="http://lorempixel.com/600/300/transport/8" alt="Bildinfo">
      </a>
      <h1>Header</h1>
      <p>text text text text text text</p>
      <a href="">Read More &gt;</a>
   </section>
   <section>
      <a href="">
         <img src="http://lorempixel.com/600/300/city/7" alt="Bildinfo">
      </a>
      <h1>Header</h1>
      <p>text text text text text text</p>
      <a href="">Read More &gt;</a>
   </section>
   <section>
      <a href="">
         <img src="http://lorempixel.com/600/300/city/9" alt="Bildinfo">
      </a>
      <h1>Header</h1>
      <p>text text text text text text</p>
      <a href="">Read More &gt;</a>
   </section>
   <section>
      <a href="">
         <img src="http://lorempixel.com/600/300/nature/2" alt="Bildinfo">
      </a>
      <h1>Header</h1>
      <p>text text text text text text</p>
      <a href="">Read More &gt;</a>
   </section>
   <section>
      <a href="">
         <img src="http://lorempixel.com/600/300/nature/5" alt="Bildinfo">
      </a>
      <h1>Header</h1>
      <p>text text text text text text</p>
      <a href="">Read More &gt;</a>
   </section>
</article>
Das CSS wird dann mit Flexbox und Media Queries erstellt. Dabei nach der Möglichkeit "Mobile First". Das könnte dann so aussehen:

Code:
@media all {
   .cardlayout {
   }
   .cardlayout section {
      background-color: hsla(360, 0%, 83%, 0.2);
      max-width: 600px;
      border: 1px solid grey;
      margin: 0.5rem auto 0.5rem auto;
   }
   .cardlayout img {
      min-width: 1px;
      display: block;
      max-width: 100%;
      border: 0px;
   }
   .cardlayout h1 {
      font-family: sans-serif;
      font-size: 1.8rem;
      text-align: center;
      margin: 1.5rem 1rem 1.5rem 1rem;
   }
   .cardlayout p {
      font-size: 1.5rem;
      text-align: center;
      margin: 1.5rem 1rem 1.5rem 1rem;
   }
   .cardlayout a {
      display: block;
   }
   .cardlayout a:last-child {
      color: lightskyblue;
      text-align: center;
      display: block;
      margin: 1.5rem 1rem 1.5rem 1rem;
   }
}
@media only screen and (min-width: 700px) {
   .cardlayout {
      display: flex;
      flex-wrap: wrap;
   }
   .cardlayout section {
      margin: 0.5rem 0.5rem 0.5rem 0.5rem;
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: calc(50% - 0rem - 2px - 1rem);
   }
}
@media only screen and (min-width: 1200px) {
   .cardlayout {
      display: flex;
      flex-wrap: wrap;
   }
   .cardlayout section {
      margin: 0.5rem 0.5rem 0.5rem 0.5rem;
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: calc(25% - 0rem - 2px - 1rem);
   }
}
So kann das CSS den restlichen Quelltext der Seite nicht beeinflussen.

Geändert von MrMurphy (30.07.2019 um 23:08 Uhr)
Mit Zitat antworten
Sponsored Links