Responsive Alternative zu Table für mehrspaltiges Layout in einem Beitrag

  • Hallo an alle,

    ich bin noch relativ neu, was Joomla und allgemein Websitegestaltung angeht. Ich arbeite aktuell an einer Überarbeitung einer bestehenden Seite. Erstes Ziel ist, dass die Seite auch auf kleineren Bildschirmen gut aussieht.

    In einem Beitrag möchte ich auf der linken Seite Bilder haben und auf der rechten Seite den dazu gehörigen Text, wenn der Bildschirm kleiner ist, soll der Text unter das Bild rutschen.

    Ich habe etwas das Internet durchforstet und dabei u.a. diesen Beitrag im Forum gefunden: Layout: responsive Alternative zu einem Table

    Entsprechend habe ich das umgesetzt und habe jetzt ein grob laufendes Minimalbeispiel:

    Hiermit habe ich aber noch einige Schwierigkeiten, die vermutlich daher kommen, dass ich für diesen Beitrag mich das erste Mal mit html beschäftigt und keinen WYSIWYG-Editor benutzt habe.

    1) Der Text im rechten <div> ist direkt am Bild dran, hier hätte ich lieber einen kleinen Abstand. Ich habe hierzu einiges gelesen, was padding bzw. margin angeht, aber bin nicht draus schlau geworden bzw. habe es nicht zum Laufen bekommen. Kann mir das nochmal jemand erklören, wie das genau geht?

    2) Der Text vom zweiten Bild ist nicht neben dem zweiten Bild, sondern genau unterhalb des Textes vom ersten Bild. Ich habe zunächst vermutet, dass es daran liegen könnte, dass ich zweimal ein <div class="row-fluid"> nutze, aber wenn ich alles in ein großes <div class="row-fluid"> umändere, ändert dies nichts am Output. Wie schaffe ich es, dass der Text vom zweiten Bild auch wirklich neben dem zweiten Bild auftaucht?

    Um das Problem besser zu verstehen, habe ich euch noch einen Screenshot angehangen, auf dem man den aktuellen Stand sieht.

    Ich hoffe, es findet sich jemand der mir helfen kann, da ich aktuell etwas überfordert bin...

    Danke im Voraus :)

  • Hey. Danke schonmal für die Antworten.

    Den Link zur Seite/Problem habe ich tatsächlich vergessen, das tut mir leid. Hier: http://samuel.ff-endenich.de/index.php/akti…fahrzeuge/lf-10

    Elwood Danke für das Template, das kannte ich noch nicht. Ich werde es mir mal angucken. Die EInsatzkomponente nutze ich bereits, bin aber noch nicht endgültig von ihrem Layout was Fahrzeuge angeht überzeugt. (siehe: http://samuel.ff-endenich.de/index.php/akti…e-fahrzeuge/mtf)

  • Dein Code aus Post #1 baut auf Bootstrap 2 auf und verwendet ("span4", "span8" usw.). Dein Template hingegen verwendet Bootstrap 4. Versuche es also mal mit "col-lg-4" bzw. "col-lg-8":

    (s. auch hier z.B.; oder hier)

  • Hallo Anka!

    Danke für deine Hilfe. Ich dachte, ich hätte das auch schon ausprobiert, aber dann muss ich da einen Fehler gemacht haben, denn jetzt funktioniert es problemlos :)

    Danke auch für die beiden Links, ich werde mich mal weiter darin einlesen und vielleicht schaffe ich dann auch kleinere Anpassungen demnächst alleine!

    Danke für die Hilfe an alle!!