Text soll Bild umfließen (responsive)

  • Ich meine das bei mir auch so versucht zu haben, nur dass dein figure bei mir ein div ist. Hm. Eig sollte das doch gehen. Ich schau nach ner Mütze Schlaf nochmal drüber.


    Auf meiner Über mich Seite hab ich's auch geschafft. Nur ist das noch nicht responsive, die Card und die Section wachsen nicht mit, auch wenn ich der section statt height ein min-height gebe nicht...

  • MrMurphy hat es schon in #11 gesagt: Wenn es so floaten soll, wie du willst, dürfen die <p> Elemente kein float: right und kein display: inline-block haben.

    Die width-Angabe kannst du dann auch komplett von den <p> Elementen entfernen.


    Außerdem solltest du für .card h1 das height entfernen. Dadurch wächst dann dein h1 Container mit, wenn die Überschrift zweizeilig wird.

  • Danke Andreas, die h1 braucht ein min-height, hab ich grad geändert.


    Ich hab jetzt bei meinen img und p und sogar der .card alles Unnötige rausgenommen, hab auch die Media Queries vorsichtshalber auskommentiert. Das Ergebnis: Die Absätze stehen unter dem Bild... Auch die, wo nur xxx steht. Es klappt einfach nicht.

    Kommt da noch jmd drauf, der schlauer ist als ich? Hab's nochmal hochgeladen.

    Hier lang... als PHP mittlerweile.

  • Das ändert sich ja von Minute zu Minute ;)

    Vorhin sah es noch so aus:

    Nachdem ich die kritischen Einträge heraus genommen hatte, funktionierte das Umfließen.

  • Das flex war vorher auch schon drin, aber in .main01a. Das float left hab ich wieder reingetan, das hab ich vergessen wieder hinzuzufügen. Hilft aber nix. Auch wenn ich das Flex rausnehm, ändert es nichts.

    Ah, Moment mal. ICH hab nicht flex in die .card getan... Das war Bootstrap. Mannooo. Weil die auch wieder was haben, was sich Card nennt. Mal schauen, ob's dann geht. Wenn ich das im Inspektor wegklicke, haut es mir natürlich die ganze Card zusammen... Die ist dann nur noch so hoch wie der Text, das Bild steht raus.


    Bootstrap will ich drinlassen um zu sehen, was das alles bewirkt. Bin ja schließlich noch in der Lernphase. ;)

  • SOOOO...jetzt aber! Nachdem ich MEINER .card ein display:inline-block; gegeben habe um dem Bootstrap entgegenzuwirken, floatet der Text nun auch so wie er soll.

    Wahnsinn, war das ne schwere Geburt! Da kommt man sich vor wie bei der Kripo. lol


    Übrigens, weil die card jetzt nicht mehr display:flex; ist, funktioniert für den Link-Butto das margin-top:auto; nicht mehr. Schade. Bekommt man das trotzdem hin, dass der Button automatisch unten an der Card sitzt oder kann man leider nicht alles haben?

    Ein Rätsel ist mir außerdem (auch ohne Bootstrap), warum dieser Button mal am unteren Rand klebt, mal nicht. Hab ihm jetzt 10px margin-bottom verpasst, jetzt hat er stellenweise natürlich 20px, wenn man das Fenster kleiner macht. Es gibt Dinge, die sind mir einfach unlogisch. Den Inspektor kenne ich ja mittlerweile auch, hab da aber keine Anzeichen dafür gefunden.


    Weil jmd hier mal erwähnt hat, dass es einen Teil gibt, wo das Bild oben und der Text unten ist, aber neben dem Bild noch Platz wäre. Sieht das tatsächlich schlimm aus? Wenn ich da den Text rechts beginnen lasse, schaut er auch nicht mehr schön aus, weil die Zeilenlängen zu kurz sind. Soll ich das Bild da zentrieren? Finde ich persönlich jetzt nicht so gut, weil das Bild dann nicht mehr bündig ist mit der h1 und dem Text.

  • Zitat

    Es gibt Dinge, die sind mir einfach unlogisch

    Eindeutig: Nein. Das Problem, welches auch Hilfe für dich erschwert, ist dein unstrukturiertes Vorgehen.


    Zitat


    Weil die auch wieder was haben, was sich Card nennt.

    Benennungen sollten weder wie HTML-Elemente noch wie Bootstrap-Klassen oder -ID heißen. Das solltest du also umbenennen.

  • Ich kann natürlich nur meine Meinung zu deinen Beiträgen hier im Forum im Zusammenhang mit HTML, CSS und Bootstrap äußern. Ich war der Meinung, dass das aus dem Zusammenhang hervorgeht. Es tut mir leid wenn das falsch rübergekommen ist.

  • Zitat

    Ein Rätsel ist mir außerdem (auch ohne Bootstrap), warum dieser Button mal am unteren Rand klebt, mal nicht.

    Die Position des Buttons orientiert sich nicht am unteren Rand des Containers sondern am unteren Rand des Elementes darüber, das ist der letzte Absatz. Dort klebt er dran.

    Man kann jedoch, wenn alle Stricke reißen, die Dinge mit Javascript berechnen und positionieren:

    https://jsfiddle.net/Sempervivum/mr4gt716/4/

  • Oh, es klappt ja wirklich! Hab jetzt direkt die 2. Version eingebunden mit querySelectorAll.

    Aber kannst du mir vl sagen, warum das nur online klappt und offline nicht? Bis jetzt ist mir kein JS-Codeschnipsel untergekommen, bei dem mir das passiert ist. Strange... Deshalb hab ich gestern auch geschrieben, dass es nicht geht. Offline geht's tatsächlich bei mir nicht.


    Wenn ich den Code richtig verstehe - von JS hab ich ein bissl Ahnung, aber noch nicht viel - dann ist der Button jetzt am unteren Bildrand ausgerichtet. Ich finde das ja erstaunlich, wie du mal so kurzerhand was codest. Ich versteh den Code, aber von selber schreiben bin ich leider noch weit entfernt.

  • Zitat

    Aber kannst du mir vl sagen, warum das nur online klappt und offline nicht?

    Dafür habe ich leider keine Erklärung. Was benutzt Du denn offline für eine Entwicklungsumgebung und was für einen Browser? getBoundingClientRect ist relativ neu und falls Du einen Editor mit integrierter Vorschau benutzt, könnte es sein, dass diese die Funktion noch nicht unterstützt.

  • Ich hab mir die Seite einfach in Firefox angeschaut, der lädt mir die PHP-Seite auch ohne dass ich XAMPP vorher starte. Vl hat's was damit zu tun. Ich hab die Navigation und den Footer über php require eingebunden, meinen anderen Browser zeigen mir daher nur den Quellcode an. Firefox stellt als einziger die Seite dar. Um zu testen, komme ich ja ohne Nav und Footer auch aus.

  • Ich bin das Layout noch mal von vorne mit den jetzt bekannten Informationen angegangen.


    Dazu habe ich das HTML und CSS nach den aktuellen Regeln und den bewährten Vorgehensweisen erstellt.


    Vom Bootstrap werden die grundsätzlichen CSS-Regeln übernommen, also zum Beispiel die Schriftgröße. Das wird auch sinnvoll sein.


    Ich selbst verwende einige grundsätzliche CSS-Angaben, die sich bewährt haben und die sinnvoll sind. Ich teste deshalb nicht aus, ob die notwendig sind oder nicht. Für mein folgendes Beispiel könnten folgende meiner grundsätzlichen CSS-Angaben notwendig sein:



    Mein Beispiel HTML sieht dann folgendermaßen aus:



    Die Texte haben durch Löschen einiger Absätze unterschiedliche Längen.


    Dazu dann das folgende CSS:


    Farben, Abstände, Rahmen spielen dabei keine Rolle, es sind nur die notwendigen angegeben.


    Dadurch entsteht ein sehr flexibles Card-Layout.


    Die Textlänge ist egal.


    Der Link steht immer unterhalb vom Bild und vom Text, egal welches länger ist.


    Der Text floatet ab einer passender Breite um das Bild.


    Die einzelnen Cards sind alle gleich hoch (da habe ich selbst etwas dazugelernt), unabhängig davon, in welcher Reihe sie stehen. Die Höhe wird dabei von der höchsten Card bestimmt.

  • Zum direkten Testen noch mal meine komplette Testdatei:



    Zum Einrichten von Farben, Abständen, Rahmen und so weiter ohne das Layout versehentlich zu zerstören habe ich einen leeren CSS-Block "/*.buchvorstellung: Farben, Abstände, Rahmen*/" eingefügt.

Jetzt mitmachen!

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