Abstand narrowcolumn zu sidebar

USa.

Ich wende mich heute wieder einmal mit einer Frage an Euch: Ich habe die Breite der Narrowcolumn in meinem Blog auf 500 Pixel eingestellt. Ich möchte jetzt den Abstand der Narrocolumn zur Sidebar um 30 Pixel vergrößern, bzw. den Abstand zur Sidebar generell beeinflussen. Wo kann ich das tun.

Hier ein Auszug aus meiner CSS-Style:

Code

/* Begin Structure */
body {
    margin: 0 0 20px 0;
    padding: 0; 
    }


#page {
    background-color: white;
    margin: 20px auto;
    padding: 0;
    width: 760px;
    border: 1px solid #959596;
    }


#header {
    background-color: white;
    margin: 0 0 0 1px; 
    padding: 0; 
    height: 200px; 
    width: 758px;
    }


#headerimg {
    margin: 0;
    height: 200px;
    width: 100%;
    }


.narrowcolumn {
    float: left;
    padding: 0 0 20px 45px;
    margin: 0px 0 0;
    width: 500px;
    }


.widecolumn {
    padding: 10px 0 20px 0;
    margin: 5px 0 0 150px;
    width: 500px;
    }


.post {
    margin: 0 0 40px;
    text-align: justify;
    }


.widecolumn .post {
    margin: 0;
    }


.narrowcolumn .postmetadata {
    padding-top: 5px;
    }


.widecolumn .postmetadata {
    margin: 30px 0;
    }


.widecolumn .smallattachment {
    text-align: center;
    float: left;
    width: 128px;
    margin: 5px 5px 5px 0px;
}


.widecolumn .attachment {
    text-align: center;
    margin: 5px 0px;
}


.postmetadata {
    clear: left;
}


#footer {
    padding: 0;
    margin: 0 auto;
    width: 760px;
    clear: both;
    }


#footer p {
    margin: 0;
    padding: 20px 0;
    text-align: center;
    }
/* End Structure */

Alles anzeigen

Werbepost

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

jottlieb

Padding und Margin sind für Abstände zuständig.
Abstände: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets (Margin)
Abstände: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets (Padding)

USa.

Vielen Dank! Hat bestens funktioniert, Ihr seid Klasse und absolut flink :).

USa.

Es ergibt sich nunmehr folgendes Problem: Wenn ich die Einstellungen wie oben beschrieben ändere funktioniert alles gut im Firefox. Im IE wird aber die Sidebar unter die Beiträge verschoben. Wie könnte ich dem entgegen steuern. (Habe den Blog erstmal wieder auf die ursprünglichen Einstellungen zurückgesetzt...)

jottlieb

Das "Gleichgewicht" muss stimmen.
Wenn z.B. der Contentbereich nur 700 Pixel breit ist, der Postbereich 500 Pixel, die Sidebar 160 Pixel und du einen Außenabstand von 40 Pixel hast. Dann stimmt alles, wenn du aber den Außenabstand auf 60 Pixel erhöhst ohne etwas anderes um 20 Pixel schmaler zu machen (z.B. die Sidebar oder den Postbereich), so haut das nicht mehr mit der Gesamtbreite hin und die Sidebar verschiebt sich.

USa.

Irgendwie komme ich nicht weiter. Ich habe jetzt schon einiges ausprobiert, aber im IE wird die Darstellung immer wieder zerhauen. Hier nochmal die Frage: Kann mir jemand genau sagen an welcher Stelle ich welche px-Zahl ändern muss, damit die Darstellung der Beiträge in 500px mit einem Abstand von 30px zur Sidebar erfolgt, ohne das die Sidebar im IE nach unten verschoben wird. Das Prinzip welches jottlieb beschrieben hat ist j aeigentlich durchaus klar :oops: ...

Hier die CSS-Style:

Code

/* Begin Structure */
body {
    margin: 0 0 20px 0;
    padding: 0; 
    }


#page {
    background-color: white;
    margin: 20px auto;
    padding: 0;
    width: 760px;
    border: 1px solid #959596;
    }


#header {
    background-color: white;
    margin: 0 0 0 1px; 
    padding: 0; 
    height: 200px; 
    width: 758px;
    }


#headerimg {
    margin: 0;
    height: 200px;
    width: 100%;
    }


.narrowcolumn {
    float: left;
    padding: 0 0 20px 45px;
    margin: 0px 0 0;
    width: 470px;
    }


.widecolumn {
    padding: 10px 0 20px 0;
    margin: 5px 0 0 150px;
    width: 470px;
    }


.post {
    margin: 0 0 40px;
    text-align: justify;
    }


.widecolumn .post {
    margin: 0;
    }


.narrowcolumn .postmetadata {
    padding-top: 5px;
    }


.widecolumn .postmetadata {
    margin: 30px 0;
    }


.widecolumn .smallattachment {
    text-align: center;
    float: left;
    width: 128px;
    margin: 5px 5px 5px 0px;
}


.widecolumn .attachment {
    text-align: center;
    margin: 5px 0px;
}


.postmetadata {
    clear: left;
}


#footer {
    padding: 0;
    margin: 0 auto;
    width: 760px;
    clear: both;
    }


#footer p {
    margin: 0;
    padding: 20px 0;
    text-align: center;
    }
/* End Structure */




