• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem - DIV Container für Responsive Seite richtig einrichten

marcelgerard

marcelgerard

Mitglied
Hi liebe Community,

ich habe ein Problem auf meiner Seite, die ich gerade lokal aufbaue, bezüglich des responsive Design. Ich möchte fünf Musikcover nebeneinander reihen, was an sich ja kein großer Akt ist, da es mit display: flex ja ganz einfach ist. Doch schwer wird es, alles mit Abständen zu versehen und das es weiterhin responsive ist. Theoretisch kann ich ja mit
justify-content: space-between es auseinander ziehen und zwischen allen Musikcovern wäre ein Abstand.

Ziehe ich aber jetzt die Website klein für ein kleineres Endgerät wie Tablet oder Smartphone, verhält es sich komisch, weil die Musikcover nicht auf eine zweite Zeile hüpfen. Hab dazu mal flex-wrap: wrap verwendet, dann rutschen die automatisch in eine zweite Zeile. Doch leider weiß ich dann nicht, wie ich die Abstände rein bekomme. Mit padding oder margin ist das schwer, weil das Musikcover was jeweils außen steht, soll ja ganz außen kein margin oder padding haben.

Ich hab mal ein Foto beigefügt. Ich hoffe das man versteht was ich meine. Mir würde vielleicht schon reichen, wenn ich weiß, wie man die Abstände richtig setzen könnte.

5117
 
@m.scatello - Die Seite wird lokal gebaut, daher kann ich keinen Link zeigen. Hab es ja so einfach wie möglich versucht zu erklären.

@Sempervivum - Irgendwie ist das komisch, denn es gibt doch solche Auflistungen wie Sand am Meer. Hab mir sogar welche angeschaut, aber schlau werde ich nicht draus. Man könnte natürlich dem Musikcover rechts und links eine andere CSS Anweisung geben und da eben den Abstand weglassen. Aber das passt dann glaube ich mit der möglichen zweiten Zeile nicht mehr.
 
Zentriert hatte ich es auch schon, nur finde ich sieht das doof aus, wenn da je nach Kunde nur ein Musikcover steht (bei den meisten werden es wohl zwei-drei sein) und es zentriert ist. Passt nicht zu allem andere auf der Seite. Möchte es lieber alles links angesetzt haben, aber eben bei mehreren Einträgen dann für jedes Endgerät schön haben.

Damit hab ich leider noch etwas zu kämpfen, ich bin ein absoluter Desktop Fan und mag keine Smartphones. Aber leider müssen sie beachtet werden, ich wünschte es wäre nicht so :p

Was ich auch immer wieder sehe ist, dass sich Inhalte beim kleiner machen des Browsers auch verkleinern z.B auf dieser Seite zu sehen. scrollt man mal ca. in die Mitte kommt der Punkt "Trending in the Community" und die darunter liegenden 6 Künstlerbilder verkleinern sich automatisch, wenn man den Browser kleiner macht. Erst wenn eine bestimmte Breite erreicht ist, ist es anders formatiert. Das wäre wahrscheinlich auch eine gute Lösung. Aber wie man das umsetzt verstehe ich leider noch nicht.
 
Ich würde ein Grid-Layout verwenden.
HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css">
  <style>
    figure { margin: 0; }
    figcaption { text-align: center }
    img { width: 100%; }
  </style>
</head>
<body>
  <div class="row">
    <figure class="col-xs">
      <img src="https://via.placeholder.com/150" alt="">
      <figcaption>Hello World </figcaption>
    </figure>
    <figure class="col-xs">
      <img src="https://via.placeholder.com/150" alt="">
      <figcaption>Hello World </figcaption>
    </figure>
    <figure class="col-xs">
      <img src="https://via.placeholder.com/150" alt="">
      <figcaption>Hello World </figcaption>
    </figure>
    <figure class="col-xs">
      <img src="https://via.placeholder.com/150" alt="">
      <figcaption>Hello World </figcaption>
    </figure>
    <figure class="col-xs">
      <img src="https://via.placeholder.com/150" alt="">
      <figcaption>Hello World </figcaption>
    </figure>
  </div>
</body>
</html>
 
@Sempervivum - Hmm, bei mir klappt das irgendwie nicht. Was mach ich denn, wenn die Bilder im Ursprung eigentlich größer sind? Deine Bilder haben jetzt exakt 150x150? Meine sind 500x500, weil sie bei was anderem größer sein müssen. In der Ansicht die ich baue sollen sie aber kleiner sein. Das beißt sich glaub ich mit der width: 100% Anweisung?

@Tronjer - Mit Grid hab ich keine Erfahrung. Wie verhält sich das denn in so einem Fall?

Ich bin irgendwie überrascht, dass so ein Aufbau so kompliziert ist, wo er doch auf so gut wie jeder Website vorkommt. Dachte genau das ist das mit Abstand einfachste.
 
Also eigentlich will ich nichts weiter als das die Bilder nebeneinander stehen. Ich schick noch mal ein anderes Bild, welches ich mit Photoshop gemacht habe. Ist sozusagen das Mockup zu dem was ich jetzt baue.

Die Künstler (sind meine Kunden) sehen darin ihre eigenen Singles, EPs oder Alben als Musikcover. Im Bild sind es nur zwei. Hat aber einer mehr z.B fünf, dann sind das logischerweise mindestens fünf Musikcover zu sehen. Das was du in deinem zweiten Fiddle gemacht hast ist gar nicht so verkehrt, nur funktioniert es bei mir irgendwie nicht. Hab deinen CSS Code mal eingebaut, aber sieht nicht aus wie bei dir. Bei mir sind die Cover alle riesig, da die Originale größer sind, als sie in der Fläche unten sein sollen.

Ist blöd das die Seite Lokal ist, sonst hätte ich es mal zeigen können. Kann es ja mal unten mit dem Code versuchen.

5120

Da mein HTML Code etwas anders aussieht als dein Beispiel, hab ich es einfach versucht einzubauen. Das sind jetzt die 5 Bilder bez. wie die zwei oben im Bild:

HTML: 
<div class="test123">
   <div><a href="url"><img src="assets/images/profiles/cover1.jpg" class="testcover"></a></div>
   <div><a href="url"><img src="assets/images/profiles/cover1.jpg" class="testcover"></a></div>
   <div><a href="url"><img src="assets/images/profiles/cover1.jpg" class="testcover"></a></div>
   <div><a href="url"><img src="assets/images/profiles/cover1.jpg" class="testcover"></a></div>
   <div><a href="url"><img src="assets/images/profiles/cover1.jpg" class="testcover"></a></div>
</div>

Hier ist der CSS Code:

CSS: 
.test123 {
    display: flex;
  justify-content: space-between;
  margin: 0;
  flex-wrap: wrap;
  width: 100vw;
}

.testcover {
    width: 100%;
    margin: 0;
  flex: 0 1 15%;
  min-width: 1px; 
  }

Ich weiß jetzt auch nicht ob das verständlich ist :S
 
Ja genau. Das sie nebeneinander gereiht sind klappt auch, aber ich frage mich eben wie das mit den Abständen geht, denn wie du im zweiten Bild sehen kannst sitzt das erste Bild direkt links parallel unter dem Wort "Produkte". Würde man mit margin oder padding für alle Bilder arbeiten, würde das ja nicht aufgehen. Und wie du schon sagtest, dass wenn sie nicht mehr in eine Zeile passen wie man sie ordentlich in mehrere Zeilen bekommt. Geht dabei ja um die kleineren Bildschirme und Smartphones. Das was dabei beachtet werden muss, was mir so schwer fällt, wie es sich verhält, wenn nur zwei Musikcover drin sind oder eben auch 4 oder 5.

Bin dir für deine Hilfe und Geduld sehr dankbar.
 
@Sempervivum - Ich hab mal deinen Code ungefähr eingefügt. Sieht aber nicht so aus wie bei dir. Bei mir macht er es ganz anders irgendwie. Ich mach es jetzt mal einfacherer und hab das ganze auf den Server hochgeladen. Vereinfacht vielleicht die Hilfe. Hier findest du es.
 
Die rechte Seite hab ich noch nicht eingestellt auf responsive. Die soll beim kleiner ziehen dann nach unten hüpfen. Allerdings sieht es ja im Browser noch nicht so aus wie ich es wollte. Ich hab leider noch rein gar keine Erfahrung mit flex: 0 0 calc(33% - 2rem); und wie man damit spielen kann. Ich glaub die Umrandung ist auch noch nicht gelöst. Weil das ganz rechte Musikcover und das ganz linke sollen jeweils kein Padding oder Margin ganz außen haben. Sonst ist der Inhalt ja weiter drinnen und nicht parallel z.B das linke Musikcover zu der Überschrift "Produkte".

