1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Tabelle ist krumm und schief

Dieses Thema im Forum "Design" wurde erstellt von Hänsje, 18. Dezember 2015.

Schlagworte:
  1. Hänsje

    Hänsje Well-Known Member

    Registriert seit:
    17. August 2015
    Beiträge:
    111
    Zustimmungen:
    0
    Halli-hallo,
    beim weiteren Umzug meiner Webseite von NetObjects Fusion (NOF) habe ich in der Kategory "Zeitung & Co." eine Tabelle eingebaut, weil ich dachte (!), dann wäre alles schön gerade. Weit gefehlt. Das krumme Ergebnis seht Ihr hier:
    http://wandernmithans.de/in-zeitung-co/
    Die Fotos, obwohl in der gleichen -Zeile- jeweils eingefügt sind mit dem Text nicht bündig. Beim Verarbeiten von Bildern habe ich ohnehin viel Arbeit, von wegen "Wysiwig"-nein.
    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?
    -Page Builder- liebe ich nicht; das gibt zu große leere weiße Abstände und laanges Scrollen.
    Gruß - Hänsje
     
  2. Frank9652

    Frank9652 Well-Known Member

    Registriert seit:
    10. Juni 2011
    Beiträge:
    742
    Zustimmungen:
    6
    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
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    folgenden Code einfügst
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Das musst du aber für jede Tabellenzeile separat tun.

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

    Gruß Frank
     
    #2 Frank9652, 20. Dezember 2015
    Zuletzt bearbeitet: 20. Dezember 2015
  3. Tubedesigner

    Tubedesigner Well-Known Member

    Registriert seit:
    24. April 2015
    Beiträge:
    2.048
    Zustimmungen:
    2
    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):


    <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/uploads/2015/09/z-suhl-das-freie-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/uploads/2015/09/z-dd-bayerwald-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/uploads/2015/10/SAAR-TV-Wanderhans-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>


     
  4. Tubedesigner

    Tubedesigner Well-Known Member

    Registriert seit:
    24. April 2015
    Beiträge:
    2.048
    Zustimmungen:
    2
    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.


    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.
     
  5. Frank9652

    Frank9652 Well-Known Member

    Registriert seit:
    10. Juni 2011
    Beiträge:
    742
    Zustimmungen:
    6
    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
     
    #5 Frank9652, 20. Dezember 2015
    Zuletzt bearbeitet: 20. Dezember 2015
  6. BvW

    BvW Well-Known Member

    Registriert seit:
    18. Februar 2014
    Beiträge:
    1.190
    Zustimmungen:
    0
    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 ;)
     
  7. SuMu

    SuMu Well-Known Member

    Registriert seit:
    5. Januar 2006
    Beiträge:
    6.301
    Zustimmungen:
    84
    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
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    oder
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    und die Größen Angaben der kleinen Fotos in der Tabelle prüfen.
     
    #7 SuMu, 21. Dezember 2015
    Zuletzt bearbeitet: 21. Dezember 2015
  8. Tubedesigner

    Tubedesigner Well-Known Member

    Registriert seit:
    24. April 2015
    Beiträge:
    2.048
    Zustimmungen:
    2
    Tatsachen hängen nicht von Deiner Zustimmung ab.


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


    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.


    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.


    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.


    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…
     
  9. Frank9652

    Frank9652 Well-Known Member

    Registriert seit:
    10. Juni 2011
    Beiträge:
    742
    Zustimmungen:
    6
    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
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden