Hintergrund: Der ganze Container weiß?

gossipgirlz

Ich probiere nun schon ne ganze Weile rum.. aber ich bekomm es einfahc nicht hin.

Ich will auf meinem Blog den ganzen Container weiß - wenn man einen Einzel-Beitrag wie den hier öffnet, sieht man, wie bescheuert das jetzt gerade aussieht.

Ich will das bis unten im ganzen Block weiß haben...

Kann mir da jemand helfen?

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

LuNeX

schau mal in diesen Thread: http://http://forum.wordpress-deutschland.org/design/26349-hintergrundfarbe-aendern.html

Simbo hatte mir heute bei einer ähnlichen Frage geholfen.

Deine Farbangabe müßte dann #FFFFFF sein.

Ich hoffe dir damit vielleicht helfen zu können.

Simbo

Hallo gossipgirlz,

bei dir ist das Problem ein bisschen anders als bei LuNeX, aber auch dir kann geholfen werden.

Das Problem ist, dass der Haupt-Container eben nur so hoch ist, wie sein Inhalt. Die Sidebar-Container, die die float-Eigenschaft haben, gehen darüber hinaus.
Um den Haupt-Container dazu zu zwingen bis unter die Sidebar-Container zu gehen, fügst du einfach am Ende des Containers - vor dem </div> - folgenden Code ein:

Code

<br style="clear:both;line-height:0;font-size:0;" />

Gruß,
Simon

gossipgirlz

Hey... das hat super geklappt!
Danke :)
Sandra

gossipgirlz

gemischt mit meinem anderen problem hat sich nun folgendes ergeben:

wenn ich alles zentriert angezeigt habe, zeigt es mit im firefox nun den hintergrund mit lücken an...

hier ein screenshot.

wenn ich nun aus dem style css im content bereich das "float:left;" rausnehme (und leer lasse, oder durch ein "text-align: left;" oder center oder sonstwas ersetze) , sind die background lücken geschlossen aber... es verschiebt sich alles.

die überschrift sieht dann so aus ... und den text verschiebts in diese linke ecke.

im i-explorer ist alles gut, wenn ich die float sache wähle.

an welcher stelle mache ich was falsch?

gossipgirlz

Kann hier nochmal jemand drüberschauen?
Habe leider den Fehler nicht gefunden...

Im Firefox ist bei mir noch alles zerstückelt.

:(

Simbo

Ich hab mal dein CSS etwas überarbeitet und ein paar margins, paddings, floats und text-aligns von #navigation, #container, #content und #sidebar geändert. :mrgreen:

(Mit dem dem WebDev Plugin vom Firefox kann man bei der Seite online mal kurz das CSS live anpassen. Is praktisch und geht fix... :) )

Die ganzen <center>-Tags kannst du jetzt aus deinen Templates rausschmeissen.

Hier die neue style.css:

Code

/* 
Theme Name: lightCMS
Theme URI: http://www.GFXedit.com
Version: 1.2
Description: A Content management system like light weight Theme from <a href="http://www.gfxedit.com">GFXedit.Com</a>
Author: Sreejith
Author URI: http://www.sr-ultimate.com
*/
/* BODY CONTAINER */
             


                body {                
                       background: url(http://www.gossipgirlz.de/girlz/gossip_back3.jpg); 
                       background-repeat: no-repeat; 
                       background-position:center center; 
                       background-attachment:fixed; 
                       text-align:center;
   
                     }  






                #container {
            width: 950px;
            margin: 0 auto 40px auto;
                        text-align:center;
            font-family: Lucida Grande, Tahoma, Arial, Helvetica, sans-serif; 
            font-size: 12px;
            line-height: 1.6em;
            color: #333;
            background-color: #FFFFFF;
            padding-top: 10px;
            
        }
        
        h1 {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 25px;
            font-weight: strong;
            color: #274722;
            margin-bottom: 5px;
            background-color: #FFFFFF;
                        line-height:1.1em;


        }
        
        h2 {
            color: #666666;
            font-size: 13px;
            font-family: Arial, Helvetica, sans-serif;
            background-color: #FFFFFF;
            border-bottom: 1px solid;
        }
        
        a {
            color:#ff69b4;
            text-decoration: none;
        }


        a:hover {
            color:#ff69b4;
            background-color: #F5F5F5;
        }




        
        #searchform {
            float:center;
            font-size: 9px;
                        
                        
        }
        
        input {
            background-color: #FFFFFF;
            color: #999999;
            border: 1px solid #CCC;
            font-size: 11px;
            padding: 3px;
        }


        
        .button {
            padding: 2px;
        }
        
/* HEADER ELEMENTS */


        #header {
            border-bottom: 0px solid #948979;
            clear: both;




        }
        #header h1 {
            font-family: Georgia, "Times New Roman", Times, serif;
                        font-size: 22px;