Ich hoffe ich werde hier jetzt nicht zu kleinlich :S Ich spiele aber auch schon die ganze Zeit rum.
 
Ich sehe auch eine Lösung mit Flexbox und MediaQueries.

Mein Beispiel funktioniert folgendermaßen:

HTML:

Code: 
      <article class="cardlayout">
         <section>
            <a href="">
               <img src="http://lorempixel.com/600/300/transport/2">
            </a>
            <h3>Ein Flugzeug</h3>
            <p>EP ⋅ 859712829535</p>
         </section>
         <section>
            <a href="">
               <img src="http://lorempixel.com/600/300/transport/5">
            </a>
            <h3>Der Porsche</h3>
            <p>EP ⋅ 859712829535</p>
         </section>
         <section>
            <a href="">
               <img src="http://lorempixel.com/600/300/transport/8">
            </a>
            <h3>Das Mini</h3>
            <p>EP ⋅ 859712829535</p>
         </section>
         <section>
            <a href="">
               <img src="http://lorempixel.com/600/300/nature/2">
            </a>
            <h3>Eine Insel mit zwei Bergen</h3>
            <p>EP ⋅ 859712829535</p>
         </section>
         <section>
            <a href="">
               <img src="http://lorempixel.com/600/300/nature/10">
            </a>
            <h3>Der Wasserhahn tropft</h3>
            <p>EP ⋅ 859712829535</p>
         </section>
         <section>
            <a href="">
               <img src="http://lorempixel.com/600/300/abstract/1">
            </a>
            <h3>Nach der Feier</h3>
            <p>EP ⋅ 859712829535</p>
         </section>
         <section>
            <a href="">
               <img src="http://lorempixel.com/600/300/animals/8">
            </a>
            <h3>Ein Hund bellt - oder auch nicht</h3>
            <p>EP ⋅ 859712829535</p>
         </section>
      </article>

und dazu folgendes CSS:

Code: 
   /*.cardlayout*/
   @media all {
      .cardlayout {
         display: flex;
         flex-wrap: wrap;
      }
      .cardlayout img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         /*max-height: 100vh;*/
         border: 0;
      }
      .cardlayout h3 {
         margin-left: 0.5rem;
         margin-top: 0.1rem;
         margin-right: 0.5rem;
         margin-bottom: 0rem;
      }
      .cardlayout p {
         margin-left: 0.5rem;
         margin-top: 0.1rem;
         margin-right: 0.5rem;
         margin-bottom: 1.0rem;
      }
   }
   @media only screen and (min-width: 600px) {
      .cardlayout section {
         width: calc(50% - 0.25rem);
      }
      .cardlayout section:nth-child(2n+1) {
         margin-right: 0.5rem;
      }
   }
   @media only screen and (min-width: 900px) {
      .cardlayout section {
         width: calc(33.3333% - 0.3333rem);
      }
      .cardlayout section:nth-child(2n+1) {
         margin-right: 0rem;
      }
      .cardlayout section:nth-child(3n+1),
      .cardlayout section:nth-child(3n+2) {
         margin-right: 0.5rem;
      }
   }
   @media only screen and (min-width: 1100px) {
      .cardlayout section {
         width: calc(25% - 0.375rem);
      }
      .cardlayout section:nth-child(3n+1),
      .cardlayout section:nth-child(3n+2) {
         margin-right: 0rem;
      }
      .cardlayout section:nth-child(4n+1),
      .cardlayout section:nth-child(4n+2),
      .cardlayout section:nth-child(4n+3) {
         margin-right: 0.5rem;
      }
   }
   @media only screen and (min-width: 1300px) {
      .cardlayout section {
         width: calc(20% - 0.401rem);
      }
      .cardlayout section:nth-child(4n+1),
      .cardlayout section:nth-child(4n+2),
      .cardlayout section:nth-child(4n+3) {
         margin-right: 0rem;
      }
      .cardlayout section:nth-child(5n+1),
      .cardlayout section:nth-child(5n+2),
      .cardlayout section:nth-child(5n+3),
      .cardlayout section:nth-child(5n+4) {
         margin-right: 0.5rem;
      }
   }

Die Bilder gehen ohne äußeren Rand von links nach rechts und Zeilen ohne die volle Bilderanzahl sind linksbündig ausgerichtet.
 
