• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Problem bei der Hintergrundfarbe bei verschachtelten Containern

D

DanySahne313

Neues Mitglied
Moin Moin,

ich habe ein kleines Problem mit meinem HTML-Quellcode.

Code: 
<div id="wrapper">
<div id="logo">
<!--#include virtual="includes/logo.inc" -->
</div>
<div id="mainmenu">
<!--#include virtual="includes/menu.inc" -->
</div>
<div id="content">
Hier steht der Inhalt...
</div>
</div>
<div id="footer">
<!--#include virtual="includes/footer.inc" -->
</div>

Der Wrapper ist so formatiert, dass er einen weißen Hintergrund hat. Dieser wird jedoch nur hinter dem Logo angezeigt. Er soll jedoch ebenso hinter dem Menü und dem Content sein (so wie m.E. auch im Quelltext geschrieben).
Schließe ich alle anderen DIV-Container im Wrapper ein, macht er den gesamten Hintergrund weiß, wie er es dann ja auch sollte...
Nun meine Frage - wo ist mein (Denk-)Fehler, sodass nicht alles außer dem Footer weiß hinterlegt ist?

Vielen Dank

DanySahne313
 
Zuletzt bearbeitet:
Werbung:
Kannst du nicht den gesamten <body> weiß machen?
Code: 
body {
          background: Farbwert;
}
Hättest du evtl. den Css Quellcode?
 
Nein, das geht nicht, da der Wrapper maximal 1000px breit wird. Der restliche Hintergrund hat eine andere Farbe.

Code: 
@charset "utf-8";

*    {
margin: 0px;
padding: 0px;
border: 0px;
}

html  {
height: 100%;
}

body  {
background-color: #B7F4B7;
}


div#wrapper {
width: 90%;
max-width: 1000px;
margin: 0px auto;
background-color: #FFFFFF;
box-shadow: 10px 10px 70px green;
}


div#logo {
margin-bottom: 1.5%;
margin-top: 1%;
padding: 1%;
}


div#menu, div#mainmenu {
float: left;
width: 25%;
margin-bottom: 1%;
padding-left: 1%;
font-family: Arial;
}
/* Menüunterpunkte ausblenden */
ul#thema1,
ul#thema2,
ul#thema3,
ul#thema4,
ul#thema5,
ul#thema6,
ul#thema7,
ul#thema8,
ul#thema9,
ul#thema10 {
display: none;
}
/* Menüunterpunkte bei aktiven Thema einblenden */
#seite1 ul#thema1,
#seite2 ul#thema2,
#seite3 ul#thema3,
#seite4 ul#thema4,
#seite5 ul#thema5,
#seite6 ul#thema6,
#seite7 ul#thema7,
#seite8 ul#thema8,
#seite9 ul#thema9,
#seite10 ul#thema10 {
display: block;
}
/* Menü formatieren */
ul#menu,
ul#menu li {
margin: 0;
padding: 0;
list-style: none;
}
ul#menu li ul li {
margin-bottom: 1px;
text-indent: 1.5em;
color: #239123;
}
ul#menu li a {
font-weight: bold;
text-decoration: none;
display: block;
padding: 8px;
color: #0C670C;
}
ul#menu li ul li a {
color: #239123;
}
ul#menu a:hover {
background-color: #B7F4B7;
color: #000000;
}


div#content {
float: right;
width: 70%;
margin-bottom: 1%;
margin-right: 1%;
font-family: Arial;
font-size: 1em;
text-align: justify;
padding-right: 1%;;
}
div#content h1 {
font-size: 1.7em;
color: #0C670C;
font-weight: bolder;
padding-bottom: 0.7em;
}
div#content h2 {
font-size: 1.4em;
color: #239123;
font-style: italic;
padding-bottom: 0.4em;
}
div#content h3 {
font-size: 1.2em;
}
div#content p {
padding-bottom: 0.5em;
}
div#content img {
max-width: 100%;
border: 0;
}


div#footer {
clear: both;
padding: 1%;
font-size: 0.7em;
margin-bottom: 1%;
}
div#footer a {
color: #0C670C;
}


/* Alle Bilder mit der id: image erhalten folgende Formatierung */
img#image{
width: 100%;
}
 
Werbung:
Werbung:
Erst einmal vielen Dank für die Hilfe. Ich gehe jetzt einfach mal davon aus, dass der Code korrekt ist (siehe folgende Codebox).

Code: 
@charset "utf-8";

*    {
margin: 0px;
padding: 0px;
border: 0px;
}

html  {
height: 100%;
}

body  {
background-color: #B7F4B7;
}


div#wrapper {
width: 90%;
max-width: 1000px;
margin: 0px auto;
background-color: #FFFFFF;
box-shadow: 10px 10px 70px green;
}


div#logo {
margin-bottom: 1.5%;
margin-top: 1%;
padding: 1%;
}


div#menu, div#mainmenu {
float: left;
width: 25%;
margin-bottom: 1%;
padding-left: 1%;
font-family: Arial;
}
/* Menüunterpunkte ausblenden */
ul#thema1,
ul#thema2,
ul#thema3,
ul#thema4,
ul#thema5,
ul#thema6,
ul#thema7,
ul#thema8,
ul#thema9,
ul#thema10 {
display: none;
}
/* Menüunterpunkte bei aktiven Thema einblenden */
#seite1 ul#thema1,
#seite2 ul#thema2,
#seite3 ul#thema3,
#seite4 ul#thema4,
#seite5 ul#thema5,
#seite6 ul#thema6,
#seite7 ul#thema7,
#seite8 ul#thema8,
#seite9 ul#thema9,
#seite10 ul#thema10 {
display: block;
}
/* Menü formatieren */
ul#menu,
ul#menu li {
margin: 0;
padding: 0;
list-style: none;
}
ul#menu li ul li {
margin-bottom: 1px;
text-indent: 1.5em;
color: #239123;
}
ul#menu li a {
font-weight: bold;
text-decoration: none;
display: block;
padding: 8px;
color: #0C670C;
}
ul#menu li ul li a {
color: #239123;
}
ul#menu a:hover {
background-color: #B7F4B7;
color: #000000;
}


