Content links und rechts einfassen

    Hallo, ich möchte gern den Contentbereich auf meiner Seite einfassen. Allerdings weiß ich nicht wie ich fangen soll. Zur Veranschaulichung habe ich es jetzt mal mit einem Border 200px gelöst. Natürlich funktioniert dies nicht. Wird die Seite mit geringer Auflösung angezeigt, bleibt der Border natürlich gleich und nur der Contentbereicht verkleinert sich.



    Ich möchte aber, dass die Seiten sich dann verkleinern und der Content gleich bleibt. Bis die Auflösung halt so klein wird, dass auch der Content sich anpasst. Dies soll aber nicht auf der Startseite der Fall sein, sondern nur auf den Beiträgen und Kategorien. Daher war meine Überlegung dies über die Seitenklassen zu regeln. Ich könnte ja dann jeder Seite die Klasse zuweisen. Außer man kann die Startseite irgendwie ausschließen.


    Quasi soll die Startseite Full Width sein und die Beiträge so eine Art Boxed. Bei Full Width schweift das Auge immer ab und wenn es so eingefasst ist, bleibt man besser beim Text.


    Ich hoffe ihr könnt mir folgen und habt vielleicht einen Lösungsansatz für mich.


    LG und vielen Dank

    Im Screenshot ist doch links und rechts der Rand zu sehen. Diesen habe ich jetzt als Border dort eingefügt. Halt nur um zu sehen wie es aussehen soll. Praktisch ist das ja Blödsinn. Ich weiß aber nicht, wie ich anders den Rand umsetzen soll. Aber aussehen soll es so. Wie oben beschrieben soll der Contentbereich an den Seiten eingefasst werden und sich farblich etwas absetzen.


    LG René

    Stimmt, mit Border ist das Blödsinn :D . Versuche es mal damit:


    Lösche das hier im custom.css (ab Zeile 119):

    Code
    .website-content.without-image {
padding-top: 10px;
border-left: 200px solid #f2f2f2;
border-right: 200px solid #f2f2f2;
}


    und füge stattdessen das hier ins custom.css ein:


    Code
    .website-content.without-image {
background: #f2f2f2;
padding-top: 0;
}

.website-content.without-image .wrapper-website {
background: #e7e6e6;
padding-top: 10px;
}

    Hallo Anka und chr-hl,

    ich habe die Anpassungen jetzt vorgenommen und es funktioniert. Vielen Dank. Auch habe ich noch padding-left und right eingefügt um so den Abstand noch ein wenig anzupassen. Dann wird es aber am Smartphone gequetscht angezeigt. Also habe ich es jetzt so gelöst...


    Code
    .right_column > div {
    background: transparenturl(../images/fade-left-column.png) 100% 0 no-repeat;    min-height: 250px;    padding: 6px 15px 30px 0;    margin: -8px 15px 0px 0px;}

    "margin: -8px 15px 0px 0px;"


    Da spricht doch nichts dagegen oder? LG René