XHTMLforum - Einzelnen Beitrag anzeigen

MrMurphy · #2 (**permalink**) 30.07.2019, 23:02

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.