Wie bekomme ich Content und Sidebar auf eine Ebene?

  • Gelöst akladnja1991

    (@akladnja1991)


    vor 9 Jahren, 7 Monaten

    Hallo!

    Ich habe eine Frage bezüglich CSS:
    Meine Webseite hat jetzt einen responsive design und der parameter width ändert sich je nach Gerät. Wenn ich jetzt die Content Area habe und meine Sidebar habe, dann liegen diese nicht mittig.

    Der Code:

    .site-content {
    float: left;
    width: 65.104166667%;
}
    .widget-area {
    float: right;
    width: 26.041666667%;
}

    Wie passe ich den Code an, dass beide Element mittig aneinander liegen und nicht an den Rändern vom Screen?

    Danke im Voraus!
    Lg. Amer

    Moderationshinweis: als „not a support question“ markiert, weil sich die Frage nicht auf WordPress sondern CSS bezieht. Das ist hier nicht unser Thema. Ich lasse den Thread aber offen. Vielleicht mag jemand antworten. Grüße, Bego

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • donaldtrump

    (@donaldtrump)

    vor 9 Jahren, 7 Monaten

    Liegen content und widget-area in einem gemeinsamen div-container? Wie breit ist dieser definiert?
    Und was ist mit den 9 Prozent Restbreite, margin, padding? Oder Leerfläche zwischen content und widget-area?

    PS- bin auch nicht der große Zampano, aber vielleicht hilft Dir mein Beitrag trotzdem.

    Thread-Starter akladnja1991

    (@akladnja1991)

    vor 9 Jahren, 7 Monaten

    Danke für die Hilfe!

    Liegen im selben wrapper aber unterschiedlichen divs – genauer in „primary“ und „secondary“. Der gemeinsame DIV hat eine width von 100% – vom Screen abhängig.

    Ja bei den restlichen 9 Prozent is es tatsächlich ne Leerfläche zwischen Content und widget area -weißt du vielleicht wie ich diese „Leerfläche“ entfernen kann?

    Bsp:
    ( A float left ) LEERFLÄCHE ( B float right )

    Danke 🙂

    donaldtrump

    (@donaldtrump)

    vor 9 Jahren, 7 Monaten

    Content und widget-area jeweils links bzw. rechts einen Rand=margin verpassen, so daß sie mehr in die Mitte gedrückt werden?

    Thread-Starter akladnja1991

    (@akladnja1991)

    vor 9 Jahren, 7 Monaten

    ok, dass is dann aber nicht mehr responsive oder täusche ich mich?^^

    donaldtrump

    (@donaldtrump)

    vor 9 Jahren, 7 Monaten

    Also Dein Layout soll sich per media-queries anpassen an das jeweilige Gerät, also z.B. smartphone?

    Beispiel:
    Auflösung ab 800px ist Dein site-content = 62,xxx%, widget-area = 26,xxx% und float rechts.
    Auflösung unter 800px site-content = 100%, widget-area = ebenfalls 100% und float links.
    Dann liegen die beiden Bereiche an der linken Kante untereinander.

    Die margin-Werte spielen eine Rolle, wenn die container-Breite plus margin-Wert über 100 Prozent hinausgehen, also diese Breite -in Deinem Fall offenbar der gesamte screen- effektiv gar nicht zur Verfügung steht. In diesem Fall wird das Layout natürlich umgebrochen.

    Ich probiere in ähnlichen Fällen ggfs. mit den Werten herum bis ich orientiert an den verschiedenen screen-Auflösungen ein optimales Layout erreicht habe.

    PS – Ich hoffe ich habe nichts Falsches gesagt, ich mache alles mit begrenztem, teils lückenhaftem Detail-Wissen und nach der trial- und error-Methode. Ich probiere solange bis es klappt (oder eben nicht) und irgendwann kann man dann jedes Layout pixelgenau hinkriegen.

    Thread-Starter akladnja1991

    (@akladnja1991)

    vor 9 Jahren, 7 Monaten

    Dankeeeee!!! 🙂
    Habs hinbekommen – mir fehlte nur das float: left^^

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 9 Jahren, 7 Monaten

    … und immer dran denken: Ist eine Frage beantwortet, bitte den Thread als „resolved“ markieren, weil wir uns sonst immer wieder längst erledigte Threads durchlesen. Danke.

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)

Das Thema „Wie bekomme ich Content und Sidebar auf eine Ebene?“ ist für neue Antworten geschlossen.