font-weight: normal;
        }
        
#header h1 a:hover {
    text-decoration:underline;
}


        #header p { 
            margin-top: 0px;
            margin-left: 30px;
            color: #999999;
        }
        #header    input {
            background-color: #FFF;
            color: #999999;
            border: 1px solid #CCC;
            font-size: 11px;
            padding: 3px;
        }


#header input:hover {
    border:1px solid #999;
    background-color: #f4f4f7;
    color:#666;    
}
    #header input:focus {
    border:1px solid #999;
    background-color: #f4f4f7;
    color:#333;
}


/* NAVIGATION BAR */


         #navigation ul {
            margin: 0;
            padding: 0 0 0 10px;
            list-style-type: none;            
            float: left;
            padding-right:7px;
            background-color: #FFFFFF;
            }


                 #navigation li {
            display: inline;


            }


         #navigation a {
            display: block;
            padding: 5px;
            width: 160px;
        
         }
         #navigation h2 {
            font-family: Arial, Helvetica, sans-serif;
            font-weight: strong;
            font-size: 13px;
            text-decoration: none;
            margin-bottom: 5px;
            background-color: #FFFFFF;


         }


        #navigation a:link, #navlist a:visited {
            color:#ff1493;
            text-decoration: none;
        }
        




        #navigation a:hover {
            background: #000000 96% 50% no-repeat;
            background-color: #F5F5F5;
            color:#ff1493;
        }




        #navigation p {
            margin-top: 30px;
            padding: 0px;
            border-top: 1px solid #CCC;
                        float: left;
        }






        #navlist {
            margin-top: 19px;




        }
        #overline {
        padding-top: 10px;
        border-top: 1px solid;    
        }
        #linkcat {
        list-style: none;
        }
        
/* CONTENT ELEMENTS */


        #content {
                        text-align:left;
                        margin: 0 230px 0 230px;
                        display:block;
                        font-size: 13px;
            background-color: #FFFFFF;
                    }
                                
        
        #content p {
            padding-bottom: 10px;


        }


#content .articleimg {
    float:right;
    padding:5px;
    border:1px solid #999999;
    margin-left:10px;
    margin-top:0px;
    margin-bottom:15px;


}
#content .articleimgleft {
    float:left;
    padding:5px;
    border:1px solid #999999;
    margin-right:10px;
    margin-top:10px;
    margin-bottom:15px;
}
    #content input {
            background-color: #FFF;
            color: #999999;
            border: 1px solid #CCC;
            font-size: 11px;
            padding: 3px;
        }
        
                    #content input:hover {
    border:1px solid #999;
                background-color: #f4f4f7;
    color:#666;
    
}
    #content input:focus {
    border:1px solid #999;
    color:#333;
}
.storycontent {
                        
        }
        .feedback {
    padding-bottom: 10px;
    padding-left: 10px;
    border-bottom: 1px solid #CCC;
        font-size: 11px;
        }
                .meta {
                    padding-top: 5px;
        text-align: right;
                font-size: 11px;
        }




        
.date {
        text-align: right;
                font-size: 11px;
}




/* SIDEBAR ELEMENTS */


        #sidebar {
            float: right;
            width: 175px;
            padding-left:10px;
            padding-right:10px;
            background-color: #FFFFFF;
        }
        
        #sidebar li {
        list-style: none;
            background-color: #FFFFFF;
        }
#sidebar p {
    padding-bottom: 10px;
            border-bottom: 1px solid #DDDDDD;
        }
        .pagenav li {
        list-style: none;


        }


/* FOOTER ELEMENTS */


        #footer {
            margin-top: 20px;
            clear: both;
                text-align: center;
            font-family: Georgia, "Times New Roman", Times, serif;
            background: #f4f5f1;
            padding: 0px 5px 0px 5px;
        }
        
        #footer p {
            color:#336633;
            padding: 5px;
        }
        
        #footer p a {
            color: #336633;
            border-bottom: 1px dotted #336633;


        }
        
        #footer p a:hover {
            color: #FFFFFF;
            background-color:#bab7b6;
        }
        
/* COMMENT ELEMENTS */
#commentlist li {
margin-bottom: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid #700000;
}


#commentform {
margin: 1em 0;
background: #ffffff;
width: 40em


}


#commentform textarea {
background: #ffffff;
width: 20em
}
#commentform textarea:hover {
background: #f6f4f4;
border: 1px solid #9d9d9c;
}
#commentform textarea:focus {
background: #f6f4f4;
border: 1px solid #9d9d9c;
}


#commentform #email, #commentform #author, #commentform #url {
font-size: 1.1em;
background: #ffffff;
border: 1px solid #d6d3d3;
width: 180px;
}
#commentform #email:hover, #commentform #author:hover, #commentform #url:hover {
font-size: 1.1em;
background: #f6f4f4;
border: 1px solid #9d9d9c;
width: 180px;
}
#commentform #email:focus, #commentform #author:focus, #commentform #url:focus {
font-size: 1.1em;
background: #f6f4f4;
border: 1px solid #9d9d9c;
width: 180px;
}


.pg_nav {
        text-align: center;
        
}
/* BLOCKQOUTE */


blockquote {
border-left: 3px solid #666666;
margin: 1em 0;
padding: 10px;
background: #f4f5f1;
width: 300px;
}






#content img { border: 1px solid #999999; padding: 5px; }


#content img.wp-smiley {
    margin:0;padding:0;border:none;
    }




#content input { font-size: 11px;                        
        }


.date {
    margin-bottom:50px;
    }








.pagebar 
    { 
        font: 11px Arial, Helvetica, sans-serif; 
        padding-top: 20px; 
        padding-bottom: 10px; 
        margin: 0px; 
    }


.pagebar a, .pageList .this-page 
    {
        padding: 2px 6px; 
        border: solid 1px #ddd; 
        background: #fff; 
        text-decoration: none;
    }


.pagebar a:visited 
    {
        padding: 2px 6px; 
        border: solid 1px #ddd; 
        background: #fff; 
        text-decoration: none;
    }


.pagebar .break 
    {
            padding: 2px 6px; 
            border: none; 
            background: #fff; 
            text-decoration: none;
    }


.pagebar .this-page 
    {
        padding: 2px 6px; 
        border-color: #999; 
        font-weight: bold; 
        font-size: 13px; 
        vertical-align: top; 
        background: #fff;
    }


.pagebar a:hover 
    {
        color: #fff; 
        background: #0063DC; 
        border-color: #036; 
        text-decoration: none;
    }

Alles anzeigen

gossipgirlz

wow, was für ein luxus. :mrgreen: vielen dank schonmal, werde das css dann nachher nochmal genauer studieren, damit ich auch fleißig dran lernen kann :)

habe es grade mal eingeladen, sieht echt geordnet aus :)
was noch nicht stimmt:

sidebar und navigation bar sind nun mittig (also der text darin), der sollte linksbündig sein.
und im IE läst es mir nun große bilder (wie das zweite zum beispiel) nicht mehr in den container sondern die verrutschen nach unten. von den maßen müsste es theorethisch aber passen. das problem hatte ich öfters schon, hab dann immer so lange rumprobiert, bis es gestimmt hat. allerdings so viel platz wie da rechts und links ist müsste es doch locker passen, oder?
und den hintergrund lädt's komischerweise auch nicht mehr... der link stimmt aber noch... hmmm

gossipgirlz

p.s.: die <center> tags vor und nach meinen anzeigenblöcken hab ich drin gelassen, die sind ja sonst linksbündig,...

Simbo

Zitat von gossipgirlz

sidebar und navigation bar sind nun mittig (also der text darin), der sollte linksbündig sein.

Einfach bei "#sidebar" und "#navigation ul" ein text-align:left; einfügen.

Zitat von gossipgirlz

und den hintergrund lädt's komischerweise auch nicht mehr... der link stimmt aber noch... hmmm

Du hast ganz am Anfang deiner style.css das "/*" vergessen.

Simbo

Zitat von gossipgirlz

und im IE läst es mir nun große bilder (wie das zweite zum beispiel) nicht mehr in den container sondern die verrutschen nach unten. von den maßen müsste es theorethisch aber passen. das problem hatte ich öfters schon, hab dann immer so lange rumprobiert, bis es gestimmt hat. allerdings so viel platz wie da rechts und links ist müsste es doch locker passen, oder?

Du hast zwischen den beiden Seiten-Containern ca. 500px Platz.
Wenn du ein 500px breites Bild anzeigst, das vom CSS einen 5px breiten Rahmen bekommt, dann ist es nachher 510px breit...
Der IE hat ein anderes Boxmodell als der Firefox, da kann es dann unter gewissen Umständen zu Unterschieden von ein paar Pixeln kommen und schon passt dein Bild nicht mehr rein...
Mach es einfach ein wenig kleiner...

Gruß

Simon

gossipgirlz

ha! alles perfekt... danke für den live support :)
habe ein wenig herumprobiert mit den rändern (bild verkleinern geht nicht, sind 70 seiten blog und mindestens die hälfte davon sind große bilder). aber hat hingehauen.
ich bin dir nen gefallen schuldig :mrgreen:

und schau mal das hier rechts, wie kann denn so ne ecke passieren? kann das an irgendeiner werbeanzeige liegen, die breiter ist, als die sidebar?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Hintergrund: Der ganze Container weiß?

Jetzt mitmachen!