Hintergrundfarbe einstellen - CSS

innovationsraum

Hallo,

ich hab einen kleines Problem mit der Einstellung der Hintergrundfarbe bei einem abgewandelten twentyten theme. Egal was ich bei den Ebenen einstelle, er zeigt mir keinerlei Hintergrundfarbe an. Auch background-images nimmt er nicht an...bin echt überfragt. Die Seite liegt momentan noch hier. Einen Screenshot wie es aussehen soll habe ich angehängt.

Vielen Dank für Eure Hilfe...

Anbei die CSS Datei:

html,body{
height:100%;

}

a {
text-decoration:none;
}
#wrapper {
position:absolute;
top:0px;
left:0px;
width:100%;
height:auto;
z-index:0;

}

#back {
position:relative;
background-color:#FFF;
width:990px;
height:auto;
background-image:url(img/strich_rot.png);
background-repeat: repeat-y;
}

#test {
width:990px;
background-color:#FFF;

}
#container {
position:relative;
align:left;
width:990px;

top:0px;
z-index:2;
}
.container {
background:#FFFFFF;

}
#logo {
position:absolute;
left:14px;
top:20px;
height:137px;
width:97px;
z-index:10;

}
#header-logo {
position:absolute;
left:123px;
top:20px;
height:137px;
width:809px;
z-index:11;
}

#strich_rot_oben {
position:absolute;
top:20px;
left:92px;
z-index:40;
height:140px;
width:49px;

}
#navi {
position:absolute;
left:6px;
top:180px;
line-height:15px;
z-index:500;
width:110px;
border:0px;

}

.content {
color:#000000;
font-family: Arial, sans-serif;
font-size:13px;
line-height:18px;
}
.content_rot {
color:#ae101c;
font-family: Arial, sans-serif;
font-size:13px;
line-height:18px;
}
.news {
border:#aeb0b1 solid 1px;
}

.news_rot {
color:#ae101c;
}

#test {
position:absolute;
top:160px;
left:92px;
width:817px;
height:auto;
min-height:529px;

}
#strich_rot {
position:absolute;
top:0px;
background-image:url(img/strich_rot.png);
background-repeat: repeat-y;
width:49px;
left:0px;
height:100%;
z-index:90;
}
#pfeil_unten {
position:absolute;
height:71px;
bottom: -44px;
z-index:91;

}
#footer2 {
position:relative;
height:34px;
width:817px;
left:23px;
z-index:89;
background-color:#FFF;

}
#content2 {
position:relative;
height:100%;
width:759px;
background-color:#d9dadb;
background-image:url(img/content_back.gif);
background-repeat:no-repeat;
top:0;
left:31px;
padding-top:25px;
padding-bottom:36px;
padding-left:25px;
padding-right:25px;
z-index:88;
min-height:529px;
}
#slogan2 {
position:relative;
left:817px;
height:667px;
width:49px;
bottom:715px;
z-index:93;

}
.for_more_infomation
{
color:#ae101c;
font-family: Arial, sans-serif;
font-size:9px;
font-weight:bold;
line-height:12px;

}
.news_rot {
color:#ae101c;
font-family: Arial, sans-serif;
font-size:13px;
line-height:18px;
}
.news_rot_ueberschrift
{
color:#ae101c;
font-family: Arial, sans-serif;
font-size:14px;
font-weight:bold;
line-height:12px;

}

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

Tutrix

zum einfügen von Code bitte "Code einfügen" ([COLOR=Red]#[/COLOR]) verwenden

zum Problem:
ändere mal dies

Code

#wrapper {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:auto;
    z-index:0;    
}

in dies

Code

#wrapper {
    height:900px;
    width:990px;
    margin: 0 auto;
    background-color: #FFFFFF;    
}

zusätzlich

Code

html,body{
    height:100%;
}

in

Code

html,body{
    height:100%;
    margin: 0 auto;
}

innovationsraum

Hey,

erst einmal vielen Dank für die schnelle und produktive Antwort. Es gibt jetzt noch ein kleines Problem. Und zwar wird die Seite jetzt linksbündig angezeigt und der background (#ffffff) wird von der Höhe nicht skaliert. D.h. wenn man auf die Seite News geht hört der Hintergrund wegen (wrapper {height:900px}) bei 900px auf.

Vielleicht hast Du noch eine Idee?

Vielen Dank...

innovationsraum

Ich korrigiere meine Aussage von eben :-) Jetzt ist es nur noch die Höhe des Wrappers die sich nicht an den Content anpasst. Vielleicht hast Du noch eine Idee...ich probier mal weiter.