div#content {
float: right;
width: 70%;
margin-bottom: 1%;
margin-right: 1%;
font-family: Arial;
font-size: 1em;
text-align: justify;
padding-right: 1%;
}
div#content h1 {
font-size: 1.7em;
color: #0C670C;
font-weight: bolder;
padding-bottom: 0.7em;
}
div#content h2 {
font-size: 1.4em;
color: #239123;
font-style: italic;
padding-bottom: 0.4em;
}
div#content h3 {
font-size: 1.2em;
}
div#content p {
padding-bottom: 0.5em;
}
div#content img {
max-width: 100%;
border: 0;
}
div#content:after {
content: "";
clear: both;
}


div#footer {
clear: both;
padding: 1%;
font-size: 0.7em;
margin-bottom: 1%;
}
div#footer a {
color: #0C670C;
}


/* Alle Bilder mit der id: image erhalten folgende Formatierung */
img#image{
width: 100%;
}

Allerdings zeigt er das Ganze immer noch nicht vernünftig an :( .
Gibt es noch einen Ansatz, den ich zur Verbesserung verfolgen kann?

Vielen Dank nochmals für eure Mühen ;)
 
Werbung:
DanySahne313 schrieb:
Erst einmal vielen Dank für die Hilfe. Ich gehe jetzt einfach mal davon aus, dass der Code korrekt ist (siehe folgende Codebox).

Code: 
@charset "utf-8";

*    {
margin: 0px;
padding: 0px;
border: 0px;
}

html  {
height: 100%;
}

body  {
background-color: #B7F4B7;
}


div#wrapper {
width: 90%;
max-width: 1000px;
margin: 0px auto;
background-color: #FFFFFF;
box-shadow: 10px 10px 70px green;
}


div#logo {
margin-bottom: 1.5%;
margin-top: 1%;
padding: 1%;
}


div#menu, div#mainmenu {
float: left;
width: 25%;
margin-bottom: 1%;
padding-left: 1%;
font-family: Arial;
}
/* Menüunterpunkte ausblenden */
ul#thema1,
ul#thema2,
ul#thema3,
ul#thema4,
ul#thema5,
ul#thema6,
ul#thema7,
ul#thema8,
ul#thema9,
ul#thema10 {
display: none;
}
/* Menüunterpunkte bei aktiven Thema einblenden */
#seite1 ul#thema1,
#seite2 ul#thema2,
#seite3 ul#thema3,
#seite4 ul#thema4,
#seite5 ul#thema5,
#seite6 ul#thema6,
#seite7 ul#thema7,
#seite8 ul#thema8,
#seite9 ul#thema9,
#seite10 ul#thema10 {
display: block;
}
/* Menü formatieren */
ul#menu,
ul#menu li {
margin: 0;
padding: 0;
list-style: none;
}
ul#menu li ul li {
margin-bottom: 1px;
text-indent: 1.5em;
color: #239123;
}
ul#menu li a {
font-weight: bold;
text-decoration: none;
display: block;
padding: 8px;
color: #0C670C;
}
ul#menu li ul li a {
color: #239123;
}
ul#menu a:hover {
background-color: #B7F4B7;
color: #000000;
}


div#content {
float: right;
width: 70%;
margin-bottom: 1%;
margin-right: 1%;
font-family: Arial;
font-size: 1em;
text-align: justify;
padding-right: 1%;
}
div#content h1 {
font-size: 1.7em;
color: #0C670C;
font-weight: bolder;
padding-bottom: 0.7em;
}
div#content h2 {
font-size: 1.4em;
color: #239123;
font-style: italic;
padding-bottom: 0.4em;
}
div#content h3 {
font-size: 1.2em;
}
div#content p {
padding-bottom: 0.5em;
}
div#content img {
max-width: 100%;
border: 0;
}
div#content:after {
content: "";
clear: both;
}


div#footer {
clear: both;
padding: 1%;
font-size: 0.7em;
margin-bottom: 1%;
}
div#footer a {
color: #0C670C;
}


/* Alle Bilder mit der id: image erhalten folgende Formatierung */
img#image{
width: 100%;
}

Allerdings zeigt er das Ganze immer noch nicht vernünftig an :( .
Gibt es noch einen Ansatz, den ich zur Verbesserung verfolgen kann?

Vielen Dank nochmals für eure Mühen ;)
Zum Vergrößern anklicken....

Wegen der letzten CSS-Anweisung... IDs dürfen nur einmalig vorkommen.
HTML: 
<img id="image" alt="">
<img id="image" alt="">
ist falsch!

Und zu deiner eigentlichen Frage:
Code: 
html,body {width:100%; height:100%;}
 
Vielen Dank an alle. Ich habe das Ganze jetzt mit einem zusätzlichen Container gelöst. Dieser ist im HTML-Text am Ende und hat keinen Inhalt. In CSS habe ich den allerdings mit clear: both versehen, sodass jetzt der Footer als seperater Teil erkannt wird. Also - vielen Dank :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben