Ich bin am verzweifeln (gelöst)

[Grauhaupt]

Ich bin am verzweifeln.
Seit mehreren Stunden versuche ich nun einen Artikel zu erstellen. Ich versuche 3 verschiedene Bilder auf gleicher Höhe zu platzieren. Da die Bilder gleichgroß sind, dürfte das ja bekanntlich keine Schwierigkeiten bereiten; dachte ich zumindestens.
Der Entwurf des Artikel sind so aus

Das Ergebnis (also das was auf meiner Startseite angezeigt wird) sieht dann so aus:

Ich bin weder ein Fortgeschrittener noch ein Experte, was das Erstellen einer html-Datei und der dazugehörigen css-Datei betrifft, aber Grundkenntnisse sind mit Sicherheit vorhanden.
der Code für diese Artikel sind wie folgt aus:

Code: Select all

<!-- s9ymdb:24 -->
<table align="center" border="0" cellpadding="0" cellspacing="0" id="Bilderrahmen" style="width:850px">
    <tbody>
        <tr>
            <td style="text-align:center; vertical-align:middle; white-space:nowrap"><!-- s9ymdb:24 --><!-- s9ymdb:24 --><img alt="" class="serendipity_image_center" src="/uploads/Schulanfang_Peter.serendipityThumb.jpg" style="margin:25px; width:200px" /><br />
            &nbsp;</td>
            <td style="text-align:center; vertical-align:middle; white-space:nowrap"><!-- s9ymdb:24 --><!-- s9ymdb:4 --><!-- s9ymdb:4 --><img alt="" class="serendipity_image_center" src="/uploads/Fotos/Peter_jung_1.serendipityThumb.jpg" style="margin-left:25px; margin-right:25px; width:200px" title="Peter_jung_1.jpg" /></td>
            <td><!-- s9ymdb:6 --><img alt="" class="serendipity_image_center" src="/uploads/2013-07-20_20.25.58.serendipityThumb.jpg" style="margin-left:25px; margin-right:25px; width:200px" /></td>
        </tr>
    </tbody>
</table>
<!-- s9ymdb:6 -->

Wieso ein Bild plötzlich doppelt angezeigt wird und das dritte verschwindet, kann ich mir nicht erklären.
Vielleicht kann mir ja jemand in diesdem Forum dabei helfen, den Fehler zu finden.
Danke
Peter

[Be@t]

Kurzform: Kopiere mal folgenden Code in Deinen Beitrag:

Code: Select all

<table border="0" cellpadding="1" cellspacing="1">
    <tbody>
        <tr>
            <td><a class="serendipity_image_link" href="/uploads/Schulanfang_Peter.jpg" ><!-- s9ymdb:24 --><img alt="" class="serendipity_image_center" src="/uploads/Schulanfang_Peter.serendipityThumb.jpg" style="width:200px" /></a></td>
            <td><a class="serendipity_image_link" href="/uploads/Fotos/Peter_jung_1.jpg" ><!-- s9ymdb:4 --><img alt="" class="serendipity_image_center" src="/uploads/Fotos/Peter_jung_1.serendipityThumb.jpg" style="width:200px" /></a></td>
            <td><a class="serendipity_image_link" href="/uploads/2013-07-20_20.25.58.jpg" ><!-- s9ymdb:6 --><img alt="" class="serendipity_image_center" src="/uploads/2013-07-20_20.25.58.serendipityThumb.jpg" style="width:200px" /></a></td>
        </tr>
    </tbody>
</table>

Ich habe das kurz in meinem Testblog nachgespielt. Bei mir sieht das dann so aus: https://www.s9y.dokumenzi.ch/archives/2 ... Peter.html

Ich bin wie folgt vorgegangen:
->neuer Eintrag erstellen
->Tabelle mit 1 Zeile und 3 Spalten ohne einer Angabe von Höhe oder Breite erstellen.
->In jede Spalte fügte ich dann ein Bild (Thumbnail) via Mediendatenbank ein. Den Code oben habe ich gemäss Deiner Vorgabe abgeändert (hoffentlich funktioniert er). Bei mir sieht der Code im Original so aus:

Code: Select all

<table border="0" cellpadding="1" cellspacing="1">
    <tbody>
        <tr>
            <td><a class="serendipity_image_link" href="/uploads/Test/20190930_Peter_Vertikal.jpg" title="Bild links, vertikal"><!-- s9ymdb:174 --><img alt="" class="serendipity_image_center" src="/uploads/Test/20190930_Peter_Vertikal.serendipityThumb.jpg" style="width:138px" title="Bild links, vertikal" /></a></td>
            <td><a class="serendipity_image_link" href="/uploads/Test/20190930_Peter_Spirale.jpg" title="Bild Mitte, Spiralen"><!-- s9ymdb:173 --><img alt="" class="serendipity_image_center" src="/uploads/Test/20190930_Peter_Spirale.serendipityThumb.jpg" style="width:138px" title="Bild Mitte, Spiralen" /></a></td>
            <td><a class="serendipity_image_link" href="/uploads/Test/20190930_Peter_Kugeln.jpg" title="Bild Rechts, Kugeln"><!-- s9ymdb:172 --><img alt="" class="serendipity_image_center" src="/uploads/Test/20190930_Peter_Kugeln.serendipityThumb.jpg" style="width:138px" title="Bild Rechts, Kugeln" /></a></td>
        </tr>
    </tbody>
</table>

Anmerkungen:

Achtung: Scheinbar befinden sich bei Dir Bild 1 + 3 direkt im Verzeichnis /uploads/, Bild 2 jedoch im Verzeichnis /uploads/Fotos/ (-> prüfe, ob das wirklich stimmt). Mein Tipp: Lege von Beginn weg grosszügig Verzeichnisse in der Mediendatenbank an und speichere möglichst wenig Bilder/Videos/Daten direkt ins /uploads/-Verzeichnis. So behälst Du einfacher die Übersicht.

Generell: Vorsicht mit Tabellen! Verwende möglichst keine fixe Breite (in Deinem Code: style="width:850px") weil das dann eben nicht skaliert und auf kleinen Bildschirmen (Mobile) nach rechts aus dem Bild läuft. Das passiert ja jetzt bereits, denn Deine 850px breite Tabelle reicht in den Bereich der Seitenleiste hinein.

Noch eine kurze Verständnisfrage zum Schluss: Mit welchem Editor arbeitest Du (siehe Einstellungen/Benutzer/Bearbeiten)? Ich verwende Serendipity-Vollständig (3. Punkt von oben).

Hoffe, geholfen zu haben.
Gruss
Be@t

[Grauhaupt]

Recht herzlichen Dank. Ich habe mal wieder festgestellt, ich bin noch nicht soweit wie ich es eigentlich dachte.
Der Quellcode hat funktioniert. Als Editor benutze ich CKEditor vollständig. Den Vorschlag mit den Verzeichnissen werde ich mir merken und sicherlich auch anwenden.
Gruß
Peter