Sidebar richtig positionieren

  • Hallo,

    erstmal vorweg hier meine Seite http://minestarm.de

    der code von der header.php geht bis zum button der den banner schließt hier habe ich alle divs geschlossen,

    die index.php hätte ich so aufgeteilt:

    dann noch der css code (ein ausschnitt der hoffentlich reicht):


    d.h. 3 div tags einmal wp-content (rot) dann beiträge (blau) und die sidebar (gelb) nur warum verschiebt sich die sidebar immer mit dem ersten post mit wie bekomme ich die ganz nach oben so dass blau und gelb sich nebeneinander befinden.

    in der footer.php habe ich auch alle divs geschlossen dort befinden sich am ende nur noch das body und html tag des headers ...

    vlt stell ich mich nur an bin aber wirklich ratlos, wäre dankbar für jede hilfe auch wenn euch was jetzt nicht mit der sidebar zu tun hat auffällt :)

    Mit freundlichen Grüßen
    Rene

    • 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

  • ich hoffe das kommt nicht doof rüber aber ich push das mal, habe unteranderem einen kleinen zeitdruck und wäre sehr dankbar wenn mir jemand helfen kann ... falls infos fehlen kein problem reich ich nach ich hoffe aber es ist verständlich erklärt :)

    MfG Rene

  • Hallo Rene

    Du hast zwei Fehler drin:

    1.) du hast zwei Div's mit der ID "beiträge" dirn -> das "darf" man nicht. ID dürfen nur einmal vorkommen (By the way: vermeide bitte in Zukunft auch Umlaute im Code -> das kann bei bestimmten Systemen zu Problemen führen).

    2.) rufst du zwei Divs (hier beide "beiträge" was ansich schon falsch ist, siehe oben) mit einer weite von 700px und float:left VOR der Sidebar auf -> das führt dazu, dass die Sidebar erst neben dem zweiten Div angezeigt/ausgegeben wird. Nähere Infos warum das so ist findest du wenn du dich mit dem html-box-modell beschäftigst (insbesondere auch dem dokumentenfluss von html). Beheben kannst du dass, indem du die Sidebar VOR oder direkt NACH dem ERSTEN Div "beiträge" aufrufst.

    LG
    pixselig

  • Danke pixselig für die Antwort, du hast dir wahrscheinlich den quelltext angeschaut, wegen der loop wiederholt der das div "beiträge" immer wieder und dann erst nach dem letzten "beiträge" wird die sidebar aufgerufen ich verstehe ^^ :)

    Werde mich da mal umschauen hilft mir auf alle Fälle weiter, fällt euch noch was auf oder wenn ihr noch mehr Tipps habt, immer her damit :)

    MfG Rene

  • Ah ok. Dann baue um den loop ein div welchem du eine breite von 700px gibst und ein float:left mitgibst. Innerhalb des loops verwende dann anstatt ID einfach klassen, da ist eine wiederholung egal.

    LG
    PS: ja, habe mir nur deine Seite und nicht den Code von oben angesehen.

    Einmal editiert, zuletzt von pixselig (6. Oktober 2013 um 14:47)

  • css ergänzen:

    Code
    #beitraege {width: 700px; float: left}

    nicht getestet.

    wieters musst du dann auch den loop in der category.php und eventuell archive.php anpassen.

  • Footer

    Großes Danke!

    Sidebar funktioniert einwandfrei! Jetzt hab ich nur noch ein Problem dass mein Footer nicht so richtig mitspielt :(

    wenn mann sich diese Seite auf der ich ein wenig übertrieben habe, mal anschaut sollte der footer doch trzdm sich ganz unten befinden: http://www.minestarm.de/?p=20#comment-8

    footer.php:

    HTML
    <div id="fusszeile">
        <!-- Hier ist der ganze Inhalt meiner Fußzeile -->
    </div>
    
    
    <?php wp_footer(); ?>        <!-- Don't forget analytics -->    </body>
    </html>

    und die css des div´s sieht so aus:

    Code
    #fusszeile {
        background-image:url(Bilder/fusszeile.png);
        width:100%;
        background-repeat:repeat-x;
        height:350px;
        margin:0 auto;
        margin-top:200px;
        margin-bottom:-1000px;
        position:absolute;
    }

    hier hab ich mit margin-bottom oder bottom verschiedene position rumprobiert bin da aber nicht wirklich weit gekommen es hängt einfach an dieser einen stelle fest, auch beim rauszoomen auf einer normalen seite ist ein abstand ??

    Wie krieg ich dass jetzt da unten hin? Habe ich ein css-"Attribut" vernachlässigt ?

    MfG Rene

Jetzt mitmachen!

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