Containertabschluss durch backgroundverschiebung

[kony1994]

Hallo, ich hab ein Problem bei dem ich einfach nich weiterkomme, folgendes:

So Soll es sein:
http://imgup.tk/im/soll1920.PNG

Und so hab ich es zurzeit:
http://imgup.tk/im/ist4916.PNG

Der Fehler ist das unten drann die ecken nicht abgerundet sind, da der hintergrund (main) bis nach unten geht und der footer drüber ist, hier:

http://imgup.tk/im/divs4893.png

Hier mein Code:

<div id="main">
<div id="menu"></div>
<div id="content">
</div>
<span class="stopFloat"></span>
<div id="footer"></div>
</div>

CSS:

#main {
margin: 0 auto;
width:800px;
height:100%;
background-image: url(main.png);
}
#menu {
	width:150px;
	background-color:#000;
	min-height:200px;
	float:left;
}
#content {
	width:635px;
	min-height:200px;
	float: right;
}
.stopFloat {
display: block;
float: none;
clear: both;
height: 1px;
font-size: 0px;
line-height: 0px;
}
#footer {
height: 34px;
width:800px;
background-image: url(footer.png);
background-repeat:no-repeat;
margin: 0 auto;

}

Was muss ich ändern bzw was mac ich falsch? Ich will einfach das der background von dem Footer ein Stück nach unten rutscht, damit die abgerundeten Ecken unten an Main anschliesen und den Container schliesen.

 

[tobee]

Was passiert wenn du #main einen margin-bottom von 34px gibst?

 

[SpiceLab]

Erfolgsversprechender dürfte hier stattdessen padding-bottom:34px für #menu und #content sein, damit deren Inhalt Abstand zum Footer-Bereich einhält.

Und wozu nutzt du das inhaltsleere <span>?

Seine clear:both-Regel lässt sich im Markup auf #footer anwenden, um den Umfluß abzubrechen.

 

[kony1994]

Danke schonmal, funktioniert leider nicht.
Hab diesen Stopfloat Tag ausnem Forum, jetzt seh ich ja das es damit auch geht

Der Padding geht zwar, jedoch rutscht der Hintergrund von main immer weiter mit.
Also ist der Abgerundete Ecken Hintergrund immernoch über dem main hintertgrund und nicht darunter.

http://imgup.tk/im/nicht7605.PNG

 

[SpiceLab]

Kannst du das Ganze mal online stellen?

//edit: Vielleicht ist es neben den empfohlenen padding-bottom-Regeln hilfreich bzw. erforderlich, den Footer-Bereich im HTML-Code erst nach dem DIV #main zu notieren, und ihn per margin-bottom:-34px für #main oder margin-top:-34px für #footer nach oben zu verrücken.

Siehe hierzu Webmaster FAQ -> CSS Wie lässt sich der Footer am unteren Fensterrand ausrichten?.

 

[kony1994]

Das kannse ist hier online: http://ak11.kony1994.de

Danke schonmal, kannst du mir von deinem edit mal den kompletten Code geben? Hab das nicht ganz verstANDEN...

 

[SpiceLab]

Die Transparenz in "footer.png" erklärt dann, warum hier keiner meiner Tipps greifen wollte ;-)

Die wirklich einfachste Lösung ist in dieser Grafikdatei an besagter Stelle (außerhalb des Radius) die Seitenhintergrundfarbe einzusetzen (in "bg.png" ermittelter Hex-Code: "#FFAE01"), damit das Bildmotiv des mittleren Abschnitts "main.png" nicht zum Vorschein kommt

 

[kony1994]

Das Problem ist nur, wenn winger oder mal mehr Text im Content steht, endet dieser auch mit einer anderen Hintergrundfarbe, da wie du siehst, der Hintergrund ein Farbverlauf ist.
Wie kann ich das anders noch lösen?

 

[SpiceLab]

Das Problem ist vielmehr, dass du mich falsch verstanden hast, denn ich sprach nicht von der Innenfläche, sondern von der Außenfläche der abgerundeten Ecken, wo anstelle des derzeit sichtbaren vertikal verlaufenden Rahmens der Seitenhintergrund "bg.png" erscheinen soll, und dieser besitzt mit der Grafikhöhe von 1px wohl kaum einen vertikalen Farbverlauf, sondern immer den von mir genannten Farbwert.