Also so wie der Code jetzt im Beispiel ist, klappt es super und wäre genau das was ich wollte. Allerdings funktioniert es in meinem lokalen Original nicht. Exakt der selbe Code, selbe CSS Anweisung, aber zeigt es anders an. Hauptsächlich ein Problem mit den Abständen. Die Musikcover verhalten sich jetzt optimal, der Abstand der Seite ist aber weiterhin komisch. Wenn ich bei meiner Anweisung das margin und padding weglassen, hat die gesamte Karte keine Umrandung mehr.

Die Musikcover stehen dadurch aber parallel unter "Produkte".

CSS: 
.card {
    background: #fff;
    padding: 18px;
    margin-bottom: 18px;
}

Anders ist es, wenn ich sie zufüge, dann hab ich meine gewünschten Umrandungen, aber die Musikcover haben noch einmal 18px padding und sind somit nicht mehr parallel unter "Produkte".

Ich versuche zu verstehen was genau du gemacht hast. z.B wieso ist in dieser Anweisung box-sizing: border-box; drin? Das hab ich schon im Body * {box-sizing: border-box;} und sollte doch auf alles zugreifen?

CSS: 
.test123>div {
    box-sizing: border-box;
    padding: 18px;
    width:25%;
  }

Wenn ich dann den padding: 18px; im zweiten Code rausnehme, ist wieder kein Abstand zwischen den Musikcovern. Ich würde es ja gerne zeigen, aber es ist nur auf dem lokalen Bereich so, dass was du sehen kannst geht es.

Hab mindestens 10x drüber geschaut, kann keinen Fehler sehen. Ist der exakt selbe Code. Sogar schon 5x den Cache gelöscht, aber verhält sich einfach anders.
 
marcelgerard schrieb:
Mit Grid hab ich keine Erfahrung.
Zum Vergrößern anklicken....

Dann solltest du das als erstes lernen. Bevor du dich mit Flexbox auseinandersetzt. Am Anfang einer Website steht immer die Konzeption. Der Code ist nachrangig.

Responsive Seiten werden auf einem Grid angeordnet, und ein Grid besteht in der Regel aus 12 Spalten. Was bedeutet, dass die Elemente hinsichtlich ihrer Breite durch 12 teilbar sein sollten. Auf deiner verlinkten Seite hast du zwei Container mit einem Größenverhältnis von 2:1, das entspricht in Grid-Verhältnissen 8 und 4 Spalten bei höheren Auflösungen. Auf dem Smartphone sollten die Container untereinander stehen und jeweils 12 Spalten breit sein.

Der linke Hauptcontainer mit den Platten-Covern nimmt 2/3 der Seite ein und lässt sich auch wieder in 12 Spalten unterteilen. Das heißt, du kannst dort 1, 2, 3, 4, 6 oder 12 Elemente gleicher Breite unterbringen, aber keine 5. Sollen die Unterschriften der Cover nicht umbrochen werden, würde ich maximal 3 oder 4 nebeneinander anordnen.

Falls das jetzt alles kompliziert klingen sollte - das ist es nicht. Weil man für das Grid-Layout UI-Frameworks einsetzt, welche die notwendigen CSS-Klassen an Bord haben. So dass man nur noch wenige Styles selber schreiben muss. Ein weiterer Vorteil dieser Frameworks besteht darin, dass sich auch komplexe und verschachtelte Layouts mit ein paar Handgriffen umstricken lassen.

Anbei deine Beispielseite als responsive Version.
https://codepen.io/anon/pen/YMNJmN

und die Doku der verwendeten Grids.
https://getbootstrap.com/docs/4.3/layout/grid
 
Muss ich heute Abend noch einmal schauen. Hatte eigentlich alles durchgecheckt. Meine lokale Seite bez. CSS Datei ist ja schon deutlich größer. Vielleicht beißt sich da ja was.
 
Dann ist aber der außen Rand dieser Karte wieder weg. Geht irgendwie nur das eine oder das andere, aber nie beides. Bisher wirkt das auf mich alles so umständlich, kann doch für so eine normale harmlose Auflistung von Inhalten/Bildern nicht sein?
 
