XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Responsive CSS Grid Layout (http://xhtmlforum.de/showthread.php?t=73887)

hatschiii 30.07.2019 17:10

Responsive CSS Grid Layout
 
Ich habe eine Zzeile mit 4 Boxen

https://dlgo.de/layout.jpg

Wird das Fenster nun schmäler werden die boxen auch schmäler und brechen irgendwann um auf das mobile Layout. Dann werden diese alle in einer Spalteuntereinander dargestellt was sehr gut ist.

Bevor die Spalten umbrechen werden sie allerdings zu schmall. Ich möchte das sie sagen wir mal eine Mindestbreite von 200px und erst dann umbrechen. Dann auch nicht gleich in eine Spalte mit allen 4 untereinadner, sondern erst in 2 Spalten und 2 Zeilen und erst päter in 1 Spalte mit 4 Zeilen.

Daneben sollten die Boxen immer 1 und 2 Zeilen Layout immer die gleiche Höhe haben. Bricht der Text aufgrund der Breite in einer Box in eine Zeile mehr um ändert sich die Höhe de Box. Gleichzeitig sollten die anderen Boxen in der gleichen Zeile die Höhe auch ändern.

Hat jemand eine Idee wie ich das hin bekomme?

Achja, hier noch mein Quellcode:

Code:

<div id="section-home-inner">
    <article class="section1 one_fourth">
        <div class="services-builder style1">
            <div class="iconimage">
                <a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a>
            </div>
            <div class="iconmain">
                <h3>Header</h3>
                <p>text text text text text text</p>
                <p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p>
            </div>
        </div>
        <div class="services-builder style1">
            <div class="iconimage">
                <a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a>
            </div>
            <div class="iconmain">
                <h3>Header</h3>
                <p>text text text text text text</p>
                <p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p>
            </div>
        </div>
    </article>
    <article class="section1 one_fourth">
        <div class="services-builder style1">
            <div class="iconimage">
                <a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a>
            </div>
            <div class="iconmain">
                <h3>Header</h3>
                <p>text text text text text text</p>
                <p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p>
            </div>
        </div>
        <div class="services-builder style1">
            <div class="iconimage">
                <a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a>
            </div>
            <div class="iconmain">
                <h3>Header</h3>
                <p>text text text text text text</p>
                <p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p>
            </div>
        </div>
    </article>
    <article class="section1 one_fourth">
        <div class="services-builder style1">
            <div class="iconimage">
                <a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a>
            </div>
            <div class="iconmain">
                <h3>Header</h3>
                <p>text text text text text text</p>
                <p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p>
            </div>
        </div>
        <div class="services-builder style1">
            <div class="iconimage">
                <a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a>
            </div>
            <div class="iconmain">
                <h3>Header</h3>
                <p>text text text text text text</p>
                <p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p>
            </div>
        </div>
    </article>
    <article class="section1 one_fourth">
        <div class="services-builder style1">
            <div class="iconimage">
                <a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a>
            </div>
            <div class="iconmain">
                <h3>Header</h3>
                <p>text text text text text text</p>
                <p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p>
            </div>
        </div>
        <div class="services-builder style1">
            <div class="iconimage">
                <a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a>
            </div>
            <div class="iconmain">
                <h3>Header</h3>
                <p>text text text text text text</p>
                <p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p>
            </div>
        </div>
    </article>
    <div class="clearboth">
</div>


MrMurphy 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.

hatschiii 31.07.2019 10:33

Cool, danke MrMurphy :)

hatschiii 31.07.2019 10:49

Habe es jetzt mal eingefügt....
  1. Der Teaser (card) bleibt immer im einspaltigem Layout und geht über die volle Breite
  2. Änderung "max-width: 260px;" bewirkt nichts
  3. media-only 700 und 1200 wird ignoriert

Ich möchte ja den TEaser max 260pxx breit damit 4 nebeneinander passen,

...irgendwas "blockt" da noch, auch wenn der CSS code mit 50% und 25% genau nach dem aussieht was ich will

MrMurphy 31.07.2019 11:23

Ich habe es schon verhalten geschrieben:

Zitat:

Deine Informationen sind leider sehr mager ...
Deshalb noch mal deutlich: Ohne einen Link zu deiner Seite können wir dir nicht konkret helfen.

Ersatzweise das KOMPLETTE HTML und CSS. Wobei Anfänger damit häufig überfordert sind. Ein Link zu der Seite ist deshalb besser und erspart Nachfragen unsererseits.

Das Problem liegt in deinem restlichen Quelltext, den du uns bislang vorenthältst.

Zitat:

So kann das CSS den restlichen Quelltext der Seite nicht beeinflussen.
Auch das war ein Hinweis für dich. Du musst natürlich gleichzeitig auch dafür sorgen, dass dein vorhandenes CSS nicht in das Cardlayout reinpfuscht.


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:36 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020