Tabelle mit 3 Bilder „sauber“ darstellen

  • Gelöst topsurfer

    (@topsurfer)


    vor 5 Jahren, 4 Monaten

    Hallo,
    ich kämpfe mit einem „einfachem“ Problem.
    Ich möchte einfach drei Bilder nebeneinander in meinem Blog zeigen, unter jedem Bild soll eine kurze Beschreibung stehen.
    Das ganze wollte ich über eine Tabelle machen, Tabellenbreite auf 99%, Spaltenbreite auf 33%.
    Am PC sieht es auch sauber aus, aber auf dem Handy sind die Spalten unterschiedlich breit, und die Bilder unterschiedlich hoch (?)
    So siehts auf dem handy aus, mit Chrome und Firefox probiert:
    https://abload.de/img/wp_tab_pich5kca.jpg

    Muss keine Tabelle-Lösung sein, letztlich sollen die drei Bilder und die Beschreibungen nur „sauber „dargestellt werden (Bilder gleich groß, symetrisch, die ganze Seitenbreite einnehmen (also jedes Bild 1/3) …)

    (hab den HTML-Code mal ausserhalb WordPress in ein HTML gepackt, dann sieht es auch auf dem Handy „sauber aus: http://www.mmblog.de/tmp/test_table_html.html)

    So sieht der Code aus:
    [su_table]
    <table border=“0″ width=“99%“ cellspacing=“0″ cellpadding=“0″>
    <tbody>
    <tr>
    <td width=“33%“></td>
    <td width=“33%“></td>
    <td width=“33%“></td>
    </tr>
    <tr>
    <td width=“33%“>111 Extra Zeltwiese text 123456789 12345678</td>
    <td width=“33%“>Meerblick vom Stellplatz</td>
    <td width=“33%“>Mietbungalows, Hintergrund das Meer</td>
    </tr>
    </tbody>
    </table>
    [/su_table]

    • Dieses Thema wurde vor 5 Jahren, 4 Monaten von topsurfer geändert.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 5 Antworten – 16 bis 20 (von insgesamt 20)
1 2
  • Moderator Hans-Gerd Gerhards

    (@hage)

    vor 5 Jahren, 4 Monaten

    Hallo,
    im Block-Editor wählst du den Classic Block, dann gehst du auf die 3 senkrechten Punkte und wählst „Als HTML Bearbeiten“:
    classic-block

    Dort gibst du das ein, was @pixolin bereits gepostet hast, wobei du die Datei-URL jeweils aus deiner Mediathek entsprechend einsetzt:

    <div class="meine-fotos">
  <div><img src="https://example.com/wp-content/uploads/bild1.jpg"></div>
  <div><img src="https://example.com/wp-content/uploads/bild2.jpg"></div>
  <div><img src="https://example.com/wp-content/uploads/bild3.jpg"></div>
</div>

    Anschließend gibst du unter Design > Customizer > zusätzliches CSS die ebenfalls von @pixolin bereits geposteten CSS-Regeln ein:

    .meine-fotos {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
}
.meine-fotos img {
  width: 100%;
  height: auto;
	padding:5px;
}

    Nachtrag, weil du das ja auf jeden Fall auf englisch stehen lassen möchtest: Design = Appearance. Meine Empfehlung wäre aber trotzdem, die Einstellung auf deutsch zu ändern.

    Dann sollte es funktionieren.
    Viele Grüße
    Hans-Gerd

    Thread-Starter topsurfer

    (@topsurfer)

    vor 5 Jahren, 4 Monaten

    hallo Hand-Gerd,
    danke für dein Post,
    aber funktioniert denn der Code wie du ihn geschrieben hast im Customizer bei dir?

    Ich erhalte auch bei dieser „Variante“ einen Fehler in der Zeile:
    grid-template-columns: repeat(3, minmax(0, 1fr));

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 5 Jahren, 4 Monaten

    Hallo,
    funktioniert bei mir einwandfrei. Kein Fehler. Die „Variante“ ist übrigens exakt die von Bego ohne irgendeine Änderung. Es muss also an deiner WordPress-Instanz liegen.
    Viele Grüße
    Hans-Gerd

    Thread-Starter topsurfer

    (@topsurfer)

    vor 5 Jahren, 4 Monaten

    OK,
    habe WP von Version 5.3.2. auf 5.5 upgedated, jetzt ist der css Fehler verschwunden !
    Arghhh …

    Prinziell scheint es nun zu funktionieren, nur werden die Bilder beim Editieren im Block- und Classic-Editor in voller Größe (und auch auf dem PC untereinander) angezeigt, das macht das Editieren natürlich „unübersichtlich“ bzw. verwirrt …

    (auf der Live-Seite ist es aber korrekt (also „schön“ nebeneinander))

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 5 Jahren, 4 Monaten

    hmm, die Info, dass du noch die Version 5.3.2 hast, wäre zu einem früheren Zeitpunkt genau wie die Sache mit der Sprache (englisch) sicherlich hilfreich gewesen.

    Eine ungenaue Fehlerbeschreibung bedeutet für uns, dass wir unnötigerweise Zeit investieren müssen. Da wir eine Handvoll Freiwilliger sind, die in unserer Freizeit Probleme von WordPress-Anwendern versuchen zu lösen, erwarten wir, dass das Problem umfassend beschrieben wird.

    Außerdem scheint das Thema gelöst zu sein.

    Es wäre nett, wenn du das zukünftig bedenkst und ein gelöstes Thema auch dementsprechend markierst. Danke.

Ansicht von 5 Antworten – 16 bis 20 (von insgesamt 20)
1 2

Das Thema „Tabelle mit 3 Bilder „sauber“ darstellen“ ist für neue Antworten geschlossen.