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

Theme Twenty Fourteen Bilder außerhalb vom Frame

Dieses Thema im Forum "Design" wurde erstellt von Rolf_M, 29. August 2016.

  1. Rolf_M

    Rolf_M Member

    Registriert seit:
    29. August 2016
    Beiträge:
    5
    Zustimmungen:
    0
    Hallo an die Forumsmitglieder
    WP 4.6, Theme: Twenty Fourteen, URL: http://www.naturfotografen-online.de/testwp/bildergalerie/testseite/
    Nachdem ich zwei Tage im Forum herumgsucht habe und leider zu meinem Thema nichts gefunden habe, meldete ich mich heute im Forum an um auf diesem Weg eventuell Hilfe zu bekommen. Ich arbeite schon länger mit Wordpress bin aber weit weg von perfekt. In einer Testseite nehme ich mir immer mal neue Themen vor. So möchte ich jetzt in Seiten etwas schreiben und Bilder mit umfließendem Text einbinden. Im Backend klappt das auch sehr gut im Frontend sieht das weniger gut aus, Ich denke, es ist ein Problem mit dem Theme Twenty Fourteen. Ich habe eine Tabelle mit 600 Pixel Breite. Innerhalb dieser Tabelle schreibe ich den Text und füge ein Bild (200 px) ein. Leider werden die Bilder im Frontend außerhalb der Tabelle angezeigt (Siehe URL). Wenn ich eine Galerie mit dem Plugin Lightboxgalerie erstelle bleibt diese innerhalb der Tabelle. Als zweites, wenn ein Bild angeklickt wird ist kein Backlink vorhanden. Muss man den manuell eintragen? Das wäre sehr mühsam. Vielleicht kann mir jemand weiterhelfen.
    Wenn ich nicht in der richtigen Kategoerie gelndet bin, bitte ich dies zu entschuldigen.
    MfG Rolf_M
     
  2. splendid-text-u-webdesign

    splendid-text-u-webdesign Well-Known Member

    Registriert seit:
    5. August 2016
    Beiträge:
    104
    Zustimmungen:
    4
    Hallo,

    zunächst sollte aufgrund der semantischen Bedeutung, die das HTML-Element <table> hat, in Deinem Fall keine Tabelle verwendet werden - denn die ist ausschließlich tabellarischen Daten vorbehalten. Du kannst das CSS-Verhalten einer Tabelle aber so erzeugen:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Ansonsten erreicht man das von Dir gewünschte Verhalten des Bildes normalerweise mit der Anweisung
    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!
    . In Deinem Fall scheint mir jedoch vor allem die Anlage als Tabelle eine wesentliche Problemursache zu sein. Was meinst Du mit Backlink - das bezeichnet eigentlich einen Link von einer externen auf Deine Website?
     
  3. Rolf_M

    Rolf_M Member

    Registriert seit:
    29. August 2016
    Beiträge:
    5
    Zustimmungen:
    0
    Hallo
    Danke für die schnelle Antwort. Ich dachte dass in einer Tabelle das ganze in einem "Rahmen" leichter zu machen wäre. Ich habe es jetzt ohne Tabelle probiert und es sieht genau so aus. Mit Backlink habe ich mich etwas vertan ich meinte einen Zurück-Link vom Bild auf die vorige Seite. In meinen ersten Versuchen mit HTML habe ich das mit dem "javascript:history.back() hinbekommen. Ich weiß ein paar Dinge in Wordpress, bin aber eher Anfänger. Im Anhang habe ich ein Bild vom Backend. Da sieht es gut aus. In einem anderen Theme (Twentysixteen) passte es, da ist die Inhaltsseite auch breiter. Ich habe das Theme Twentyfourteen auf 960 px Breite eingestellt. Vielleicht ist da der Fehler, weil es ja grundsätzlich breiter wäre. Doch der Inhaltsbereich müsste sich doch anpassen?
    Gruß Rolf_M
     

    Anhänge:

  4. splendid-text-u-webdesign

    splendid-text-u-webdesign Well-Known Member

    Registriert seit:
    5. August 2016
    Beiträge:
    104
    Zustimmungen:
    4
    Hallo,

    die Darstellung im Editor des Backends entspricht bei WordPress leider (zumeist) nicht der Live-Darstellung auf der Website.
    Das Problem liegt offenbar in den CSS-Klassen alignright bzw. alignleft, die eine große margin-Angabe setzen (-168px) und das jeweilige Bild dadurch zu weit nach außen schieben. Anders ausgedrückt: Die Bilder (hier: das <figure>-Element) müssten - ungefähr - mit folgenden CSS-Eigenschaften versehen werden:

    links stehende Bilder:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    rechts stehende Bilder:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Hierbei handelt es sich qua "Fern-Designing" natürlich nur um Annäherungswerte. :p
     
  5. Nevery

    Nevery Well-Known Member

    Registriert seit:
    15. Oktober 2013
    Beiträge:
    404
    Zustimmungen:
    0
    .full-width .site-content .wp-caption.alignleft, .full-width .site-content .wp-caption.alignright {margin:0px !important;}
    .full-width .site-content .wp-caption.alignleft {padding-right:20px;}
    .full-width .site-content .wp-caption.alignright {padding-left:20px;}

    Das funktioniert - getesteterweise - definitiv und sieht dann aus wie in im Screenshot Deines Backends.
     
  6. Rolf_M

    Rolf_M Member

    Registriert seit:
    29. August 2016
    Beiträge:
    5
    Zustimmungen:
    0
    Hallo Nevery
    Danke für die Tipps. Bin erst jetzt dazugekommen die Vorschläge von dir zu testen. Nach einigem hin und her habe ich die Werte auf 0 gesetzt und habe dadurch jetzt einen schönen Abschluss am linken und rechten Rand meiner Inhaltsseite. Damit ist das Thema erledigt.
    Gruß Rolf_M
     
  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