Manchmal sagt mir mein Bauchgefühl das etwas komisch ist. Aber ich bin nicht Profi genug um das einzuschätzen. Wenn es jetzt so wie du es gemacht hast heutzutage gemacht wird bez. man machen kann bin ich beruhigt. Noch funktioniert es auch noch nicht ganz, aber ich glaube das liegt jetzt nur daran, dass die CSS Anweisungen etwas durcheinander sind durch das rumprobieren. Ich versuche auch noch exakt zu verstehen was genau bei was der Anweisungen passiert. Das mir noch nicht so ganz klar, vor allem das Durcheinander mit dem padding verwirrt mich.
 
Ich sehe im Grunde nur zwei Probleme. Zum einen das es nicht durchgehend fünf Bilder sein werden, sondern eben auch mal 1,2,3 oder 4. Denn würden es durchgehend fünf sein, wäre das Ding ja einfach. Und was einfach echt blöd ist, sind die Abstände, dass man diese nicht deutlich einfacherer setzen kann in so einem Fall.

Ich hab jetzt auch mal den CSS Code zerpflückt und einzeln rumprobiert und irgendwie ist das alles echt kurios. Hab auch schon nach Websiten geschaut, die sowas ähnlichen haben, aber bisher keine gefunden.
 
Die Anordnung der Bilder von Rand zu Rand mit Abstand dazwischen ist mit aktuellem HTML und CSS ganz einfach, dazu sind nur 3 Zeilen erforderlich:

Code: 
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
         grid-gap: 0.5rem;

Die restlichen CSS-Anweisungen in meinem Beispiel haben mit der Anordnung der Bilder und der dazugehörigen Texte nichts zu tun.

Zu diesem HTML-Quelltext

Code: 
      <article class="cardlayoutgrid">
         <section>
            <img src="http://lorempixel.com/600/300/transport/2">
            <h3>Ein Flugzeug</h3>
            <p>EP ⋅ 859712829535</p>
         </section>
         <section>
            <img src="http://lorempixel.com/600/300/transport/5">
            <h3>Der Porsche</h3>
            <p>EP ⋅ 859712829535</p>
         </section>
         <section>
            <img src="http://lorempixel.com/600/300/transport/8">
            <h3>Das Mini</h3>
            <p>EP ⋅ 859712829535</p>
         </section>
         <section>
            <img src="http://lorempixel.com/600/300/nature/2">
            <h3>Eine Insel mit zwei Bergen</h3>
            <p>EP ⋅ 859712829536</p>
         </section>
         <section>
            <img src="http://lorempixel.com/600/300/nature/10">
            <h3>Der Wasserhahn tropft</h3>
            <p>EP ⋅ 859712829537</p>
         </section>
         <section>
            <img src="http://lorempixel.com/600/300/abstract/1">
            <h3>Nach der Feier</h3>
            <p>EP ⋅ 859712829538</p>
         </section>
         <section>
            <img src="http://lorempixel.com/600/300/animals/8">
            <h3>Ein Hund bellt - oder auch nicht</h3>
            <p>EP ⋅ 859712829539</p>
         </section>
      </article>

dieses CSS

Code: 
      .cardlayoutgrid {
         border: 2px solid grey;
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
         grid-gap: 0.5rem;
      }
      .cardlayoutgrid img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0;
      }
      .cardlayoutgrid h3 {
         margin: 0.1rem 0.5rem 0rem 0.5rem;
      }
      .cardlayoutgrid p {
         margin: 0.1rem 0.5rem 0rem 0.5rem;
      }
      .cardlayoutgrid p:last-child {
         margin-bottom: 1.0rem;
      }

Keine MediaQueries, keine Berechnungen.
 
Wo ist das Problem? Du kannst die Seite ja mit Flexbox und Mobile First erstellen. Dann die 3 Zeilen CSS-Grid zusätzlich, Flexbox als Fallback verwendet (das gibt's dann ja schon, also keine zusätzliche Arbeit) und die Seite wird für alle Besucher vernünftig angezeigt. Das ist doch das entscheidende.

Und nur weil man selbst eine Technik nicht verwenden will ist das doch kein Grund die Anderen auszureden. Ich zeige lieber wie etwas funktioniert und dann kann der Fragesteller selbst urteilen.

CSS-Grid ist im HTML-/CSS-Universum implementiert und in ein, zwei Jahren taugen auch die alten IE-Versionen nicht mehr als Ausrede. Wer jetzt neue Webseiten erstellt sollte es deshalb auch nutzen, zumal die deutlich überwiegende Anzahl der Browser bereits heute damit zurechtkommt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben