Tabelle ist krumm und schief

Hallo Hänsje!

Bezüglich der vertikalen Ausrichtung der Bilder:
Du solltest schon die Bilder alle in der richtigen Größe abspeichern, dann sollte es auch hinhauen.
Die Bilder haben zwar "äußerlich" alle die selbe Größe von 150x150 Punkt, aber es kommt auch auf die Punktdichte an.
Manche der Bilder sind mit 96 dpi pro Zoll abgespeichert, bei anderen Bildern fehlt der dpi-Wert komplett.
Keine Ahnung wie du das hinbekommen hast.
Wenn du alle Bilder mit 96 dpi abspeicherst, dann sollte alles in Reih und Glied sein (wenn du in deinen Zellen keine überflüssigen Leerzeichen hast).

P.S. Nach meiner Meinung reichen eigentlich 72 dpi.

Bezüglich der horizontalen Ausrichtung der Bilder mit dem linken Text:
Den Text bekommst du bündig (mit dem oberen Rand des Bildes), wenn du in der entsprechenden Zeile der Tabelle (Texteditor)anstelle

<td>

folgenden Code einfügst

<td style="vertical-align:top">

Das musst du aber für jede Tabellenzeile separat tun.

...wie immer befindet sich das Problem VOR dem Bildschirm. ;-)

Gruß Frank

Zitat von Hänsje

(...)
Was meint ihr:soll ich das einfach im "Visueller Editor" versuchen und nach jeder Zeile mit Bild eine -waagerechte Linie- einfügen, um ein Verspringen der Bilder zu vermeiden?
(...)

Also, so einfache Tabellen ohne besondere Funktionen (z.B. Sortierfunktion) und Design, kann man in Wordpress sehr effektiv und simpel anlegen, indem man sie zuerst in einer Textverarbeitung (z.B. Word) erstellt und dann von dort aus in die visuelle Ansicht des Editors von WordPress hineinkopiert und bei Bedarf dann dort noch weiterbearbeitet.

Du kannst außerdem auch (echte) Tabellen aus beliebigen Websites direkt aus der Browseransicht in eine Textverarbeitung kopieren und dort weiterverarbeiten und dann wieder nach WordPress kopieren.

Ich habe mir jetzt mal exemplarisch für Deine Tabelle diese kleine Arbeit gemacht (hat ca. 5 Minuten benötigt, also weniger Zeit als diesen Beitrag zu schreiben) und den daraus resultierenden Quellcode (ich habe lediglich in der Kopfzeile Höhe und Breite angepasst) mal hierher kopiert (s.u.)

Diesen brauchst Du nun nur noch in die Textansicht (weil es Quellcode ist) des WordPress-Editors reinkopieren.

Gehe dafür im Adminbackend von Wordpress einfach auf Deinen jetzigen Beitrag mit der beanstandeten Tabelle, wähle dort die Textansicht, mach Dir ganz oben mit ein paar Leerzeilen Platz (wg. der Übersicht) und füge dann den Quellcode ein und speichere den Beitrag ab (Aktualisieren).

Wechsel dann in die visuelle Ansicht und verschiebe (oder kopieren/ausschneiden und wieder einfügen) Dir aus der alten Tabelle in die jeweils entsprechende Zeile der rechten Spalte sämtliche Bilder in die neue Tabelle.

Speichere nun wieder alles ab und schau Dir dann das Ergebnis per Beitrag ansehen (am besten in einem neuen Fenster) an.

Wenn alles i.O. ist, lösche in der visuellen Ansicht Deines WordPress-Editors die alte Tabelle und speichre nochmal alles ab, bei Bedarf kannst Du nun noch in der visuellen Ansicht (oder auch in der Textansicht, wenn Du weißt was Du machst) nachbessern.

Gutes Gelingen…

Quellcode (alles in grün kopieren und einfügen):


[COLOR=#006400]<table style="height: 1500px;" width="100%">
<tbody>
<tr>
<td width="102"><strong>Datum</strong></td>
<td width="180"><strong>Zeitung &amp; Co. </strong></td>
<td width="208"><strong>Titel</strong></td>
<td width="125"><strong>Link</strong></td>
</tr>
<tr>
<td width="102">15.06.2002</td>
<td width="180">Computerbild</td>
<td width="208">Rubrik „100 neue interessante Webseiten“</td>
<td width="125"></td>
</tr>
<tr>
<td width="102">25.06.2003</td>
<td width="180">Saarländischer Rundfunk</td>
<td width="208">Interview &gt;Die Webseite „Wandern mit Hans“&lt;
mit Herrn Roland Stigulinsky</td>
<td width="125"></td>
</tr>
<tr>
<td width="102">28.08.2005</td>
<td width="180">Coburger Tageblatt</td>
<td width="208">„Königssee – Nordsee – Deutschland umsonst“</td>
<td width="125"></td>
</tr>
<tr>
<td width="102">29.08.2005</td>
<td width="180">Radio Eins, Coburg</td>
<td width="208">Live-Interview, (echt gudd!)</td>
<td width="125"></td>
</tr>
<tr>
<td width="102">31.08.2005</td>
<td width="180"> Das freie Wort, Suhl</td>
<td width="208"> „Königssee-Nordsee /
von einem trampenden aber treuen Ehemann“</td>
<td width="125"> <a href="http://wandernmithans.de/wp-content/upl…e-wort-suhl.pdf">z-suhl-das-freie
-wort (PDF)</a></td>
</tr>
<tr>
<td width="102">03.09.2005</td>
<td width="180">Saarbrücker Zeitung</td>
<td width="208">„Königssee – Nordsee –
für null Euro quer durch Deutschland“</td>
<td width="125"></td>
</tr>
<tr>
<td width="102">14.11.2006</td>
<td width="180">Saarbrücker Zeitung</td>
<td width="208">„Die Hütte ist das Ziel beim Wanderhans“ (stimmt!)</td>
<td width="125"></td>
</tr>
<tr>
<td width="102">06.09.2009</td>
<td width="180">L‘ Adige (Italien)</td>
<td width="208">„Monaco – Venezia a piedi“</td>
<td width="125"></td>
</tr>
<tr>
<td width="102">09.09.2009</td>
<td width="180"> Dolomiten (Italien)</td>
<td width="208"> „Auf den Spuren Goethes / Abenteur: Hans Abel, 70,
wandert von München nach Venedig“</td>
<td width="125"></td>
</tr>
<tr>
<td width="102">14.10.2009</td>
<td width="180">Saarbrücker Zeitung</td>
<td width="208">„Mit Goethe und Gitarre unterwegs“</td>
<td width="125"></td>
</tr>
<tr>
<td width="102">09.07.2010</td>
<td width="180">Bayerwaldecho</td>
<td width="208">„Von Frankreich nach Tschechien“</td>
<td width="125"><a href="http://wandernmithans.de/wp-content/upl…erwald-echo.pdf">z-dd-bayerwald
-echo (PDF) </a></td>
</tr>
<tr>
<td width="102">Nov. 2010</td>
<td width="180">Globus online</td>
<td width="208">Hüttengaudi</td>
<td width="125"></td>
</tr>
<tr>
<td width="102">09.08.2011</td>
<td width="180">Le Républicain Lorrain (Frankreich)</td>
<td width="208">„La Sarre, Metz … jusqu’à la Manche“</td>
<td width="125"></td>
</tr>
<tr>
<td width="102">18.08.2011</td>
<td width="180">L‘ Union, Reims (Frankreich)</td>
<td width="208">„Sur le sentier de la guerre … et de la paix“</td>
<td width="125"></td>
</tr>
<tr>
<td width="102"> 04.11.2011</td>
<td width="180">Saarländischer Rundfunk SR 3</td>
<td width="208">„Wanderer: Zu Fuß bis zum Atlantik“ <a href="http://wandernmithans.de/wp-content/upl…rhans-16-mb.avi">Saar-TV, Fernsehbericht über
„Saarland-Atlantik“ und „Goetheweg“ (16 MB)</a></td>
<td width="125"></td>
</tr>
<tr>
<td width="102"> 13.10.2012</td>
<td width="180">Saarbrücker Zeitung</td>
<td width="208">„Wanderhans radelt mit der Gitarre im Gepäck
ans Mittelmeer“</td>
<td width="125"></td>
</tr>
<tr>
<td width="102"> 16.09.2013</td>
<td width="180">Saarbrücker Zeitung</td>
<td width="208">„Wanderhans trifft auf Meerjungfrau“</td>
<td width="125"></td>
</tr>
<tr>
<td width="102"></td>
<td width="180"></td>
<td width="208"></td>
<td width="125"></td>
</tr>
</tbody>
</table>

[/COLOR]

Zitat von Frank9652

(...)
Manche der Bilder sind mit 96 dpi pro Zoll abgespeichert, bei anderen Bildern fehlt der dpi-Wert komplett.
Keine Ahnung wie du das hinbekommen hast.
Wenn du alle Bilder mit 96 dpi abspeicherst, dann sollte alles in Reih und Glied sein (wenn du in deinen Zellen keine überflüssigen Leerzeichen hast).
(...)

Das ist mit Verlaub Unfug, denn DPI ist eine relative Maßeinheit, sie bezieht sich auf ein festes unveränderliches Endformat (z.B. auf Papier), ein solches festes Endformat existiert aber für die Darstellung auf Bildschirmen nicht und wegen der heute schier unendlichen Vielzahl der Endgeräte und ihrer völlig voneinander abweichenden darstellbaren absoluten Pixelzahlen (also ihren jeweils auf die Darstellungsgröße völlig verschiedenen eigenen DPI-Werten) weniger denn je.

Einzig und allein entscheidend für die Darstellung von Bildern in Webanwendungen sind die absoluten Pixelzahlen und die Skalierung der Bilder per entsprechendem Darstellungsbefehl (wahrscheinlich meinst Du diese im Prinzip auch, warst aber dabei gedanklich auf Abwegen), der aber mit dem DPI-Wert des Bildes nichts am Hut hat.

Zitat

(…)P.S. Nach meiner Meinung reichen eigentlich 72 dpi. (…)

1 dpi oder 1000 dpi oder was auch immer, in diesem Zusammenhang völlig egal, entscheidend sind die absoluten Pixelzahlen und wenn Du mir das nicht glauben magst, probiere es selbst aus.

Sorry Tubedesigner, so ganz stimme ich dir nicht zu.
Wenn die die Thumbnailbilder in der rechten Spalte anschaust, dann erscheinen sie unterschiedlich groß obwohl sie alle 150x150 Punkt Kantenlänge haben. Manche sind mit 96 dpi abgespeichert und manche enthalten überhaupt keine dpi Angaben.
Ob ein Bild mit 72 dpi oder 1000 dpi abgespeichert wird hat schon Auswirkungen - zumindest auf die Dateigröße.
Irgendwie müssen sich aber die fehlenden DPI-Angaben auf die Darstellung auswirken, ansonsten wären die Thumbnails alls in Reih und Glied (vertikal gesehen) und nicht so versetzt.
HIER mal ein Beispiel von mir wie es sein sollte. Die Thumbnals sind zwar nur 100x100 groß mit 72 dpi und befinden sich auf der linken Seite, aber ansonsten das selbe Prinzip.

Gruß Frank

Guten morgen zusammen,

bei jedem Bild steht eine andere Darstellungsgröße mal ist es 77x77 oder 88x88 usw. wie soll dar, auch bei gleich großem Ursprungsbild, eine vernünftige Darstellung raus kommen? Also Quelltext säubern, Angaben vergleichen und korrigieren und dann wird das schon ;-)

Zitat von BvW

Guten morgen zusammen,

bei jedem Bild steht eine andere Darstellungsgröße mal ist es 77x77 oder 88x88 usw. wie soll dar, auch bei gleich großem Ursprungsbild, eine vernünftige Darstellung raus kommen? Also Quelltext säubern, Angaben vergleichen und korrigieren und dann wird das schon ;-)

Dazu dann bitte, die Fotos vor dem Hochladen optimieren, möglichst immer nur eine Größe (die für dich sinnvolle Größe, die dein Theme darstellen kann) hochladen, dazu dann im WP Admin - Dashboard - Einstellungen - MEDIEN - Angaben prüfen.

Bei dir steht so was in den Foto-Infos

150px × 150px (Skaliert zu 82px × 82px)

oder

150px × 150px (Skaliert zu 71px × 71px)

und die Größen Angaben der kleinen Fotos in der Tabelle prüfen.

Zitat von Frank9652

(...) so ganz stimme ich dir nicht zu.

Tatsachen hängen nicht von Deiner Zustimmung ab.

Zitat

Wenn die die Thumbnailbilder in der rechten Spalte anschaust, dann erscheinen sie unterschiedlich groß obwohl sie alle 150x150 Punkt Kantenlänge haben.

Weil diese mittels von Browsern interpretierbaren Befehlen einer Auszeichnungssprache skaliert wurden.

Zitat

Manche sind mit 96 dpi abgespeichert und manche enthalten überhaupt keine dpi Angaben.

Was einen Browser nicht interessiert, aber ein DTP-Programm oder manche Bildbearbeitung (je nach Einstellung), weil die aber eben (auch) für die anschließende Papierausgabe gedacht sind.

Wenn ein Fahrzeug mit einer bestimmten Geschwindigkeit (auch eine relative Größe) unterwegs ist und man entweder die Strecke oder die Zeit kennt, kann man jeweils auf die fehlende Größe schließen, wenn aber dieses Fahrzeug sich auf einem Zug bewegt, der mit unbekannter Geschwindigkeit unterwegs ist, kann man das nicht, auch wenn die Geschwindigkeit des Fahrzeuges bekannt ist.

Der Zug ist in dieser Metapher das Endgerät bzw. sein grafisches Anzeigegerät und dessen Einstellungen.

Man könnte natürlich ein Script schreiben, welches den DPI-Wert einer Grafik ausliest und diese darauf fußend skaliert, entweder direkt die Grafik oder indem es die Befehle der umgebenden Auszeichnungssprache manipuliert, das macht aber WordPress (sinnvoller Weise) nicht.

Zitat

Ob ein Bild mit 72 dpi oder 1000 dpi abgespeichert wird hat schon Auswirkungen - zumindest auf die Dateigröße.

Nein, es sei denn, man verändert die absolute Pixelzahl, wenn ein Bild z.B. genau 1000x1000 Pixel groß ist und man definiert nur die DPI-Zahl um, ändert sich die Pixelzahl nicht, sie beträgt danach immer noch genau 1000x1000 Pixel, das Bild wurde nicht verändert.

Allerdings gibt es Programme zur Grafikbearbeitung, die je nach Einstellung, bei einer Änderung der DPI-Zahl die absolute Pixelzahl verändern und diese könnten den Grund für Deine irrige Annahme gegeben haben.

Dies hat aber nichts damit zu tun, dass eine DPI-Zahl für die Darstellung einer Grafik in einem Browser ohne jede Relevanz ist.

Zitat

Irgendwie müssen sich aber die fehlenden DPI-Angaben auf die Darstellung auswirken, ansonsten wären die Thumbnails alls in Reih und Glied (vertikal gesehen) und nicht so versetzt.

Der Autor hat sie (vermutlich in der visuellen Ansicht ) skaliert (was sich im Quellcode auswirkt), die jeweils dargestellten Grafiken selbst wurden in ihrer absoluten Größe dadurch aber nicht angetastet.

Zitat

HIER mal ein Beispiel von mir wie es sein sollte. Die Thumbnals sind zwar nur 100x100 groß mit 72 dpi und befinden sich auf der linken Seite, aber ansonsten das selbe Prinzip. (...)

Auch hier wurden die Grafiken mit entsprechenden Befehlen (auf genau ihre absolute Pixelzahlen) skaliert und das völlig unabhängig von ihrer DIP-Zahl.

Du hast da wirklich etwas grundsätzlich falsch verstanden…

ok habe da falsch gelegen.
Hatte mir den Quellcode der Seite nicht angesehen, sondern mir ein paar der Bilder runtergeladen und unter die Lupe genommen.
Deshalb hatte ich auch nicht gemerkt dass die Bilder unterschiedlich skaliert sind.
Auch wenn die dpi Angaben eines Bildes für einen Browser nicht relevant ist, ist es doch absolut ungewöhnlich (und habe ich zum ersten mal gesehen) dass die dpi Angaben innerhalb eines Bildes fehlen.

Gruß Frank