/*    Begin Headers */
h1 {
    padding-top: 70px;
    margin: 0;
    }


h2 {
    margin: 30px 0 0;
    }


h2.pagetitle {
    margin-top: 30px;
    text-align: center;
}


#sidebar h2 {
    margin: 5px 0 0;
    padding: 0;
    }


h3 {
    padding: 0;
    margin: 30px 0 0;
    }


h3.comments {
    padding: 0;
    margin: 40px auto 20px ;
    }
/* End Headers */






/* Begin Images */
p img {
    padding: 0;
    max-width: 100%;
    }


/*    Using 'class="alignright"' on an image will (who would've
    thought?!) align the image to the right. And using 'class="centered',
    will of course center the image. This is much better than using
    align="center", being much more futureproof (and valid) */


img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }


img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }


img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }


.alignright {
    float: right;
    }


.alignleft {
    float: left
    }
/* End Images */






/* Begin Lists


    Special stylized non-IE bullets
    Do not work in Internet Explorer, which merely default to normal bullets. */


html>body .entry ul {
    margin-left: 0px;
    padding: 0 0 0 30px;
    list-style: none;
    padding-left: 10px;
    text-indent: -10px;
    } 


html>body .entry li {
    margin: 7px 0 8px 10px;
    }


/*.entry ul li:before, #sidebar ul ul li:before {
    content: "\00BB \0020";
    }*/


.entry ol {
    padding: 0 0 0 35px;
    margin: 0;
    }


.entry ol li {
    margin: 0;
    padding: 0;
    }


.postmetadata ul, .postmetadata li {
    display: inline;
    list-style-type: none;
    list-style-image: none;
    }


#sidebar ul, #sidebar ul ol {
    margin: 0;
    padding: 0;
    }


#sidebar ul li {
    list-style-type: none;
    list-style-image: none;
    margin-bottom: 15px;
        padding: 0;
    }


#sidebar ul p, #sidebar ul select {
    margin: 5px 0 8px;
    }


#sidebar ul ul, #sidebar ul ol {
    margin: 5px 0 0 0px;
    }


#sidebar ul ul ul, #sidebar ul ol {
    margin: 0 0 0 10px;
    }


ol li, #sidebar ul ol li {
    list-style: decimal outside;
    }


#sidebar ul ul li, #sidebar ul ol li {
    margin: 3px 0 0;
    padding: 0;
    }
/* End Entry Lists */






/* Begin Form Elements */
#searchform {
    margin: 10px auto;
    padding: 5px 3px; 
    text-align: center;
    }


#sidebar #searchform #s {
    width: 108px;
    padding: 2px;
    }


#sidebar #searchsubmit {
    padding: 1px;
    }


.entry form { /* This is mainly for password protected posts, makes them look better. */
    text-align:center;
    }


select {
    width: 130px;
    }


#commentform input {
    width: 170px;
    padding: 2px;
    margin: 5px 5px 1px 0;
    }


#commentform textarea {
    width: 100%;
    padding: 2px;
    }


#commentform #submit {
    margin: 0;
    float: right;
    }
/* End Form Elements */






/* Begin Comments*/
.alt {
    margin: 0;
    padding: 10px;
    }


.commentlist {
    padding: 0;
    text-align: justify;
    }


.commentlist li {
    margin: 15px 0 3px;
    padding: 5px 10px 3px;
    list-style: none;
    }


.commentlist p {
    margin: 10px 5px 10px 0;
    }


#commentform p {
    margin: 5px 0;
    }


.nocomments {
    text-align: center;
    margin: 0;
    padding: 0;
    }


.commentmetadata {
    margin: 0;
    display: block;
    }
/* End Comments */






/* Begin Sidebar */
#sidebar
{
    padding: 20px 0 10px 0;
    margin-left: 545px;
    width: 190px;
    }


#sidebar form {
    margin: 0;
    }
/* End Sidebar */






/* Begin Calendar */
#wp-calendar {
    empty-cells: show;
    margin: 10px auto 0;
    width: 155px;
    }


#wp-calendar #next a {
    padding-right: 10px;
    text-align: right;
    }


#wp-calendar #prev a {
    padding-left: 10px;
    text-align: left;
    }


#wp-calendar a {
    display: block;
    }


#wp-calendar caption {
    text-align: center;
    width: 100%;
    }


#wp-calendar td {
    padding: 3px 0;
    text-align: center;
    }


#wp-calendar td.pad:hover { /* Doesn't work in IE */
    background-color: #fff; }
/* End Calendar */






/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
    cursor: help;
    }


acronym, abbr {
    border-bottom: 1px dashed #999;
    }


blockquote {
    margin: 15px 30px 0 10px;
    padding-left: 20px;
    border-left: 5px solid #ddd;
    }


blockquote cite {
    margin: 5px 0 0;
    display: block;
    }


.center {
    text-align: center;
    }


hr {
    display: none;
    }


a img {
    border: none;
    }


.navigation {
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 60px;
    }
/* End Various Tags & Classes*/






/* "Daisy, Daisy, give me your answer do. I'm half crazy all for the love of you.
    It won't be a stylish marriage, I can't afford a carriage.
    But you'll look sweet upon the seat of a bicycle built for two." */

Alles anzeigen

USa.

Kann mir jemand weiterhelfen?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Abstand narrowcolumn zu sidebar

Jetzt mitmachen!