innovationsraum

so, der einzige Fehler ist jetzt noch die Höhe des Wrappers, dieser passt sich nicht automatisch der Höhe des Content Layers an...CSS Datei sieht im Moment so aus...die Seite sieht man hier. Eibfach mal auf News klicken, um den Fehler zu sehen.

Code

html,body{
    height:100%;
    margin: 0 auto;
    
}


a {
    text-decoration:none;
}


#wrapper {
    height:100%;
    width:990px;
    margin: 10px auto;
    background-color:#ffffff;
}


#container {
    position:relative;
    align:left;
    width:990px;
    margin: 0 auto;
    top:0px;
    z-index:2;
}
.container {
    background:#FFFFFF;
    
}
#logo {
    position:absolute;
    left:14px;
    top:20px;
    height:137px;
    width:97px;
    z-index:10;


}
#header-logo {
    position:absolute;
    left:123px;
    top:20px;
    height:137px;
    width:809px;
    z-index:11;
}


#strich_rot_oben {
    position:absolute;
    top:20px;
    left:92px;
    z-index:40;
    height:140px;
    width:49px;


}
#navi {
    position:absolute;
    left:6px;
    top:180px;
    line-height:15px;
    z-index:500;
    width:110px;
    border:0px;


}


.content {
    color:#000000;
    font-family: Arial, sans-serif;
    font-size:13px;
    line-height:18px;
}
.content_rot {
    color:#ae101c;
    font-family: Arial, sans-serif;
    font-size:13px;
    line-height:18px;
}


.news {
    border:#aeb0b1 solid 1px;
}


.news_rot {
    color:#ae101c;
}


#test {
    position:absolute;
    top:160px;
    left:92px;
    width:817px;
    height:auto;
    min-height:529px;


}


#strich_rot {
    position:absolute;
    top:0px;
    background-image:url(img/strich_rot.png);
    background-repeat: repeat-y;
    width:49px;
    left:0px;
    height:100%;
    z-index:90;
}


#pfeil_unten {
    position:absolute;
    height:71px;
    bottom: -44px;    
    z-index:91;


}


#footer2 {
    position:relative;
    height:34px;
    width:817px;    
    left:23px;
    z-index:89;
    background-color:#FFF;


}


#content2 {
    position:relative;
    height:100%;
    width:759px;
    background-color:#d9dadb;
    background-image:url(img/content_back.gif);
    background-repeat:no-repeat;
    top:0;
    left:31px;
    padding-top:25px;
    padding-bottom:36px;
    padding-left:25px;
    padding-right:25px;
    z-index:88;
    min-height:529px;
}


#slogan2 {
    position:relative;
    left:817px;
    height:667px;
    width:49px;
    bottom:715px;
    z-index:93;


}


.for_more_infomation
{
    color:#ae101c;
    font-family: Arial, sans-serif;
    font-size:9px;
    font-weight:bold;
    line-height:12px;
    
}


.news_rot {
    color:#ae101c;
    font-family: Arial, sans-serif;
    font-size:13px;
    line-height:18px;
}


.news_rot_ueberschrift
{
    color:#ae101c;
    font-family: Arial, sans-serif;
    font-size:14px;
    font-weight:bold;
    line-height:12px;
    
}

Alles anzeigen

Tutrix

Hab mir das jetzt mit Firebug nochmal angesehen

Du hast als Basis ja das Twenty Ten verwendet und dabei soviel verändert/gelöscht das einiges nicht mehr stimmt.
Also einfach mit den Originaldateien nochmal vergleichen.
Die Höhe wird bei dir scheinbar auf 779px fixiert, wodurch Höhe 100% im Body sowie Wrapper immer nur 779px ergeben.

Der unnötige große Leerraum unten, wird durch den Slogan rechts verursacht, der falsch in den Footerbereich eingefügt wurde.

Als "[COLOR="Red"]Notlösung[/COLOR]" kannst du mal im Body die Höhe auf 130% setzen.
Bei noch längerem Content, stimmt es dann aber wieder nicht.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Hintergrundfarbe einstellen - CSS

Jetzt mitmachen!