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

WP <5.0 Tabellenabstände in HTML-Widget werden ignoriert

Dieses Thema im Forum "Design" wurde erstellt von Funcoder, 23. Mai 2018.

  1. Funcoder

    Funcoder Member

    Registriert seit:
    23. Mai 2018
    Beiträge:
    17
    Zustimmungen:
    0
    Hallo zusammen!

    Habe ein Problem mit meinem HTML-Code, der nicht richtig auf meiner WP-Seite dargestellt wird. Diesen habe ich zuvor mit Hilfe des ziemlich alten aber sehr vertrauten Adobe Go Live 7 heraus kopiert, um ihn im HTML-Widget des WP-Themes "Courage" zu verwenden. Da ich so gut wie keinerlei HTML-Kenntnisse habe und die im Netz verfügbaren HTML-Editoren über nur sehr sporadische Funktionen verfügen, gerade was Tabellendesign angeht, war dies die einzig sinnvolle Möglichkeit für mich.

    Problem bei der Sache: WP 4.9.6 scheint die Tabellenattribute "cellspacing" und "cellpadding" komplett zu ignorieren. Wenn ich Tabellenabstände definieren möchte werden sie problemlos in Adobe Go Live sowie diversen HTML-Editoren angezeigt, jedoch nicht auf meiner WP-Seite (die noch nicht fertig und daher noch unveröffentlicht ist).

    Hier ein Beispiel:

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Wo liegt der Fehler und wie kann ich das Problem umgehen ohne gleich das ganze HTML-Widget mit Hilfe von Microthemer umformattieren zu müssen? Ich möchte nämlich dafür nicht extra das ganze Widget bzw. ".widget_custom_html" ändern weil sich die Anpassungen nur auf die eine Tabelle beziehen soll.
     
    #1 Funcoder, 23. Mai 2018
    Zuletzt bearbeitet: 23. Mai 2018
  2. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Du solltest in der Lage sein, diese Formatierung 'cellspacing' und 'cellpadding' im zusätzlichen CSS durch
    td {
    margin: 2px;
    padding: 0px;
    }
    zu erzielen.

    Solltest du mehr als eine Tabelle auf deiner Seite haben, musst du den Selektor 'td' eventuell noch näher eingrenzen.
     
    Funcoder gefällt das.
  3. Funcoder

    Funcoder Member

    Registriert seit:
    23. Mai 2018
    Beiträge:
    17
    Zustimmungen:
    0
    Das ist genau das Problem denn ich werde vermutlich noch weitere Tabellen einsetzen, sowohl im Blog, auf den Seiten als ggf. auch in Widgets, die dann aber keine Abstände haben sollen. Ich habe gelesen das es auch mit einer gesonderten Klasse funktionieren soll indem man z.B.

    .cellspacing td {padding:3px;}

    im zusätzlichen CSS einträgt. Dann ruft man diese Klasse der jeweiligen Tabelle im HTML-Code des Widgets durch

    <table class="cellspacing">

    auf. Das wäre zumindest eine Notlösung. Allerdings bin ich nicht wirklich mit dem Ergebnis zufrieden, da der Text in der Tabelle immernoch unten und nicht mittig zu den Grafiken ist. Habe das mal im Dateianhang dar gestellt. Zumindest der Abstand zwischen dem oberen Banner ist vorhanden aber schön sieht es trotzdem nicht aus. Zudem habe ich gerade fest gestellt das die Zentrierung der Grafiken innerhalb der Tabelle ebenfalls ignoriert wird.

    Tabelle.jpg

    Ich hatte mir das in etwa so vorgestellt:

    Tabelle 2.jpg

    Die Rahmenlinien muß man sich wegdenken, da sie nur Hilfslinien des Editors sind und in der Vorschau von Adobe Go Live nicht mehr angezeigt werden.
     
  4. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Da hast du richtig gelesen, wenn deine Tabelle eine CSS-Klasse hat (zB class="cellpadding")
    dann kannst du gezielt nur die <td>'s in dieser Tabelle ansprechen.
    Zu deinen sonstigen Problemen gibt es auch einfache CSS Lösungen:
    Schau doch mal, ob du deinen td's folgendes beibringen kannst:
    verical-align: middle;
    oder
    padding: 0 0 5px 0;

    text-align: center; (Vorsicht, wenn das nur für die erste Spalte gelten soll, dann müssen diese td's (zB <td class="mittig"> separat ansprechbar sein.
     
    Funcoder gefällt das.
  5. Funcoder

    Funcoder Member

    Registriert seit:
    23. Mai 2018
    Beiträge:
    17
    Zustimmungen:
    0
    Danke, hat super geklappt! :)
     
  6. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Ich würde das mit der Pseudoklasse td:first-child machen. So bleibt man flexibler.
     
  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