Spalten in Beitrag nicht responsive und langsam - Joomspirit 134

    Hallo zusammen,

    ich bin dabei die einzelnen Beiträge aufzubauen.

    Vorher konnte ich die Bilder nicht so positionieren wie ich das wollte.

    Daher habe ich nun 2 Spalten bzw. Tabelle mit 4 Zellen aufgebaut.

    Leider ist das nicht responsive und sehr lahm.

    Habt ihr eine Idee, wie ich das besser machen kann?

    Die Homepage ist: http://www.ihr-weg-zur-ver%c3%a4nderung.de

    Ich habe Joomla! 3.9.27 und nutze das Template Joomspirit-134

    Herzliche Grüße

    Tabellen sollte man nicht zum Layouten verwenden.

    Oft geht es einfach mit float: left oder float-right, was meist automatisch genutzt wird, wenn man im Editor ein Bild einfügt und ausrichtet.

    Wie wolltest du denn überhaupt die Bilder positionieren?

    Das genannte Template bietet ja auch einige Möglichkeiten (columns layout): https://joomspirit.com/template-jooml…/columns-layout

    Aber auch:

    - Multi-Columns CSS3

    - Testimonials

    Hallo JoomlaWunder,

    man sehe e mir nach, ich bin wirklich ein Anfänger.

    mit float: right und margin hatte ich es versucht, es war jedoch dann immer zu viel Platz zwischen Text und Bild.

    Ich will eigentlich das Profilbild ca. bündig zum rechten Rand des Textes drunter und rechts von der Adresse haben.

    Ich habe daher bis jetzt oben 2 Zellen und unten 1 extra Zelle.

    Ich danke Dir für die Tipps und schau mir diese an.

    Mal sehen wie ich die einbauen kann.

    Herzliche Grüße

    Zitat von mfersing

    .... mit float: right und margin hatte ich es versucht, es war jedoch dann immer zu viel Platz zwischen Text und Bild.

    Das relativiert sich natürlich bei kleineren Bildschirmen oder wenn man an dieser Stelle mehr Text hätte.

    Auf der Startseite ist die Schriftgröße etwas größer. Diese ev. auch auf den anderen Seiten verwenden. Oder auch das Bild etwas größer machen. Vielleicht ist aber auch noch ein Modul eingeplant, welches man dann auf die Modulposition "right" legen könnte.

    Hallo zusammen,

    ich habe jetzt das mit den Spalten von Joomspirit 134 probiert.....dass sah dann sehr merkwürdig aus hmm

    Dann hab ich es nun mit Elwoods Tipp umgebaut, das passt soweit gut auf dem Laptop.

    Ich hab Bild nun je so eingestellt: <img style="border: none; margin-top: 0px; margin-right: 200px; float: right; max-width: 100%; border-width: initial;" src="images/Bilder/225-677A0229_Netzwerk.jpg" width="175" height="223" />

    Nur mobil ist leider das Profilbild ganz nach links gerutscht.

    Habt ihr mir hier noch einen Tipp, wie ich das verhindern kann?

    Ich danke euch für eure tollen Tipps.

    Zitat von mfersing

    Habt ihr mir hier noch einen Tipp, wie ich das verhindern kann?

    Ich kann das mit dem Profilbild gerade nicht ganz nachvollziehen, deshalb geraten:

    Wenn man etwas floatet, dann ev. anschließend sowas einfügen wie z.B.

    <p style="clear:both;"></p>

    Dann wird das Floating "aufgehoben" und der Inhalt danach wieder normal dargestellt.

    EDIT: Ach so, mobil. Kann ich gerade nicht überprüfen....

    Na ja, die Lösung - siehe unten.

    Es wurden weder die Möglichkeit von Spalten noch die Lösung von Elwood umgesetzt.

    Ist Inline so verankert:

    CSS
    <div itemprop="articleBody">
        <h1><span style="color: #fa270f;">Name</span></h1>
<h1><img style="border: none; margin-left: 20px; border-width: initial;" src="/images/Bilder/225-677A0229_Netzwerk.jpg" width="175" height="223" /></h1>

<p><img style="border: none!important; border-width: initial;" src="/images/Bilder/PurBalance_Logo_vf.jpg" width="200" height="82" /></p>

    (aus Sicherheitsgründen im Code den realen Namen entfernt).

    Danach kommt halt der Beitrag (Inline).

    Liebe Grüße

    Christine

    Edit: Unsere Posts haben waren zeitgleich/haben sich überschnitten.

    Dein neuestes Post:

    Zitat

    Ich habe das mit Kategorieblog ausprobiert.

    Dann habe ich das float raus.

    Du hattest u.a. im CSS Code ein: margin-right: 200px; Das ist für mobil nicht gut gewesen.