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:
<div class="row-fluid">
<div class="span4"><img style="float: left;" src="images/bilder_website/fahrzeuge/BN_14_LF_01-01.jpg" alt="BN 14 LF 01 01" width="650" height="488" /></div>
<div class="span8" margin-left="20px">
<p> <strong><span style="font-size: 14pt;">Gerätefach 1</span></strong></p>
<p><span style="font-size: 14pt;">Ein bisschen Text zum Thema, der etwas mehr als eine Zeile füllen sollte.</span></p>
</div>
</div>
<div class="row-fluid">
<div class="span4"><img style="float: left;" src="images/bilder_website/fahrzeuge/BN_14_LF_01-01.jpg" alt="BN 14 LF 01 01" width="650" height="488" /></div>
<div class="span8" margin-left="20px">
<p> <strong><span style="font-size: 14pt;">Gerätefach 2</span></strong></p>
<p><span style="font-size: 14pt;">Ein bisschen Text zum Thema, der etwas mehr als eine Zeile füllen sollte.</span></p>
</div>
</div>
Alles anzeigen
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