zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Responsive CSS Grid Layout

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.07.2019, 17:10
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 20
hatschiii befindet sich auf einem aufstrebenden Ast
Standard Responsive CSS Grid Layout

Ich habe eine Zzeile mit 4 Boxen



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>

Geändert von hatschiii (30.07.2019 um 17:16 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.07.2019, 23:02
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
  #3 (permalink)  
Alt 31.07.2019, 10:33
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 20
hatschiii befindet sich auf einem aufstrebenden Ast
Standard

Cool, danke MrMurphy
Mit Zitat antworten
  #4 (permalink)  
Alt 31.07.2019, 10:49
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 20
hatschiii befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von hatschiii (31.07.2019 um 10:56 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 31.07.2019, 11:23
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

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.

Geändert von MrMurphy (31.07.2019 um 11:54 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Css 3 Seiten Layout will net so :) nova_rs CSS 1 30.03.2010 15:54
Joomla und CSS Layout ohne Tabellen ... MoYo CSS 2 15.02.2007 10:19
CSS Layout - ist das so möglich? berlina CSS 18 12.02.2007 21:55
Layout: Tabelle -> CSS | ohne Schönheitsfehler? Knickedi CSS 20 05.08.2006 02:18
CSS Layout mit abgerundeten Ecken dimension CSS 3 17.04.2005 18:05


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:41 Uhr.