Theme Twenty Fourteen Bilder außerhalb vom Frame

    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

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    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
    display:table;

    Ansonsten erreicht man das von Dir gewünschte Verhalten des Bildes normalerweise mit der Anweisung

    Code
    float:left;

    oder

    Code
    float:right;

    . 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?

    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

    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
    margin:8px;
margin-left:0;
float:left;

    rechts stehende Bilder:

    Code
    margin:8px;
margin-right:0;
float:right;

    Hierbei handelt es sich qua "Fern-Designing" natürlich nur um Annäherungswerte. :-P

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

    Man kann die Realität ignorieren - aber nicht die Folgen der ignorierten Realität.

    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

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden