Text soll Bild umfließen (responsive)

  • Wow, Mr. Murphy, da hast du dir aber ganz schön viel Arbeit angetan! Hab's mir direkt mal angeschaut und hochgeladen - hier.

    Das sieht natürlich super aus und passt sich auch schön an!

    Display:grid ist was Tolles, da muss ich mich erst einarbeiten.

    Lässt sich das denn auf mein Design ummünzen? Ich habe ja keine Grids, sondern einfache Blöcke untereinander. Kann ich das beim Grid-Layout auch machen, dass jede Grid untereinander kommt?

    Ich glaube, es würde verdammt viel Sinn machen, das bei mir dann umzubauen.

  • Noch mal zum Thema alle Cards mit gleicher Höhe.


    Im folgenden Beispiel, bei dem nur die Bilder und der Inhalt getauscht wurden, ist meiner Ansicht nach gut zu erkennen, dass das nicht unbedingt sinnvoll ist, wenn alle Cards gleich hoch sind. Wenn der 3. Container unterhalb der beiden anderen steht ist der Leerraum eher unschön.


    Gleichzeitig ist auch ersichtlich, dass das Layout auch bei geänderten Inhalten sehr stabil ist. Das ist also grundsätzlich für viele Zwecke geeignet.



    Wenn nur die Cards in den einzelnen Reihen gleich groß sein sollen muss im CSS nur die Zeile


    Code
    grid-auto-rows: 1fr;


    gelöscht oder auskommentiert werden. Die kommt nur einmal vor. Das kannst du ja mal ausprobieren.

  • Ich habe deinen Beitrag erst jetzt gesehen.


    Zitat

    Lässt sich das denn auf mein Design ummünzen?


    Das sollte möglich sein. Dafür habe ich den leeren Block vorgesehen. Dein Design entsteht ja durch Abstände, Rahmen und Farben.


    Zitat

    Kann ich das beim Grid-Layout auch machen, dass jede Grid untereinander kommt?


    Das verstehe ich nicht. Bei schmalen Fenstern sind die Cards ja untereinander. Oder meinst du etwas anderes?


    Zitat

    Ich glaube, es würde verdammt viel Sinn machen, das bei mir dann umzubauen.


    Du solltest mein HTML und CSS einfach übernehmen und mit eigenen Inhalten anpassen können. Mein persönliches CSS vielleicht in der Form


    Dann hat es keine Auswirkungen auf das restliche Layout außerhalb von .buchvorstellung.

  • Also ich finde das echt super. Mal sehen, ob ich's bei mir einbaue. Ansonsten habe ich hier jede Menge gelernt und schon mal einen guten Einblick in die Grid-Funktion bekommen! Danke dafür!

  • Das verstehe ich nicht. Bei schmalen Fenstern sind die Cards ja untereinander. Oder meinst du etwas anderes?

    Ja, ich dachte, ich mache alle Cards untereinander, nicht nur bei schmalen Fenstern.



    Das mit dem "einfach übernehmen" ist zwar sehr lieb und freundlich von dir. Da hab ich dann aber ein Problem damit. ;) Aber wie gesagt, das schau ich mir auf jeden Fall noch an.


    Ich probier gerade ziemlich viel rum, auch die anderen Baustellen auf meiner Seite, dass mal das Grundgerüst steht und nachher kommt der Umbau und der Feinschliff. Auch wenn die Vorgehensweise nicht grad optimal ist. ;)

  • Das ist technisch kein Problem. Grid ist dazu weder erforderlich noch sinnvoll.


    Du kannst also einfach das "display: grid;" löschen oder auskommentieren. Die anderen Grid-Anweisungen sind damit inaktiv und stören nicht.


    Gleichzeitig gibst du .buchvorstellung an gleicher Stelle eine maximale Breite und margin links und rechts ein auto mit auf den Weg. Das kann nach den Änderungen folgendermaßen aussehen:


    Code
    .buchvorstellung {
             max-width: 800px;
             margin-left: auto;
             margin-right: auto;
             /*display: grid;*/
             gap: 1rem;
             grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
             grid-auto-rows: 1fr;
          }


    Mehr ist nicht notwendig. Außer ich habe dich falsch verstanden.

  • Achja, ich denk manchmal zu kompliziert. Langsam glaub ich, mein Hirn braucht mal ne Pause. Sonst wurschtel ich weiter bei Dingen, die viel einfacher gehen könnten.


    Mal kurz ein bisschen Info. Ich hab vor mehr als 15 Jahren so einige Webseiten erstellt, in Zeiten von tables... Daaamals. Und nun bin ich dabei, das ganze wieder aufzufrischen und upzudaten. Und in der Zeit hat sich einfach mit CSS3 so viel getan, wovon man damals nur hätte träumen können. Und responsive war halt damals auch noch nicht. Und jetzt hab ich so viel Spaß daran und probier 1000 Dinge gleichzeitig aus. Was es für mich nun schwierig macht, sind eben Flex und Grid. Mit Grid hab ich noch gar nicht gearbeitet und bei Flex - ich sag mal - fuchst mich immer was und dann komm ich hier im Forum drauf, dass es eine primitive Eigenschaft gibt, die mein Problem löst, von der ich haber (noch) keine Ahnung hatte. Ich hab mir zwar schon ein bisschen was zu dem Thema angeschaut, aber am Ende ist es halt dann learning by doing. Das fuchst dann und ich murks rum, aber Spaß macht's dann doch. Und ich hab schon eine Menge gelernt, vor allem hier von euch! Also fettes Dankeschön dafür!

  • Zitat

    Mal kurz ein bisschen Info. Ich hab vor mehr als 15 Jahren so einige Webseiten erstellt, in Zeiten von tables

    Damals gab es auch weder Smartphones noch Tablets. Und das Layout war starr wie Stahlbeton.


    Ich habe noch ein Beispiel angepasst an dein ursprünliches Design erstellt. Dazu einspaltig mit einer maximalen Breite von 1000px. Dazu waren wie von mir geplant nur ein paar zusätzliche Einträge in den dafür von mir vorgehaltenen, bislang leeren, CSS-Block erforderlich:


  • Wow! Sehr schön! Hier.


    Und der Grund, das zu ändern ist, dass eine logischere Struktur dahinter steckt, oder? Und keine extra Klassen in den Elementen mehr benötigt werden, weil das ganze so einfach sauber ist? Jetzt weiß ich auch (noch mehr als vorher), warum du gestern gesagt hast, ich arbeite unstrukturiert. :)


    Wie gesagt, vorerst lass ich das noch so, werde es dann aber noch umbauen, bevor ich mich dran mache, den Content auszufüllen.


    Wie kann man euch hier eig danken?? Hab schon so viel gelernt hier!

  • Für mich ist erst mal entscheidend, dir die aktuellen Möglichkeiten von HTML / CSS zu zeigen und dass es sich lohnt, sich mit denen zu beschäftigen. Speziell, wenn du dich doch mal intensiver mit der Erstellung von CSS-Seiten beschäftigen willst.


    Wenn Andere das lesen und Informationen mitnehmen - umso besser und schöner für mich.

  • Jetzt bin ich wieder da, wo ich schon mal war.

    Ich hab mir die Buchvorstellung von Murphy angeschaut. Er hat eine figure und darin das img, figure zusammen mit p in einem div und unter diesem div dann den Link.

    Ich wollte dieses zusätzliche div jetzt weglassen und hab also das Bild links vom Text, den Link krieg ich auch mit display:block dann nach rechts, ohne float.

    Klingt ja alles ganz schön. Allerdings fällt mir das Bild jetzt dank float aus dem Rahmen, dh der Rahmen wächst nicht mit dem Bild. Daran ist ja eig das float schuld und nicht mein weglassen von figure und extra-div. Das Float hat Murphy aber auch drin.

    Zum Testen hab ich grad mal eine Höhe von 300px angegeben, damit man sieht, was da passiert - verschiebt alles.

    Ich steh irgendwie auf dem Schlauch.

    Hier der Link


    PS: Das mit dem Styles auslagern kommt noch. ;)

  • Na ja, das typische float-Problem nach dem Motto "Wozu die Grundlagen von float lernen, das kann jeder". Der Browser zeigt den Inhalt vollkommen korrekt an.


    Die Hintergründe von float füllen ganze Buchkapitel - und nicht die dünnsten. Deshalb nur das wichtigste in Kurzform:


    float "hebt" die gefloateten Elemente aus dem Dokumentenfluß.


    Alle nachfolgenden Elementen rutschen deshalb unter das gefloatete Element, bis sie wiederum höher als das gefloatete Element sind. Nur ihr Inhalt wird seitlich (in deinem Fall rechts) vom gefloateten Element angezeigt. Sobald der Inhalt das gefloatete Element passiert hat geht es unter dem gefloateten Element weiter.


    Das float wird gnadenlos vererbt.


    Die Folgen erlebst du grade selbst. Das ausführlich zu erklären sprengt die Möglichkeiten eines Forums.


    Der Alexander bleibt am Bild vom "Mitglied werden?" hängen. Wenn der Text vom Alexander kürzer wäre (kannst du ja mal ausprobieren) würde die Elvira noch weiter rechts am Bild vom Alexander hängen bleiben. Nach den HTML-Regeln das ganz normale Verhalten von float, seit über 20 Jahren.


    Wenn du bei "Mitglied werden?" den Text Zeile für Zeile verlängest wirst du feststellen, das irgendwann das Bild vom Alexander und schließlich auch die Überschrift mit Alexander nach links rutschen werden.


    Deshalb gibt es zu float einen Merksatz, der immer beachtet werden sollte: "Wer floatet muss auch clearen!"


    Es gibt verschiedene Möglichkeiten des clearens, Anfänger sollten mit der klassischen beginnen, da die "fortschrittlicheren" Nebenwirkungen haben können, die man bei deren Anwendung kennen sollte.


    Bei klassischen clearen bekommt das erste Element, das nicht mehr dem float unterliegen soll, die CSS-Anweisung "clear: both;".


    Da du eh' mit br-Elementen um dich schmeißt kannst du jeweils ein br-Element als letztes in jedes div.card-single eintragen und dem die CSS-Anweisungen mit auf ihren Weg geben. Ich empfehle dir für die CSS-Anweisung folgenden Eintrag:


    Code
    .card-single>br:last-child {
       clear: both;
    }

    Da du br-Elemente auch innerhalb des Card-Textes benutzt sollen nur br-Elemente gecleart werden, die als letzte im div stehen.


    Falls dir das zu neu und ungewohnt ist kannst du den eingefügten br-Elementen auch eine Klasse geben und die dann clearen. Das traue ich dir selbstständig zu.


    Falls das letzte Element immer ein a-Element ist und das grundsätzlich unterhalb des Bildes stehen soll kannst du auch dem die clear-Anweisung zuweisen.

  • Ah, danke! Dass man da immer clearen muss danach, hab ich tatsächlich nicht gewusst. Du kennst ja meine anderen Cards, da hatte ich das Problem nicht. Aber ich glaub, da hab ich auch nicht gefloatet, wenn ich mich recht erinner.


    Das mit den child-Pseudoelementen kenn ich, danke.

    Du meinst, ich schmeiß mit br-Elementen um mich? Ich hab da eig nur ein Bild und einen Absatz und beim ersten einen Link drin. In der Card, mein ich. Die Zig BRs unterhalb kommen natürlich wieder weg. ;)

    Ich überleg grad, wem ich das clear dann zuweisen muss. mit img after arbeiten? oder card after?

  • Wenn die Texte wie beim Alexander bei allen Cards über die Bildhöhe hinausgingen würde die clear-Problematik in deinem jetzigen Beispiel auch nicht auftauchen. Aber stetig im Hintergrund warten bis ein Text gekürzt werden würde.


    Zitat

    Ich überleg grad, wem ich das clear dann zuweisen muss. mit img after arbeiten? oder card after?

    Am sichersten für Anfänger ist, wie schon geschrieben, ein leeres Element als letztes in das div einfügen. Das ist zwar quelltextmäßig nicht schön, ist aber am einfachsten nachvollziehbar und funktioniert problemlos. So war das von den Entwicklern ursprünglich auch vorgesehen.

  • Unsere Texte werden tatsächlich so lang nicht werden, das ist es ja. Und das Bild so schmal zu machen schaut dann auch wieder nicht gut aus. Dann eben doch ein br am Ende. Hab nur überlegt, ob das mit dem p nicht auch gehen müsste?

  • Zitat

    Hab nur überlegt, ob das mit dem p nicht auch gehen müsste?

    Kannst du ja einfach mal ausprobieren. Aber - nein.


    Dazu habe ich bereits geschrieben


    Zitat

    Bei klassischen clearen bekommt das erste Element, das nicht mehr dem float unterliegen soll, die CSS-Anweisung "clear: both;".

    So weit ich sehen kann sollen in deinem Fall die p-Elemente neben dem Bild stehen, also dem float (dem gefloateten Element sogar wortwörtlich) unterliegen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!