Footer anpassen / Anordnung widgets (Theme twenty thirteen)

    Hallo Zusammen,

    folgende Situation ist bei meiner Wordpress Seite aufgetreten:

    Die Widgets innerhalb meines Footers (Theme twenty thirteen) sind alle untereinander angeordnet (siehe screenshot). Jedoch möchte ich die Widgets im Footer nebeneinander haben.

    Kann mir hierzu jemand bitte helfen bzw. eine "einfache" Lösung vorschlagen?

    Danke Euch bestens im Voraus für den Support!


    Viele Grüsse

    • 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

    schreib mal einen Link zum Blog, dann kann man sich das HTML/CSS anschauen.

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

    hast du irgendwas am CSS verändert? In der Demo sieht es so aus wie gewünscht: https://de.wordpress.org/themes/twentythirteen/
    Teste es mal ohne Inhalt im Sekundären Widget-Bereich.
    Ansonsten teste es mal, indem du ALLE Plugins deaktivierst.

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

    Hallo Zusammen,

    folgende Anpassungen wurden im Bereich "Zusätzliche CSS" durchgeführt:

    .entry-title { display:none; }
    .sidebar .entry-header,
    .sidebar .entry-content,
    .sidebar .entry-summary,
    .sidebar .entry-meta {
    max-width: 1200px;
    padding: 0 230px 0 0px;
    }
    .entry-content img.alignleft,
    .entry-content .wp-caption.alignleft {
    margin-left: 0px;
    }
    .entry-content img.alignright,
    .entry-content .wp-caption.alignright {
    margin-right: 0px;
    }
    .widget {
    clear: both;
    margin: 0 14.2em;
    width: 280px;
    }


    Danke und Gruss

    Ja, aber vermutlich doch die für die Frage wesentlichen …

    Wer .widget { clear: both; } definiert und sich dann wundert, dass die widgets nicht floaten … (nur nach dem im Thread gelesenen geschrieben, nicht auf die Seite geguckt).

    Affiliate-Partner: Wofür ist diese Definition gut? Wird sie an anderer Stelle gebraucht, z.B. Sidebar? Dann für die Footer-Widgets eine genauere Bestimmung wählen. Sonst raus damit.

    Gruß
    helix

    helix Natürlich. Nur kann da nicht viel floaten, wenn statt ursprünglich

    Code
    .site-footer .widget-area {
     margin: 0 auto;
     max-width: 1040px;
     width: 100%;
}

    folgendes gilt:

    Code
    .sidebar .site-footer .widget-area {
    left: -158px;
    max-width: 724px;
    position: relative;
}

    Hallo Zusammen,

    vielen Dank für Eure Nachrichten. Da ich noch Anfänger in dem Bereich bin, tu ich mich mit der Anpassung noch etwas schwer.

    Ich habe die CSS Ergänzungen vor allem wegen der Sidebar vorgenommen. Könnt ihr mir bitte noch mitteilen welche Anpassungen ich genau wieder ändern darf?

    Vielen Dank für die Hilfe.

    VG

    Wenn ich das so sehe und ich gehe mal davon aus, dass Du nur Deine genannten CSS eingefügt hast, macht Dir nur der Eintrag:

    .widget {
    clear: both;
    margin: 0 14.2em;
    width: 280px;
    }

    Probleme.

    DAbei ist das clear: both; das eigentliche Übel. Denn hier gibst Du an, alle vorhergehenden Ausrichtungen mit float (left oder right) auszusetzen. Demzufolge setzt er die folgenden Widgets untereinander, als sie "fliessend rechts bzw. links" auszurichten.

    Also nimm mal nur diese Zeile aus dem CSS raus und schau Dir das nochmal an. Dann reden wir darüber, wenn was anders wieder nicht so ist, wie es sein soll. ;O)

    GRuß

    Hallo misaf,

    vielen Dank für deine Hilfe und Antwort.

    Ich habe nun wie beschrieben die Zeile mit dem Vermerk "clear_both" herausgelöscht:

    .entry-title { display:none; }
    .sidebar .entry-header,
    .sidebar .entry-content,
    .sidebar .entry-summary,
    .sidebar .entry-meta {
    max-width: 1200px;
    padding: 0 230px 0 0px;
    }
    .entry-content img.alignleft,
    .entry-content .wp-caption.alignleft {
    margin-left: 0px;
    }
    .entry-content img.alignright,
    .entry-content .wp-caption.alignright {
    margin-right: 0px;
    }
    .widget {
    margin: 0 14.2em;
    width: 280px;
    }


    Jedoch hat sich nun an meinem Footer nichts geändert, die Widgets sind immer noch untereinander angeordnet.

    Kannst Du mir hier bitte noch weiterhelfen?

    Danke dir herzlich im Voraus!

    Hallo maxe,

    wie beschrieben habe ich alle Plugins deaktiviert jedoch hat dies keine positive Auswirkung auf den Footer gehabt.+

    Hast du evtl. noch eine Idee an was es liegen kann?

    Besten Dank im Voraus

    Also nach langem hin und her und einigen Tests, bin ich zum Schluss gekommen, dass allein die Zeile: margin: 0 14.2em; für diesen Darstellungsfehler schuld ist. Wenn Du diese Zeile rausnimmst, dann sind alle drei Widgets nebeneinander. Was ist mit diesem Eintrag gewolle?

    Für was margin verwendet wird weis ich. ;O) Nur was Du damit bezweeckst, wäre hilfreich zu wissen.

    Füge #tertiary vor das Widget ein in Deinem CSS, dann sollte das Problem gelöst sein:

    #tertiary .widget {
    margin: 0 14.2em;
    width: 280px;
    }

    Einmal editiert, zuletzt von misaf (25. April 2017 um 23:41)

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden